import { Component, Inject, ChangeDetectorRef } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule, MatChipInputEvent } from '@angular/material/chips';
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { BreakpointObserver } from '@angular/cdk/layout';
import { I18nService } from '../services/i18n.service';
import { CommonService } from '../services/common.service';
import { DialogCancelButtonComponent } from '../components/dialog-cancel-button.component';

export interface AclUserDialogData {
    username: string;
    rules: string;
    isNew: boolean;
}

export interface AclUserDialogResult {
    username: string;
    rules: string[];
}

@Component({
    selector: 'p3xr-acl-user-dialog',
    standalone: true,
    imports: [
        FormsModule, MatDialogModule, MatFormFieldModule, MatInputModule,
        MatButtonModule, MatIconModule, MatToolbarModule, MatTooltipModule,
        MatSlideToggleModule, MatCheckboxModule, MatChipsModule, MatAutocompleteModule,
        DialogCancelButtonComponent,
    ],
    template: `
        <mat-toolbar class="p3xr-dialog-toolbar p3xr-mat-layout-strong">
            <span mat-dialog-title class="p3xr-dialog-title">
                {{ data.isNew ? (strings().page?.acl?.createUser) : (strings().page?.acl?.editUser) }}
            </span>
            <button mat-icon-button type="button" (click)="onCancel()">
                <mat-icon>close</mat-icon>
            </button>
        </mat-toolbar>

        <mat-dialog-content class="p3xr-dialog-content">
            <mat-form-field class="md-block">
                <mat-label>{{ strings().page?.acl?.username }}</mat-label>
                <input matInput [(ngModel)]="username" [disabled]="!data.isNew" />
            </mat-form-field>

            @if (username === 'default') {
                <div class="p3xr-acl-default-warning">
                    <mat-icon>info</mat-icon>
                    <span>{{ strings().page?.acl?.defaultUserWarning }}</span>
                </div>
            }

            <div style="margin-bottom: 16px;">
                <mat-slide-toggle [(ngModel)]="enabled">
                    {{ strings().page?.acl?.enabled }}
                </mat-slide-toggle>
            </div>

            <div style="margin-bottom: 12px;">
                <mat-checkbox [(ngModel)]="nopass">
                    {{ strings().page?.acl?.noPassword }}
                </mat-checkbox>
            </div>

            @if (!nopass) {
                <mat-form-field class="md-block">
                    <mat-label>{{ strings().page?.acl?.password }}</mat-label>
                    <input matInput [(ngModel)]="password" type="password" autocomplete="new-password" />
                    @if (!data.isNew) {
                        <mat-hint>{{ strings().page?.acl?.passwordHint }}</mat-hint>
                    }
                </mat-form-field>
            }

            <mat-form-field class="md-block">
                <mat-label>{{ strings().page?.acl?.commands }}</mat-label>
                <mat-chip-grid #cmdGrid>
                    @for (rule of commandsList; track rule) {
                        <mat-chip-row (removed)="removeChip(commandsList, rule)"
                            [highlighted]="true"
                            [class.p3xr-chip-deny]="rule.startsWith('-')">
                            {{ rule }}
                            <button matChipRemove><mat-icon>cancel</mat-icon></button>
                        </mat-chip-row>
                    }
                </mat-chip-grid>
                <input matInput [matChipInputFor]="cmdGrid"
                    [matChipInputSeparatorKeyCodes]="separatorKeys"
                    (matChipInputTokenEnd)="addChip(commandsList, $event)"
                    [matAutocomplete]="cmdAuto"
                    (input)="filterOptions('cmd', $event)"
                    (focus)="filterOptions('cmd', null)"
                    #cmdInput
                    placeholder="+@all, -@dangerous, +get ..." />
                <mat-autocomplete #cmdAuto="matAutocomplete"
                    (optionSelected)="selectAutocomplete(commandsList, $event, cmdInput)">
                    @for (group of filteredCmdGroups; track group.name) {
                        <mat-optgroup [label]="group.name">
                            @for (opt of group.options; track opt) {
                                <mat-option [value]="opt">{{ opt }}</mat-option>
                            }
                        </mat-optgroup>
                    }
                </mat-autocomplete>
                <mat-hint>{{ strings().page?.acl?.commandsHint }}</mat-hint>
            </mat-form-field>

            <mat-form-field class="md-block">
                <mat-label>{{ strings().page?.acl?.keys }}</mat-label>
                <mat-chip-grid #keyGrid>
                    @for (pattern of keysList; track pattern) {
                        <mat-chip-row (removed)="removeChip(keysList, pattern)"
                            [highlighted]="true">
                            {{ pattern }}
                            <button matChipRemove><mat-icon>cancel</mat-icon></button>
                        </mat-chip-row>
                    }
                </mat-chip-grid>
                <input matInput [matChipInputFor]="keyGrid"
                    [matChipInputSeparatorKeyCodes]="separatorKeys"
                    (matChipInputTokenEnd)="addChip(keysList, $event)"
                    [matAutocomplete]="keyAuto"
                    (input)="filterOptions('key', $event)"
                    (focus)="filterOptions('key', null)"
                    #keyInput
                    placeholder="~*, ~user:* ..." />
                <mat-autocomplete #keyAuto="matAutocomplete"
                    (optionSelected)="selectAutocomplete(keysList, $event, keyInput)">
                    @for (opt of filteredKeyOptions; track opt) {
                        <mat-option [value]="opt">{{ opt }}</mat-option>
                    }
                </mat-autocomplete>
                <mat-hint>{{ strings().page?.acl?.keysHint }}</mat-hint>
            </mat-form-field>

            <mat-form-field class="md-block">
                <mat-label>{{ strings().page?.acl?.channels }}</mat-label>
                <mat-chip-grid #chanGrid>
                    @for (pattern of channelsList; track pattern) {
                        <mat-chip-row (removed)="removeChip(channelsList, pattern)"
                            [highlighted]="true">
                            {{ pattern }}
                            <button matChipRemove><mat-icon>cancel</mat-icon></button>
                        </mat-chip-row>
                    }
                </mat-chip-grid>
                <input matInput [matChipInputFor]="chanGrid"
                    [matChipInputSeparatorKeyCodes]="separatorKeys"
                    (matChipInputTokenEnd)="addChip(channelsList, $event)"
                    [matAutocomplete]="chanAuto"
                    (input)="filterOptions('chan', $event)"
                    (focus)="filterOptions('chan', null)"
                    #chanInput
                    placeholder="&*, &notifications:* ..." />
                <mat-autocomplete #chanAuto="matAutocomplete"
                    (optionSelected)="selectAutocomplete(channelsList, $event, chanInput)">
                    @for (opt of filteredChanOptions; track opt) {
                        <mat-option [value]="opt">{{ opt }}</mat-option>
                    }
                </mat-autocomplete>
                <mat-hint>{{ strings().page?.acl?.channelsHint }}</mat-hint>
            </mat-form-field>
        </mat-dialog-content>

        <mat-dialog-actions class="p3xr-dialog-actions">
            <p3xr-dialog-cancel (cancel)="onCancel()"></p3xr-dialog-cancel>
            <button mat-raised-button class="btn-primary" type="button" (click)="onSave()"
                [disabled]="!username?.trim()"
                [matTooltip]="strings().intention?.save" [matTooltipDisabled]="isWide">
                <mat-icon>done</mat-icon>
                @if (isWide) { <span>{{ strings().intention?.save }}</span> }
            </button>
        </mat-dialog-actions>
    `,
    styles: [`
        .md-block { width: 100%; }
        .p3xr-acl-default-warning {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 12px;
            margin-bottom: 16px;
            border-radius: 4px;
            background-color: var(--p3xr-btn-warn-bg);
            color: var(--p3xr-btn-warn-color);
            font-size: 13px;
            line-height: 1.4;
        }
        .p3xr-acl-default-warning mat-icon {
            flex-shrink: 0;
        }
        mat-chip-row {
            font-size: 13px;
            --mdc-chip-elevated-container-color: var(--p3xr-btn-primary-bg) !important;
            --mdc-chip-label-text-color: var(--p3xr-btn-primary-color) !important;
            --mat-chip-elevated-selected-container-color: var(--p3xr-btn-primary-bg) !important;
            --mat-chip-selected-label-text-color: var(--p3xr-btn-primary-color) !important;
            --mat-chip-selected-trailing-icon-color: var(--p3xr-btn-primary-color) !important;
        }
        .p3xr-chip-deny {
            --mdc-chip-elevated-container-color: var(--p3xr-btn-warn-bg) !important;
            --mdc-chip-label-text-color: var(--p3xr-btn-warn-color) !important;
            --mat-chip-elevated-selected-container-color: var(--p3xr-btn-warn-bg) !important;
            --mat-chip-selected-label-text-color: var(--p3xr-btn-warn-color) !important;
            --mat-chip-selected-trailing-icon-color: var(--p3xr-btn-warn-color) !important;
        }
    `],
})
export class AclUserDialogComponent {
    strings;
    username: string;
    enabled = true;
    nopass = false;
    password = '';
    commandsList: string[] = [];
    keysList: string[] = [];
    channelsList: string[] = [];
    isWide = true;
    readonly separatorKeys = [ENTER, COMMA, SPACE];

