import { Component, Inject, OnInit, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatDividerModule } from '@angular/material/divider';
import { AclUserDialogService } from '../dialogs/acl-user-dialog.service';
import { BreakpointObserver } from '@angular/cdk/layout';
import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { I18nService } from '../services/i18n.service';
import { NotificationService } from '../services/notification.service';
import { SettingsService } from '../services/settings.service';
import { RedisStateService } from '../services/redis-state.service';
import { CommonService } from '../services/common.service';
import { SocketService } from '../services/socket.service';
import { MainCommandService } from '../services/main-command.service';
import { ConnectionDialogService } from '../dialogs/connection-dialog.service';
import { TreecontrolSettingsDialogService } from '../dialogs/treecontrol-settings-dialog.service';
import { AiSettingsDialogService } from '../dialogs/ai-settings-dialog.service';
import { P3xrAccordionComponent } from '../components/p3xr-accordion.component';
import { P3xrButtonComponent } from '../components/p3xr-button.component';
import { switchGui } from '../../core/gui-switch';

/**
 * Settings page — Angular replacement for AngularJS p3xrSettings.
 * First complete Angular page migration.
 *
 * Contains:
 * - Connections list (add/edit/delete/connect/disconnect)
 * - License info panel
 * - Tree settings panel
 */
