reactive-mail-server/frontend/src/app/ui/overlays.component.ts

import { ChangeDetectionStrategy, Component, ElementRef, effect, inject, signal, viewChild } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { DialogService } from './dialog.service';
import { ToastService } from './toast.service';

/** Toasts and the dialog — placed once in the app root. */
@Component({
  selector: 'app-overlays',
  imports: [A11yModule, FormsModule, MatIconModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="fixed bottom-4 right-4 z-[60] flex flex-col gap-2 w-[min(380px,calc(100vw-2rem))]">
      @for (toast of toasts.toasts(); track toast.id) {
        <div class="glass-panel static px-4 py-3 flex items-start gap-3 text-sm font-rajdhani"
             [class.border-pink-500]="toast.kind === 'error'" role="status">
          <mat-icon [class]="toast.kind === 'error' ? 'text-pink-400' : 'text-emerald-400'">
            {{ toast.kind === 'error' ? 'error' : 'check_circle' }}
          </mat-icon>
          <span class="flex-grow text-slate-200">{{ toast.text }}</span>
          <button type="button" class="text-slate-400 hover:text-pink-400" aria-label="Dismiss" (click)="toasts.dismiss(toast.id)">
            <mat-icon class="!text-lg">close</mat-icon>
          </button>
        </div>
      }
    </div>

    @if (dialogs.current(); as d) {
      <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md"
           (click)="cancel()" (keydown.escape)="cancel()">
        <div class="glass-panel static max-w-lg w-full p-6 relative border-2 !border-cyan-400 shadow-[0_0_50px_rgba(0,240,255,0.4)]"
             role="dialog" aria-modal="true" aria-labelledby="dialog-title" cdkTrapFocus [cdkTrapFocusAutoCapture]="true"
             (click)="$event.stopPropagation()">
          <button type="button" (click)="cancel()" aria-label="Close dialog"
                  class="absolute top-4 right-4 text-slate-400 hover:text-pink-400 rounded-lg p-1">
            <mat-icon>close</mat-icon>
          </button>
          <div class="flex items-center gap-3 mb-4">
            <div class="w-10 h-10 rounded-full flex items-center justify-center border"
                 [class]="d.danger ? 'bg-pink-500/20 border-pink-500 text-pink-400' : 'bg-cyan-500/15 border-cyan-400 text-cyan-300'">
              <mat-icon>{{ d.danger ? 'warning' : d.input !== undefined ? 'edit' : 'help' }}</mat-icon>
            </div>
            <h3 id="dialog-title" class="text-lg font-orbitron font-bold text-slate-100 pr-8">{{ d.title }}</h3>
          </div>
          @if (d.message) {
            <p class="font-rajdhani text-slate-300 mb-4 whitespace-pre-line">{{ d.message }}</p>
          }
          <form (ngSubmit)="confirm()">
            @if (d.input !== undefined) {
              <label class="synth-label" for="dialog-input">{{ d.inputLabel }}</label>
              <input #input id="dialog-input" name="value" class="synth-input mb-5" [(ngModel)]="value" autocomplete="off">
            }
            <div class="flex justify-end gap-3">
              <button type="button" (click)="cancel()" class="px-4 py-2 rounded-lg text-xs font-mono text-slate-400 hover:text-slate-200">
                CANCEL [ESC]
              </button>
              <button type="submit" class="cyber-btn px-5 py-2 rounded-lg text-xs font-bold"
                      [class.!border-pink-500]="d.danger" [disabled]="d.required && !value().trim()">
                {{ d.confirmLabel || 'Confirm' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    }
  `
})
export class OverlaysComponent {
  readonly toasts = inject(ToastService);
  readonly dialogs = inject(DialogService);
  readonly value = signal('');
  private input = viewChild<ElementRef<HTMLInputElement>>('input');

  constructor() {
    effect(() => {
      const d = this.dialogs.current();
      this.value.set(d?.input ?? '');
    });
    effect(() => {
      const el = this.input()?.nativeElement;
      if (el) setTimeout(() => el.select());
    });
  }

  confirm(): void {
    const d = this.dialogs.current();
    if (!d || (d.required && !this.value().trim())) return;
    d.resolve(d.input !== undefined ? this.value().trim() : '');
  }

  cancel(): void { this.dialogs.current()?.resolve(null); }
}