    private readonly cmdGroupDefs = [
        { key: 'groupCommon', options: ['+@all', '-@all', '+@read', '-@read', '+@write', '-@write', '+@admin', '-@admin', '+@dangerous', '-@dangerous'] },
        { key: 'groupDataTypes', options: ['+@string', '+@hash', '+@list', '+@set', '+@sortedset', '+@stream', '+@geo', '+@bitmap', '+@hyperloglog'] },
        { key: 'groupOperations', options: ['+@keyspace', '+@pubsub', '+@connection', '+@transaction', '+@scripting', '+@fast', '+@slow', '+@blocking'] },
    ];
    private readonly allKeyOptions = ['~*', '%R~*', '%W~*', 'resetkeys'];
    private readonly allChanOptions = ['&*', 'resetchannels'];

    filteredCmdGroups: { name: string; options: string[] }[] = [];
    filteredKeyOptions: string[] = [];
    filteredChanOptions: string[] = [];

    constructor(
        @Inject(MAT_DIALOG_DATA) public data: AclUserDialogData,
        @Inject(MatDialogRef) private dialogRef: MatDialogRef<AclUserDialogComponent>,
        @Inject(BreakpointObserver) private breakpointObserver: BreakpointObserver,
        @Inject(I18nService) private i18n: I18nService,
        @Inject(CommonService) private common: CommonService,
        @Inject(ChangeDetectorRef) private cdr: ChangeDetectorRef,
    ) {
        this.strings = this.i18n.strings;
        this.username = data.username;
        this.parseRules(data.rules);
        this.breakpointObserver.observe('(min-width: 600px)').subscribe(r => {
            this.isWide = r.matches;
            this.cdr.markForCheck();
        });
    }

