import { Component, DestroyRef, computed, inject, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ActivatedRoute } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTableModule } from '@angular/material/table';
import { FEATURES } from '../core/models';
import { PortalApiService } from '../core/portal-api.service';
import { RealtimeService } from '../core/realtime.service';
import { SessionService } from '../core/session.service';

@Component({
  selector: 'app-feature-page',
  imports: [MatButtonModule, MatCardModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatProgressSpinnerModule, MatTableModule],
  template: `
    <header>
      <div><h1>{{ feature().title }}</h1><p>Manage {{ feature().title.toLowerCase() }}</p></div>
      <div class="toolbar">
        <mat-form-field subscriptSizing="dynamic"><mat-label>Filter</mat-label><input matInput (input)="filter.set($any($event.target).value)"><mat-icon matSuffix>search</mat-icon></mat-form-field>
        @if (feature().path === 'syslogs' && session.hasPermission('PURGE_LOGS')) { <button mat-flat-button (click)="purgeLogs()"><mat-icon>delete_sweep</mat-icon>Purge</button> }
        @if (canSave()) { <button mat-flat-button (click)="edit()"><mat-icon>add</mat-icon>Add</button> }
        <button mat-button (click)="load()"><mat-icon>refresh</mat-icon>Refresh</button>
      </div>
    </header>
    @if (loading()) { <mat-spinner diameter="42" /> }
    @else if (error()) { <mat-card class="error">{{ error() }}</mat-card> }
    @else if (rows().length === 0) { <mat-card class="empty">No records found.</mat-card> }
    @else {
      <mat-card><div class="table-container"><table mat-table [dataSource]="displayedRows()">
        @for (column of dataColumns(); track column) {
          <ng-container [matColumnDef]="column"><th mat-header-cell *matHeaderCellDef>{{ label(column) }}</th><td mat-cell *matCellDef="let row">{{ display(row[column]) }}</td></ng-container>
        }
        @if (hasActions()) {
          <ng-container matColumnDef="actions"><th mat-header-cell *matHeaderCellDef>Actions</th><td mat-cell *matCellDef="let row">
            @if (canSave()) { <button mat-icon-button aria-label="Edit" (click)="edit(row)"><mat-icon>edit</mat-icon></button> }
            @if (feature().path === 'scripts' && (session.hasPermission('VIEW_SCRIPT_SCHED_STATUS') || session.hasPermission('DELETE_SCRIPT_SCHED_STATUS'))) { <button mat-icon-button aria-label="Schedules and run status" (click)="openScriptStatus(row)"><mat-icon>schedule</mat-icon></button> }
            @if (canExecute()) { <button mat-icon-button [attr.aria-label]="feature().path === 'scripts' ? 'Run' : 'Pull'" (click)="execute(row)"><mat-icon>{{ feature().path === 'scripts' ? 'play_arrow' : 'sync' }}</mat-icon></button> }
            @if (canDelete()) { <button mat-icon-button aria-label="Delete" (click)="remove(row)"><mat-icon>delete</mat-icon></button> }
          </td></ng-container>
        }
        <tr mat-header-row *matHeaderRowDef="columns()"></tr><tr mat-row *matRowDef="let row; columns: columns()"></tr>
      </table></div></mat-card>
    }`,
  styles: [`header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}h1{margin:0}p{color:#607d8b}.toolbar{display:flex;gap:.5rem}.table-container{overflow:auto}table{width:100%}.error{color:#b00020;padding:1rem}.empty{padding:2rem;text-align:center}`]
})
export class FeaturePageComponent {
  private readonly route = inject(ActivatedRoute);
  private readonly api = inject(PortalApiService);
  private readonly realtime = inject(RealtimeService);
  readonly session = inject(SessionService);
  private readonly dialog = inject(MatDialog);
  private readonly destroyRef = inject(DestroyRef);
  readonly loading = signal(true);
  readonly error = signal('');
  readonly rows = signal<Record<string, unknown>[]>([]);
  readonly filter = signal('');
  readonly displayedRows = computed(() => { const term=this.filter().trim().toLowerCase(); return term ? this.rows().filter(row=>Object.values(row).some(value=>String(value??'').toLowerCase().includes(term))) : this.rows(); });
  readonly feature = computed(() => FEATURES.find(feature => feature.path === this.route.snapshot.data['feature'])!);
  readonly dataColumns = computed(() => Object.keys(this.rows()[0] ?? {}).filter(key => typeof this.rows()[0]?.[key] !== 'object').slice(0, 8));
  readonly columns = computed(() => this.hasActions() ? [...this.dataColumns(), 'actions'] : this.dataColumns());