@Component({
    selector: 'p3xr-ng-settings',
    standalone: true,
    imports: [
        FormsModule,
        MatToolbarModule, MatButtonModule, MatIconModule, MatListModule, MatSlideToggleModule,
        MatTooltipModule, MatDividerModule, DragDropModule,
        P3xrAccordionComponent, P3xrButtonComponent,
    ],
    template: `
        <!-- Donate -->
        <p3xr-ng-accordion [title]="strings().title?.donateTitle" accordionKey="donate" [collapsible]="false">
            <div actions>
                <a href="https://www.paypal.me/patrikx3" target="_blank" rel="noreferrer" style="text-decoration: none;">
                    <p3xr-ng-button
                        [label]="(strings().title?.donate) + ' — PayPal'"
                        mdIcon="favorite">
                    </p3xr-ng-button>
                </a>
            </div>
            <div content>
                <div style="padding: 12px 16px; font-size: 13px; opacity: 0.85; line-height: 1.6;">
                    {{ strings().title?.donateDescription }}
                </div>
            </div>
        </p3xr-ng-accordion>

        @if (isPromoDomain) {
            <br/>

            <!-- Promo: AI Network Assistant (demo site only) -->
            <p3xr-ng-accordion [title]="strings().promo?.title" accordionKey="promo-network" [collapsible]="false">
                <div actions>
                    <a href="https://network.corifeus.com" target="_blank" rel="noreferrer" style="text-decoration: none;">
                        <p3xr-ng-button
                            [label]="strings().promo?.visit"
                            mdIcon="travel_explore">
                        </p3xr-ng-button>
                    </a>
                </div>
                <div content>
                    <div style="padding: 12px 16px; font-size: 13px; opacity: 0.85; line-height: 1.6;">
                        {{ strings().promo?.description }}
                    </div>
                    <div style="padding: 0 16px 12px; font-size: 11px; opacity: 0.5; line-height: 1.4;">
                        {{ strings().promo?.disclaimer }}
                    </div>
                </div>
            </p3xr-ng-accordion>
        }

        <br/>

        <!-- Connections -->
        <p3xr-ng-accordion [title]="strings().label?.connections" accordionKey="settings">
            <div actions>
                <p3xr-ng-button
                    (click)="toggleGroupMode()"
                    [label]="strings().label?.grouped"
                    [mdIcon]="groupModeEnabled ? 'check_box' : 'check_box_outline_blank'">
                </p3xr-ng-button>
                @if (!readonlyConnections) {
                    <p3xr-ng-button
                        (click)="connectionForm('new')"
                        [label]="strings().intention?.connectionAdd"
                        mdIcon="add_box">
                    </p3xr-ng-button>
                }
            </div>
            <div content>
                @if (connectionsList.length === 0) {
                    <div style="padding: 16px;">
                        {{ strings().intention?.noConnectionsInSettings }}
                    </div>
                }

                @if (connectionsList.length > 0) {
                    <div>
                        @if (groupModeEnabled) {
                        <div cdkDropList
                             [cdkDropListData]="groupedConnections"
                             (cdkDropListDropped)="dropGroup($event)"
                             [cdkDropListEnterPredicate]="groupDropPredicate"
                             class="p3xr-group-drop-list">
                        @for (group of groupedConnections; track group.name) {
                            <div cdkDrag class="p3xr-connection-group-block" [cdkDragData]="group">
                            <div class="p3xr-connection-group-header" cdkDragHandle (click)="toggleGroup(group.name)">
                                <mat-icon style="font-size: 18px; width: 18px; height: 18px;">{{ collapsedGroups.has(group.name) ? 'chevron_right' : 'expand_more' }}</mat-icon>
                                <span>{{ getGroupDisplayName(group.name) }}</span>
                                <span style="opacity: 0.5; font-weight: 400; font-size: 12px;">({{ group.connections.length }})</span>
                            </div>
                            @if (!collapsedGroups.has(group.name)) {
                                <div cdkDropList
                                     [cdkDropListData]="group.connections"
                                     (cdkDropListDropped)="dropConnection($event, group.name)"
                                     [cdkDropListEnterPredicate]="connectionDropPredicate">
                                @for (connection of group.connections; track connection.id; let last = $last) {
                                <div class="p3xr-connection-item" cdkDrag [cdkDragData]="connection">
                                    <div class="p3xr-connection-info">
                                        <div style="font-weight: 700;">{{ connection.name }}</div>
                                        <div style="font-size: 13px; opacity: 0.7;">{{ connection.host }}:{{ connection.port }}</div>
                                        <div style="font-size: 13px; opacity: 0.7;">
                                            @for (entry of getConnectionClients(connection); track entry.key) {
                                                {{ strings().page?.overview?.connectedCount?.({ length: entry.clients }) }}
                                            }
                                            &nbsp;
                                        </div>
                                    </div>

                                    @if (currentConnectionId !== connection.id) {
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-accent" (click)="connect(connection)"
                                                [matTooltip]="strings().intention?.connect"
                                                [attr.aria-label]="strings().intention?.connect">
                                                <mat-icon>power</mat-icon>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-accent" (click)="connect(connection)">
                                                <mat-icon>power</mat-icon>
                                                <span>{{ strings().intention?.connect }}</span>
                                            </button>
                                        }
                                    }

                                    @if (currentConnectionId === connection.id) {
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-accent" (click)="disconnect()"
                                                [matTooltip]="strings().intention?.disconnect"
                                                matTooltipPosition="above"
                                                [attr.aria-label]="strings().intention?.disconnect">
                                                <i class="fa fa-power-off"></i>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-accent" (click)="disconnect()">
                                                <i class="fa fa-power-off"></i>
                                                <span>{{ strings().intention?.disconnect }}</span>
                                            </button>
                                        }
                                    }

                                    @if (!readonlyConnections) {
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-warn" (click)="deleteConnection(connection, $event)"
                                                [matTooltip]="strings().intention?.delete"
                                                [attr.aria-label]="strings().intention?.delete">
                                                <mat-icon>delete_forever</mat-icon>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-warn" (click)="deleteConnection(connection, $event)">
                                                <mat-icon>delete_forever</mat-icon>
                                                <span>{{ strings().intention?.delete }}</span>
                                            </button>
                                        }
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-primary" (click)="connectionForm('edit', connection)"
                                                [matTooltip]="strings().intention?.edit"
                                                [attr.aria-label]="strings().intention?.edit">
                                                <mat-icon>edit</mat-icon>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-primary" (click)="connectionForm('edit', connection)">
                                                <mat-icon>edit</mat-icon>
                                                <span>{{ strings().intention?.edit }}</span>
                                            </button>
                                        }
                                    }

                                    @if (readonlyConnections) {
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-primary" (click)="connectionForm('edit', connection)"
                                                [matTooltip]="strings().intention?.view"
                                                [attr.aria-label]="strings().intention?.view">
                                                <mat-icon>mode_comment</mat-icon>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-primary" (click)="connectionForm('edit', connection)">
                                                <mat-icon>mode_comment</mat-icon>
                                                <span>{{ strings().intention?.view }}</span>
                                            </button>
                                        }
                                    }
                                </div>
                                @if (!last) { <mat-divider></mat-divider> }
                                }
                                </div>
                            }
                            </div>
                        }
                        </div>
                        }
                        @if (!groupModeEnabled) {
                            <div cdkDropList
                                 [cdkDropListData]="connectionsList"
                                 (cdkDropListDropped)="dropUngroupedConnection($event)">
                            @for (connection of connectionsList; track connection.id; let last = $last) {
                                <div class="p3xr-connection-item" cdkDrag [cdkDragData]="connection">
                                    <div class="p3xr-connection-info">
                                        <div style="font-weight: 700;">{{ connection.name }}</div>
                                        <div style="font-size: 13px; opacity: 0.7;">{{ connection.host }}:{{ connection.port }}</div>
                                        <div style="font-size: 13px; opacity: 0.7;">
                                            @for (entry of getConnectionClients(connection); track entry.key) {
                                                {{ strings().page?.overview?.connectedCount?.({ length: entry.clients }) }}
                                            }
                                            &nbsp;
                                        </div>
                                    </div>

                                    @if (currentConnectionId !== connection.id) {
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-accent" (click)="connect(connection)"
                                                [matTooltip]="strings().intention?.connect"
                                                [attr.aria-label]="strings().intention?.connect">
                                                <mat-icon>power</mat-icon>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-accent" (click)="connect(connection)">
                                                <mat-icon>power</mat-icon>
                                                <span>{{ strings().intention?.connect }}</span>
                                            </button>
                                        }
                                    }

                                    @if (currentConnectionId === connection.id) {
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-accent" (click)="disconnect()"
                                                [matTooltip]="strings().intention?.disconnect"
                                                matTooltipPosition="above"
                                                [attr.aria-label]="strings().intention?.disconnect">
                                                <i class="fa fa-power-off"></i>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-accent" (click)="disconnect()">
                                                <i class="fa fa-power-off"></i>
                                                <span>{{ strings().intention?.disconnect }}</span>
                                            </button>
                                        }
                                    }

                                    @if (!readonlyConnections) {
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-warn" (click)="deleteConnection(connection, $event)"
                                                [matTooltip]="strings().intention?.delete"
                                                [attr.aria-label]="strings().intention?.delete">
                                                <mat-icon>delete_forever</mat-icon>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-warn" (click)="deleteConnection(connection, $event)">
                                                <mat-icon>delete_forever</mat-icon>
                                                <span>{{ strings().intention?.delete }}</span>
                                            </button>
                                        }
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-primary" (click)="connectionForm('edit', connection)"
                                                [matTooltip]="strings().intention?.edit"
                                                [attr.aria-label]="strings().intention?.edit">
                                                <mat-icon>edit</mat-icon>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-primary" (click)="connectionForm('edit', connection)">
                                                <mat-icon>edit</mat-icon>
                                                <span>{{ strings().intention?.edit }}</span>
                                            </button>
                                        }
                                    }

                                    @if (readonlyConnections) {
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-primary" (click)="connectionForm('edit', connection)"
                                                [matTooltip]="strings().intention?.view"
                                                [attr.aria-label]="strings().intention?.view">
                                                <mat-icon>mode_comment</mat-icon>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-primary" (click)="connectionForm('edit', connection)">
                                                <mat-icon>mode_comment</mat-icon>
                                                <span>{{ strings().intention?.view }}</span>
                                            </button>
                                        }
                                    }
                                </div>
                                @if (!last) { <mat-divider></mat-divider> }
                            }
                            </div>
                        }
                    </div>
                }
            </div>
        </p3xr-ng-accordion>

        @if (currentConnectionId) {
            <br />
            <!-- ACL Users -->
            <p3xr-ng-accordion [title]="(strings().page?.acl?.title) + ' — ' + currentConnectionName" accordionKey="acl-users">
                <div actions>
                    <p3xr-ng-button
                        (click)="loadAclUsers(); $event.stopPropagation()"
                        [label]="strings().intention?.refresh"
                        mdIcon="refresh">
                    </p3xr-ng-button>
                    @if (!readonlyConnections) {
                        <p3xr-ng-button
                            (click)="openAclCreate(); $event.stopPropagation()"
                            [label]="strings().page?.acl?.createUser"
                            mdIcon="person_add">
                        </p3xr-ng-button>
                    }
                </div>
                <div content>
                    @if (aclLoading) {
                        <div style="padding: 16px; opacity: 0.6;">{{ strings().page?.acl?.loading }}</div>
                    } @else if (!aclUsers) {
                        <div style="padding: 16px; opacity: 0.6;">{{ strings().page?.acl?.noUsers }}</div>
                    } @else {
                        <div class="p3xr-acl-users-list">
                            @for (user of aclUsers; track user.name; let last = $last) {
                                <div class="p3xr-connection-item" [class.p3xr-acl-clickable]="!readonlyConnections" (click)="!readonlyConnections && openAclEdit(user)">
                                    <div class="p3xr-connection-info" style="display: flex; align-items: center;">
                                        <span style="font-weight: 700;">{{ user.name }}</span>
                                        @if (user.name === aclCurrentUser) {
                                            <span style="opacity: 0.5; margin-left: 6px; font-size: 11px; line-height: 1;">({{ strings().page?.acl?.currentUser }})</span>
                                        }
                                    </div>
                                    @if (!user.enabled) {
                                        <mat-icon style="color: var(--p3xr-btn-warn-bg, #f44336); font-size: 20px; width: 20px; height: 20px;"
                                            [matTooltip]="strings().page?.acl?.disabled">
                                            warning
                                        </mat-icon>
                                    }
                                    @if (!readonlyConnections) {
                                        @if (user.name !== 'default' && user.name !== aclCurrentUser) {
                                            @if (isXs) {
                                                <button mat-mini-fab class="btn-warn" (click)="deleteAclUser(user.name); $event.stopPropagation()"
                                                    [matTooltip]="strings().page?.acl?.deleteUser"
                                                    [attr.aria-label]="strings().page?.acl?.deleteUser">
                                                    <mat-icon>delete</mat-icon>
                                                </button>
                                            } @else {
                                                <button mat-flat-button class="btn-warn" (click)="deleteAclUser(user.name); $event.stopPropagation()">
                                                    <mat-icon>delete</mat-icon>
                                                    <span>{{ strings().page?.acl?.deleteUser }}</span>
                                                </button>
                                            }
                                        }
                                        @if (isXs) {
                                            <button mat-mini-fab class="btn-primary" (click)="openAclEdit(user); $event.stopPropagation()"
                                                [matTooltip]="strings().page?.acl?.editUser"
                                                [attr.aria-label]="strings().page?.acl?.editUser">
                                                <mat-icon>edit</mat-icon>
                                            </button>
                                        } @else {
                                            <button mat-flat-button class="btn-primary" (click)="openAclEdit(user); $event.stopPropagation()">
                                                <mat-icon>edit</mat-icon>
                                                <span>{{ strings().page?.acl?.editUser }}</span>
                                            </button>
                                        }
                                    }
                                </div>
                                @if (!last) { <mat-divider></mat-divider> }
                            }
                        </div>
                    }
                </div>
            </p3xr-ng-accordion>
        }

        <br />

        <!-- GUI Framework -->
        <p3xr-ng-accordion title="GUI" accordionKey="gui-framework">
            <div content>
                <div style="display: flex; justify-content: flex-end; padding: 16px;">
                    <div class="p3xr-gui-toggle">
                        <span class="p3xr-gui-toggle-active"><i class="fab fa-angular" style="color:#dd0031;margin-right:6px;font-size:16px;"></i>Angular</span>
                        <span class="p3xr-gui-toggle-item" (click)="switchToReact()"><i class="fab fa-react" style="color:#61dafb;margin-right:6px;font-size:18px;"></i>React</span>
                        <span class="p3xr-gui-toggle-item" (click)="switchToVue()"><i class="fab fa-vuejs" style="color:#42b883;margin-right:6px;font-size:18px;"></i>Vue</span>
                    </div>
                </div>
            </div>
        </p3xr-ng-accordion>

        <br />

        <!-- AI Settings -->
        <p3xr-ng-accordion [title]="strings().label?.aiSettings" accordionKey="ai-settings">
            <div actions>
                @if (!readonlyConnections && !isGroqApiKeyReadonly()) {
                    <p3xr-ng-button
                        (click)="openAiSettings($event)"
                        [label]="strings().intention?.edit"
                        mdIcon="edit">
                    </p3xr-ng-button>
                }
            </div>
            <div content>
                <mat-list>
                    <mat-list-item (click)="$event.stopPropagation()">
                        <div class="p3xr-settings-pair-row">
                            <div class="p3xr-settings-row-label">{{ strings().label?.aiEnabled }}</div>
                            <div class="p3xr-settings-row-value">
                                <mat-slide-toggle [checked]="isAiEnabled()" [disabled]="isAiReadonly()" (change)="toggleAiEnabled($event.checked)"></mat-slide-toggle>
                            </div>
                        </div>
                    </mat-list-item>
                    @if (isAiEnabled() && hasGroqApiKey()) {
                        <mat-divider></mat-divider>
                        <mat-list-item (click)="$event.stopPropagation()">
                            <div style="width: 100%;">
                                <div class="p3xr-settings-pair-row">
                                    <div class="p3xr-settings-row-label">{{ strings().label?.aiRouteViaNetwork }}</div>
                                    <div class="p3xr-settings-row-value">
                                        <mat-slide-toggle [checked]="!isUseOwnKey()" [disabled]="isAiReadonly()" (change)="toggleUseOwnKey(!$event.checked)"></mat-slide-toggle>
                                    </div>
                                </div>
                                <div class="p3xr-settings-hint">
                                    {{ isUseOwnKey() ? (strings().label?.aiRoutingDirect) : (strings().label?.aiRoutingNetwork) }}
                                    @if (!isUseOwnKey()) {
                                        <a href="https://console.groq.com" target="_blank" style="color: inherit; text-decoration: underline;">console.groq.com</a>
                                    }
                                </div>
                            </div>
                        </mat-list-item>
                        <mat-divider></mat-divider>
                        <mat-list-item>
                            <div class="p3xr-settings-pair-row">
                                <div class="p3xr-settings-row-label">{{ strings().label?.aiGroqApiKey }}</div>
                                <div class="p3xr-settings-row-value" style="font-family: monospace;">{{ state.cfg()?.groqApiKeyMasked }}</div>
                            </div>
                        </mat-list-item>
                    }
                </mat-list>
            </div>
        </p3xr-ng-accordion>

        <br />

        <!-- Desktop Notifications -->
        <p3xr-ng-accordion [title]="strings().label?.desktopNotifications" accordionKey="desktop-notifications">
            <div content>
                <mat-list>
                    <mat-list-item>
                        <div style="display: flex; width: 100%; align-items: center;">
                            <span class="p3xr-settings-label" style="flex: 1;">{{ strings().label?.desktopNotificationsEnabled }}</span>
                            <mat-slide-toggle [checked]="notificationService.isEnabled()" (change)="notificationService.setEnabled($event.checked)"></mat-slide-toggle>
                        </div>
                    </mat-list-item>
                    <mat-divider></mat-divider>
                    <mat-list-item>
                        <div style="font-size: 12px; opacity: 0.7;">{{ strings().label?.desktopNotificationsInfo }}</div>
                    </mat-list-item>
                </mat-list>
            </div>
        </p3xr-ng-accordion>

        <br />

        <!-- Tree Settings -->
        <p3xr-ng-accordion [title]="strings().form?.treeSettings?.label?.formName" accordionKey="tree-settings">
            <div actions>
                <p3xr-ng-button
                    (click)="openTreeSettings($event)"
                    [label]="strings().intention?.edit"
                    mdIcon="edit">
                </p3xr-ng-button>
            </div>
            <div content>
                <mat-list class="p3xr-tree-settings-list">
                    <mat-list-item (click)="openTreeSettings($event)">
                        <div style="display: flex; width: 100%;"><span class="p3xr-settings-label" style="flex: 1;">{{ strings().form?.treeSettings?.field?.treeSeparator }}</span>
                        <span>{{ settings.redisTreeDivider() || strings().label?.treeSeparatorEmptyNote }}</span></div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div><div style="display: flex; width: 100%;"><span class="p3xr-settings-label" style="flex: 1;">{{ strings().form?.treeSettings?.field?.page }}</span><span class="p3xr-settings-value">{{ settings.pageCount() }}</span></div>
                        <div class="p3xr-settings-hint">{{ strings().form?.treeSettings?.error?.page }}</div></div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div><div style="display: flex; width: 100%;"><span class="p3xr-settings-label" style="flex: 1;">{{ strings().form?.treeSettings?.field?.keyPageCount }}</span><span class="p3xr-settings-value">{{ settings.keyPageCount() }}</span></div>
                        <div class="p3xr-settings-hint">{{ strings().form?.treeSettings?.error?.keyPageCount }}</div></div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div><div style="display: flex; width: 100%;"><span class="p3xr-settings-label" style="flex: 1;">{{ strings().form?.treeSettings?.maxValueDisplay }}</span><span class="p3xr-settings-value">{{ settings.maxValueDisplay() }}</span></div>
                        <div class="p3xr-settings-hint">{{ strings().form?.treeSettings?.maxValueDisplayInfo }}</div></div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div><div style="display: flex; width: 100%;"><span class="p3xr-settings-label" style="flex: 1;">{{ strings().form?.treeSettings?.maxKeys }}</span><span class="p3xr-settings-value">{{ settings.maxKeys() }}</span></div>
                        <div class="p3xr-settings-hint">{{ strings().form?.treeSettings?.maxKeysInfo }}</div></div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div style="display: flex; width: 100%;"><span class="p3xr-settings-label" style="flex: 1;">{{ strings().form?.treeSettings?.field?.keysSort }}</span>
                        <span>{{ settings.keysSort() ? strings().label?.keysSort?.on : strings().label?.keysSort?.off }}</span></div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div style="display: flex; width: 100%;"><span class="p3xr-settings-label" style="flex: 1;">{{ strings().form?.treeSettings?.field?.searchMode }}</span>
                        <span>{{ settings.searchClientSide() ? strings().form?.treeSettings?.label?.searchModeClient : strings().form?.treeSettings?.label?.searchModeServer }}</span></div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div style="display: flex; width: 100%;"><span class="p3xr-settings-label" style="flex: 1;">{{ strings().form?.treeSettings?.field?.searchModeStartsWith }}</span>
                        <span>{{ settings.searchStartsWith() ? strings().form?.treeSettings?.label?.searchModeStartsWith : strings().form?.treeSettings?.label?.searchModeIncludes }}</span></div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div style="display: flex; width: 100%; font-weight: 500;">{{ settings.jsonFormat() === 2 ? strings().form?.treeSettings?.label?.jsonFormatTwoSpace : strings().form?.treeSettings?.label?.jsonFormatFourSpace }}</div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div style="display: flex; width: 100%; font-weight: 500;">{{ settings.animation() ? strings().form?.treeSettings?.label?.animation : strings().form?.treeSettings?.label?.noAnimation }}</div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div><div style="display: flex; width: 100%; font-weight: 500;">{{ settings.undoEnabled() ? (strings().form?.treeSettings?.label?.undoEnabled) : (strings().form?.treeSettings?.label?.undoDisabled) }}</div>
                        <div class="p3xr-settings-hint">{{ strings().form?.treeSettings?.undoHint }}</div></div>
                    </mat-list-item>
                    <mat-divider></mat-divider>

                    <mat-list-item (click)="openTreeSettings($event)">
                        <div style="display: flex; width: 100%; font-weight: 500;">{{ settings.showDiffBeforeSave() ? (strings().form?.treeSettings?.label?.diffEnabled) : (strings().form?.treeSettings?.label?.diffDisabled) }}</div>
                    </mat-list-item>
                </mat-list>
            </div>
        </p3xr-ng-accordion>
    `,
    styles: [`
        :host { display: block; color: var(--mat-app-text-color, inherit); }
        .p3xr-settings-hint {
            font-size: 12px;
            color: var(--mat-app-text-color, rgba(0, 0, 0, 0.54));
            opacity: 0.7;
        }
        /* GUI toggle */
        .p3xr-gui-toggle {
            display: inline-flex;
            align-items: stretch;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid var(--p3xr-border-color, rgba(0,0,0,0.12));
        }
        .p3xr-gui-toggle-active,
        .p3xr-gui-toggle-item {
            padding: 8px 12px;
            font-size: 14px;
            user-select: none;
            display: inline-flex;
            align-items: center;
        }
        .p3xr-gui-toggle-active {
            font-weight: 700;
            background-color: var(--p3xr-btn-primary-bg);
            color: var(--p3xr-btn-primary-color);
        }
        .p3xr-gui-toggle-item {
            font-weight: 500;
            cursor: pointer;
        }
        .p3xr-gui-toggle-active i[class*="fa-"] {
            text-shadow: 0 0 3px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.3);
        }
        .p3xr-gui-toggle-item:hover {
            background-color: var(--p3xr-hover-bg);
        }
        /* Wide screens: show button text, hide tooltip */
        .hide-xs { display: inline; }
        .show-xs-tooltip { display: none; }
        /* Small screens: hide text, show icon-only square buttons */
        @media (max-width: 599px) {
            .hide-xs { display: none !important; }
            /* Buttons become square icon buttons on mobile */
            .p3xr-connection-item button {
                min-width: 40px !important;
                width: 40px !important;
                height: 40px !important;
                padding: 0 !important;
                margin: 2px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            .p3xr-connection-item button mat-icon,
            .p3xr-connection-item button i {
                margin: 0 !important;
            }
        }
        /* Connection items: match production md-list-item */
        .p3xr-connection-item {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 8px 8px 16px;
            min-height: 56px;
            box-sizing: border-box;
        }
        .p3xr-connection-info { flex: 1; min-width: 0; overflow: hidden; }
        .p3xr-connection-item button { flex-shrink: 0; }
        /* Drag and drop */
        .p3xr-connection-item.cdk-drag-preview {
            box-sizing: border-box;
            border-radius: 4px;
            box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
            background: var(--mat-app-background-color, #fff);
        }
        .p3xr-connection-item.cdk-drag-placeholder { opacity: 0.3; }
        .cdk-drop-list-dragging .p3xr-connection-item:not(.cdk-drag-placeholder) {
            transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
        }
        .p3xr-connection-group-block.cdk-drag-preview {
            box-sizing: border-box;
            border-radius: 4px;
            box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
            background: var(--mat-app-background-color, #fff);
        }
        .p3xr-connection-group-block.cdk-drag-placeholder { opacity: 0.3; }
        .p3xr-group-drop-list.cdk-drop-list-dragging .p3xr-connection-group-block:not(.cdk-drag-placeholder) {
            transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
        }
        .p3xr-connection-group-header[cdkDragHandle] { cursor: grab; }
        /* Only tree settings rows are clickable/hoverable. License rows stay static like AngularJS. */
        .p3xr-tree-settings-list mat-list-item { cursor: pointer; }
        .p3xr-tree-settings-list mat-list-item:hover { background-color: var(--p3xr-hover-bg); }
        /* ACL users list: hoverable rows only when editable */
        .p3xr-acl-users-list .p3xr-acl-clickable { cursor: pointer; }
        .p3xr-acl-users-list .p3xr-acl-clickable:hover { background-color: var(--p3xr-hover-bg); }
        /* Settings list: bold label (left), normal value (right) */
        ::ng-deep .p3xr-tree-settings-list .mdc-list-item__primary-text {
            width: 100%;
        }
        ::ng-deep .p3xr-settings-label {
            font-weight: 500;
        }
        ::ng-deep .p3xr-settings-value {
            font-weight: 400;
            opacity: 0.8;
        }
    `],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SettingsComponent implements OnInit, OnDestroy {
    private static readonly UNGROUPED_GROUP_KEY = '';
    strings;
    connectionsList: any[] = [];
    groupedConnections: Array<{ name: string; connections: any[] }> = [];
    collapsedGroups: Set<string>;
    groupModeEnabled = false;

    private static readonly COLLAPSED_GROUPS_KEY = 'p3xr-collapsed-connection-groups';
    private static readonly GROUP_MODE_KEY = 'p3xr-connection-group-mode';
    isElectron = /electron/i.test(navigator.userAgent);
    isPromoDomain = window.location.hostname === 'p3x.redis.patrikx3.com';
    readonlyConnections = false;
    currentConnectionId: string | undefined;
    aclUsers: any[] | null = null;
    aclCurrentUser = '';
    aclLoading = false;
    isXs = false;
    private electronUiStorage: Record<string, string> | null = null;

    private readonly unsubs: Array<() => void> = [];

    constructor(
        @Inject(I18nService) private i18n: I18nService,
        @Inject(SettingsService) public settings: SettingsService,
        @Inject(RedisStateService) private state: RedisStateService,
        @Inject(CommonService) private common: CommonService,
        @Inject(SocketService) private socket: SocketService,
        @Inject(MainCommandService) private cmd: MainCommandService,
        @Inject(ConnectionDialogService) private connectionDialog: ConnectionDialogService,
        @Inject(TreecontrolSettingsDialogService) private treeSettingsDialog: TreecontrolSettingsDialogService,
        @Inject(AiSettingsDialogService) private aiSettingsDialog: AiSettingsDialogService,
        @Inject(AclUserDialogService) private aclUserDialog: AclUserDialogService,
        @Inject(BreakpointObserver) private breakpointObserver: BreakpointObserver,
        @Inject(ChangeDetectorRef) private cdr: ChangeDetectorRef,
        @Inject(NotificationService) public notificationService: NotificationService,
    ) {
        this.strings = this.i18n.strings;

        this.restoreGroupingState();

        this.breakpointObserver.observe('(max-width: 599px)').subscribe(result => {
            this.isXs = result.matches;
            this.cdr.markForCheck();
        });
    }

    ngOnInit(): void {
        this.refreshState();

        // Subscribe to socket events for reactive updates
        const sub1 = this.socket.connections$.subscribe(() => this.refreshState());
        const sub2 = this.socket.configuration$.subscribe(() => this.refreshState());
        const sub3 = this.socket.stateChanged$.subscribe(() => this.refreshState());
        const sub4 = this.socket.redisStatus$.subscribe(() => this.refreshState());
        this.unsubs.push(() => { sub1.unsubscribe(); sub2.unsubscribe(); sub3.unsubscribe(); sub4.unsubscribe(); });
    }

    ngOnDestroy(): void {
        this.unsubs.forEach(fn => fn());
    }

    get currentConnectionName(): string {
        const conn = this.connectionsList.find((c: any) => c.id === this.currentConnectionId);
        return conn?.name || '';
    }

    private refreshState(): void {
        this.connectionsList = this.state.connections()?.list || [];
        this.readonlyConnections = this.state.cfg()?.readonlyConnections === true;
        const prevConnId = this.currentConnectionId;
        this.currentConnectionId = this.state.connection()?.id;
        // Auto-load ACL when connection changes
        if (this.currentConnectionId && this.currentConnectionId !== prevConnId) {
            this.loadAclUsers();
        } else if (!this.currentConnectionId && prevConnId) {
            this.aclUsers = null;
            this.aclCurrentUser = '';
        }
        this.buildGroupedConnections();
        this.cdr.detectChanges();
    }

    toggleGroupMode(): void {
        this.groupModeEnabled = !this.groupModeEnabled;
        this.setPersistentItem(SettingsComponent.GROUP_MODE_KEY, String(this.groupModeEnabled));
    }

    toggleGroup(name: string): void {
        if (this.collapsedGroups.has(name)) {
            this.collapsedGroups.delete(name);
        } else {
            this.collapsedGroups.add(name);
        }
        this.setPersistentItem(SettingsComponent.COLLAPSED_GROUPS_KEY, JSON.stringify([...this.collapsedGroups]));
    }

    private restoreGroupingState(): void {
        this.groupModeEnabled = this.getPersistentItem(SettingsComponent.GROUP_MODE_KEY) === 'true';
        // Sync bootstrap value to localStorage so React can read it (shared origin in Electron)
        this.setPersistentItem(SettingsComponent.GROUP_MODE_KEY, String(this.groupModeEnabled));
        try {
            const stored = this.getPersistentItem(SettingsComponent.COLLAPSED_GROUPS_KEY);
            this.collapsedGroups = stored
                ? new Set(JSON.parse(stored).map((name: string) => this.normalizeCollapsedGroupName(name)))
                : new Set();
        } catch {
            this.collapsedGroups = new Set();
        }
    }

    private getPersistentItem(key: string): string | null {
        const value = this.getElectronUiStorage()[key];
        if (typeof value === 'string') {
            return value;
        }

        try {
            return localStorage.getItem(key);
        } catch {
            return null;
        }
    }

    private setPersistentItem(key: string, value: string): void {
        try {
            localStorage.setItem(key, value);
        } catch { /* ignore */ }

        const storage = this.getElectronUiStorage();
        storage[key] = value;
        this.electronUiStorage = storage;

        try {
            if (window.parent && window.parent !== window) {
                window.parent.postMessage({ type: 'p3x-ui-storage-set', key, value }, '*');
            }
        } catch { /* ignore */ }
    }

    private getElectronUiStorage(): Record<string, string> {
        if (this.electronUiStorage !== null) {
            return this.electronUiStorage;
        }

        // Read from __p3xr_electron_bootstrap which was captured in main.js
        // BEFORE Angular's router stripped the query params.
        let storage: Record<string, string> = {};
        try {
            const bootstrap = (globalThis as any).__p3xr_electron_bootstrap;
            if (bootstrap && typeof bootstrap === 'object' && !Array.isArray(bootstrap)) {
                storage = this.normalizeElectronUiStorage(bootstrap);
            }
        } catch {
            storage = {};
        }

        this.electronUiStorage = storage;
        return storage;
    }

    private normalizeElectronUiStorage(value: unknown): Record<string, string> {
        if (!value || typeof value !== 'object' || Array.isArray(value)) {
            return {};
        }

        return Object.entries(value).reduce((result: Record<string, string>, [key, entryValue]) => {
            if (typeof entryValue === 'string') {
                result[key] = entryValue;
            }
            return result;
        }, {});
    }

    getGroupDisplayName(name: string): string {
        return name === SettingsComponent.UNGROUPED_GROUP_KEY
            ? this.getUngroupedLabel()
            : name;
    }

    private getUngroupedLabel(): string {
        return this.strings().label?.ungrouped;
    }

    private normalizeCollapsedGroupName(name: unknown): string {
        if (typeof name !== 'string') {
            return '';
        }

        return this.isLegacyUngroupedGroupName(name)
            ? SettingsComponent.UNGROUPED_GROUP_KEY
            : name;
    }

    private isLegacyUngroupedGroupName(name: string): boolean {
        return name === 'Ungrouped' || name === this.getUngroupedLabel();
    }

    private buildGroupedConnections(): void {
        // Use a Map to preserve the order groups first appear in the connections list.
        // This respects the server-persisted order (including after drag reorder).
        const groups = new Map<string, any[]>();
        for (const conn of this.connectionsList) {
            const groupName = conn.group?.trim() || SettingsComponent.UNGROUPED_GROUP_KEY;
            if (!groups.has(groupName)) {
                groups.set(groupName, []);
            }
            groups.get(groupName)!.push(conn);
        }
        const result: Array<{ name: string; connections: any[] }> = [];
        for (const [name, connections] of groups) {
            result.push({ name, connections });
        }
        this.groupedConnections = result;
    }

    // Predicates prevent items from entering the wrong drop list level
    groupDropPredicate = (drag: any) => drag.data && 'connections' in drag.data;
    connectionDropPredicate = (drag: any) => drag.data && !('connections' in drag.data);

    async dropGroup(event: CdkDragDrop<any[]>): Promise<void> {
        if (event.previousIndex === event.currentIndex) return;
        moveItemInArray(this.groupedConnections, event.previousIndex, event.currentIndex);
        // Rebuild flat list in new group order and persist
        const allIds: string[] = [];
        for (const group of this.groupedConnections) {
            for (const conn of group.connections) {
                allIds.push(conn.id);
            }
        }
        try {
            await this.socket.request({
                action: 'connection/reorder',
                payload: { ids: allIds },
            });
        } catch (e) {
            this.common.generalHandleError(e);
            this.refreshState();
        }
    }

    async dropConnection(event: CdkDragDrop<any[]>, groupName: string): Promise<void> {
        if (event.previousIndex === event.currentIndex) return;
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        // Persist the new order to the server
        try {
            const reorderedIds = event.container.data.map((c: any) => c.id);
            await this.socket.request({
                action: 'connection/reorder',
                payload: { group: groupName || undefined, ids: reorderedIds },
            });
        } catch (e) {
            this.common.generalHandleError(e);
            this.refreshState();
        }
    }

    async dropUngroupedConnection(event: CdkDragDrop<any[]>): Promise<void> {
        if (event.previousIndex === event.currentIndex) return;
        moveItemInArray(this.connectionsList, event.previousIndex, event.currentIndex);
        try {
            const reorderedIds = this.connectionsList.map((c: any) => c.id);
            await this.socket.request({
                action: 'connection/reorder',
                payload: { ids: reorderedIds },
            });
        } catch (e) {
            this.common.generalHandleError(e);
            this.refreshState();
        }
    }

    // --- Connections ---

    connectionForm(type: string, model?: any): void {
        this.connectionDialog.show({ type: type as any, model, $event: undefined });
    }

    async connect(connection: any): Promise<void> {
        this.cmd.connectRequest$.next({ connection, disableState: true });
    }

    async disconnect(): Promise<void> {
        await this.cmd.disconnect();
        this.refreshState();
    }

    async deleteConnection(connection: any, $event: any): Promise<void> {
        try {
            await this.common.confirm({
                event: $event,
                message: this.strings().confirm?.deleteConnectionText,
            });
            await this.socket.request({
                action: 'connection/delete',
                payload: { id: connection.id },
            });
            this.common.toast(this.strings().status?.deleted);
        } catch (e) {
            if (e !== undefined) {
                this.common.generalHandleError(e);
            }
        }
    }

    getConnectionClients(connection: any): { key: string; clients: number }[] {
        const redisConnections = this.state.redisConnections() || {};
        const results: { key: string; clients: number }[] = [];
        for (const key of Object.keys(redisConnections)) {
            if (redisConnections[key].connection?.name === connection.name) {
                results.push({ key, clients: redisConnections[key].clients?.length || 0 });
            }
        }
        return results;
    }

    // --- AI Settings ---

    isAiEnabled(): boolean {
        return this.state.cfg()?.aiEnabled !== false;
    }

    async toggleAiEnabled(enabled: boolean): Promise<void> {
        try {
            await this.socket.request({
                action: 'ai/set-groq-api-key',
                payload: {
                    aiEnabled: enabled,
                },
            });
            const cfg = { ...this.state.cfg(), aiEnabled: enabled };
            this.state.cfg.set(cfg);
            this.cdr.markForCheck();
        } catch (e) {
            this.common.generalHandleError(e);
        }
    }

    hasGroqApiKey(): boolean {
        return this.state.cfg()?.hasGroqApiKey === true;
    }

    isUseOwnKey(): boolean {
        return this.state.cfg()?.aiUseOwnKey === true && this.hasGroqApiKey();
    }

    async toggleUseOwnKey(useOwn: boolean): Promise<void> {
        if (useOwn && !this.hasGroqApiKey()) {
            return;
        }
        try {
            await this.socket.request({
                action: 'ai/set-groq-api-key',
                payload: {
                    aiEnabled: this.state.cfg()?.aiEnabled !== false,
                    aiUseOwnKey: useOwn,
                },
            });
            const cfg = { ...this.state.cfg(), aiUseOwnKey: useOwn };
            this.state.cfg.set(cfg);
            this.cdr.markForCheck();
        } catch (e) {
            this.common.generalHandleError(e);
        }
    }

    isAiReadonly(): boolean {
        return this.readonlyConnections || this.state.cfg()?.groqApiKeyReadonly === true;
    }

    isGroqApiKeyReadonly(): boolean {
        return this.state.cfg()?.groqApiKeyReadonly === true;
    }

    async openAiSettings($event: any): Promise<void> {
        await this.aiSettingsDialog.show();
        this.cdr.markForCheck();
    }

    // --- Tree Settings ---

    openTreeSettings($event: any): void {
        this.treeSettingsDialog.show({ $event });
    }

    // --- ACL Management ---

    async loadAclUsers(): Promise<void> {
        this.aclLoading = true;
        this.cdr.markForCheck();
        try {
            const resp = await this.socket.request({ action: 'acl/list' });
            this.aclUsers = resp.data.users;
            this.aclCurrentUser = resp.data.currentUser;
        } catch {
            this.aclUsers = null;
        }
        this.aclLoading = false;
        this.cdr.markForCheck();
    }

    async deleteAclUser(username: string): Promise<void> {
        try {
            const msg = (this.strings().page?.acl?.confirmDelete) + ` "${username}"?`;
            await this.common.confirm({ message: msg });
            await this.socket.request({ action: 'acl/del-user', payload: { username } });
            this.common.toast({ message: this.strings().page?.acl?.userDeleted });
            this.loadAclUsers();
        } catch {}
    }

    async openAclCreate(): Promise<void> {
        const result = await this.aclUserDialog.show({
            username: '',
            rules: 'on >password +@all ~* &*',
            isNew: true,
        });
        if (result) {
            try {
                await this.socket.request({ action: 'acl/set-user', payload: { username: result.username, rules: result.rules } });
                this.common.toast({ message: this.strings().page?.acl?.userSaved });
                this.loadAclUsers();
            } catch (e) {
                this.common.generalHandleError(e);
            }
        }
    }

    async openAclEdit(user: any): Promise<void> {
        const parts = user.raw.split(' ');
        const result = await this.aclUserDialog.show({
            username: user.name,
            rules: parts.slice(2).join(' '),
            isNew: false,
        });
        if (result) {
            try {
                await this.socket.request({ action: 'acl/set-user', payload: { username: result.username, rules: result.rules } });
                this.common.toast({ message: this.strings().page?.acl?.userSaved });
                this.loadAclUsers();
            } catch (e) {
                this.common.generalHandleError(e);
            }
        }
    }

    // --- GUI Framework Switch ---

    switchToReact(): void {
        switchGui('react');
    }

    switchToVue(): void {
        switchGui('vue');
    }
}