    filterOptions(type: 'cmd' | 'key' | 'chan', event: Event | null): void {
        const filter = event ? (event.target as HTMLInputElement).value.toLowerCase() : '';
        if (type === 'cmd') {
            const acl = this.strings()?.page?.acl || {} as any;
            this.filteredCmdGroups = this.cmdGroupDefs
                .map(g => ({ name: acl[g.key] || g.key, options: g.options.filter(o => !this.commandsList.includes(o) && o.toLowerCase().includes(filter)) }))
                .filter(g => g.options.length > 0);
        } else if (type === 'key') {
            this.filteredKeyOptions = this.allKeyOptions.filter(o => !this.keysList.includes(o) && o.toLowerCase().includes(filter));
        } else {
            this.filteredChanOptions = this.allChanOptions.filter(o => !this.channelsList.includes(o) && o.toLowerCase().includes(filter));
        }
    }

    selectAutocomplete(list: string[], event: MatAutocompleteSelectedEvent, input: HTMLInputElement): void {
        const value = event.option.viewValue;
        if (value && !list.includes(value)) list.push(value);
        input.value = '';
        this.filterOptions(list === this.commandsList ? 'cmd' : list === this.keysList ? 'key' : 'chan', null);
    }

    addChip(list: string[], event: MatChipInputEvent): void {
        const value = (event.value || '').trim();
        if (value && !list.includes(value)) list.push(value);
        event.chipInput!.clear();
    }

    removeChip(list: string[], value: string): void {
        const idx = list.indexOf(value);
        if (idx >= 0) list.splice(idx, 1);
    }

    private parseRules(rules: string): void {
        const tokens = rules.trim().split(/\s+/).filter(Boolean);
        for (const t of tokens) {
            if (t === 'on') this.enabled = true;
            else if (t === 'off') this.enabled = false;
            else if (t === 'nopass') this.nopass = true;
            else if (t.startsWith('>') || t.startsWith('<') || t.startsWith('#') || t === 'resetpass' || t === 'sanitize-payload' || t === 'skip-sanitize-payload') continue;
            else if (t.startsWith('+') || t.startsWith('-') || t === 'allcommands' || t === 'nocommands') this.commandsList.push(t);
            else if (t.startsWith('~') || t.startsWith('%') || t === 'allkeys' || t === 'resetkeys') this.keysList.push(t);
            else if (t.startsWith('&') || t === 'allchannels' || t === 'resetchannels') this.channelsList.push(t);
        }
    }

    async onSave(): Promise<void> {
        const u = this.username?.trim();
        if (!u) return;
        try {
            await this.common.confirm({ message: this.strings().intention?.areYouSure });
        } catch { return; }
        const rules: string[] = [this.enabled ? 'on' : 'off'];
        // When editing, reset permissions first so removals take effect
        if (!this.data.isNew) {
            rules.push('nocommands', 'resetkeys', 'resetchannels');
            if (this.nopass) rules.push('resetpass', 'nopass');
            else if (this.password.trim()) rules.push('resetpass', '>' + this.password.trim());
            // No password change → existing passwords preserved (no resetpass sent)
        } else {
            if (this.nopass) rules.push('nopass');
            else if (this.password.trim()) rules.push('>' + this.password.trim());
        }
        rules.push(...this.commandsList, ...this.keysList, ...this.channelsList);
        this.dialogRef.close({ username: u, rules } as AclUserDialogResult);
    }

    onCancel(): void {
        this.dialogRef.close(undefined);
    }
}