  constructor() { this.load(); this.realtime.triggers.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.load()); }
  hasActions(): boolean { return this.canSave() || this.canDelete() || this.canExecute() || (this.feature().path === 'scripts' && (this.session.hasPermission('VIEW_SCRIPT_SCHED_STATUS') || this.session.hasPermission('DELETE_SCRIPT_SCHED_STATUS'))); }
  canSave(): boolean { return !!this.feature().editor && !!this.feature().saveEndpoint && this.session.hasPermission(this.feature().savePermission!); }
  canDelete(): boolean { return !!this.feature().deleteEndpoint && this.session.hasPermission(this.feature().deletePermission!); }
  canExecute(): boolean { return !!this.feature().executeEndpoint && this.session.hasPermission(this.feature().executePermission!); }

  load(): void {
    this.loading.set(true); this.error.set('');
    this.api.request<unknown>(this.feature().loadEndpoint).subscribe({
      next: data => { this.rows.set(Array.isArray(data) ? data : (data ? [data as Record<string, unknown>] : [])); this.loading.set(false); },
      error: error => { this.error.set(error.message); this.loading.set(false); }
    });
  }

  async edit(row?: Record<string, unknown>): Promise<void> {
    const config = { data: { feature: this.feature(), row }, disableClose: true, width: 'min(52rem, 95vw)' };
    if (this.feature().editor === 'environment') {
      const { EnvironmentDialogComponent } = await import('./environment-dialog');
      this.dialog.open(EnvironmentDialogComponent, config).afterClosed().subscribe(saved => { if (saved) this.load(); });
    } else if (this.feature().editor === 'permission') {
      const { PermissionDialogComponent } = await import('./permission-dialog');
      this.dialog.open(PermissionDialogComponent, config).afterClosed().subscribe(saved => { if (saved) this.load(); });
    } else if (this.feature().editor === 'script') {
      const { ScriptDialogComponent } = await import('./script-dialog');
      this.dialog.open(ScriptDialogComponent, config).afterClosed().subscribe(saved => { if (saved) this.load(); });
    } else {
      const { EntityDialogComponent } = await import('./entity-dialog');
      this.dialog.open(EntityDialogComponent, config).afterClosed().subscribe(saved => { if (saved) this.load(); });
    }
  }
  remove(row: Record<string, unknown>): void { if (confirm(`Delete this ${this.feature().title} record?`)) this.api.request(this.feature().deleteEndpoint!, this.feature().editor === 'environment' ? [row] : row).subscribe({ next: () => this.load(), error: error => this.error.set(error.message) }); }
  execute(row: Record<string, unknown>): void { const verb=this.feature().path==='scripts'?'run':'pull';if(!confirm(`Are you sure you want to ${verb} ${String(row['name']??'this item')}?`))return;this.api.request(this.feature().executeEndpoint!, row).subscribe({ next: () => this.load(), error: error => this.error.set(error.message) }); }
  async purgeLogs(): Promise<void> { const {PurgeLogsDialogComponent}=await import('./purge-logs-dialog');this.dialog.open(PurgeLogsDialogComponent,{disableClose:true}).afterClosed().subscribe(count=>{if(count!==undefined)this.load();}); }
  async openScriptStatus(row:Record<string,unknown>):Promise<void>{const {ScriptStatusDialogComponent}=await import('./script-status-dialog');this.dialog.open(ScriptStatusDialogComponent,{data:{script:row},width:'min(70rem,96vw)'}).afterClosed().subscribe(()=>this.load());}
  label(value: string): string { return value.replace(/([A-Z])/g, ' $1').replace(/^./, character => character.toUpperCase()); }
  display(value: unknown): string { return value == null ? '' : String(value); }
}