import { Component, ElementRef, afterNextRender, inject, input, viewChild } from '@angular/core';
import { I18nService } from '@core/i18n.service';
import { DialogsService, type ConfirmRequest } from '@core/dialogs.service';
import { cycleFocus } from '@core/focus-cycle';
import { FocusService } from '@core/focus.service';

@Component({
  selector: 'app-confirm-dialog',
  template: `
    <div class="fixed inset-0 z-40 grid place-items-center bg-black/40" (mousedown)="cancel()">
      <div
        role="dialog"
        aria-modal="true"
        [attr.aria-label]="request().title"
        class="w-96 border border-border bg-card p-4 text-card-foreground shadow-xl"
        (mousedown)="$event.stopPropagation()"
        (keydown)="onKeydown($event)"
      >
        <h2 class="text-sm font-semibold">{{ request().title }}</h2>
        <p class="mt-2 text-xs text-muted-foreground">{{ request().body }}</p>
        <div class="mt-4 flex justify-end gap-2">
          <button
            (click)="cancel()"
            class="px-3 py-1.5 text-xs font-medium hover:bg-accent"
          >
            {{ i18n.t('common.cancel') }}
          </button>
          <button
            #confirmBtn
            (click)="submit()"
            [class]="
              request().destructive
                ? 'bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground hover:bg-destructive/90'
                : 'bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90'
            "
          >
            {{ request().confirmLabel }}
          </button>
        </div>
      </div>
    </div>
  `,
})
export class ConfirmDialog {
  readonly i18n = inject(I18nService);
  readonly request = input.required<ConfirmRequest>();

  private readonly confirmBtn = viewChild.required<ElementRef<HTMLButtonElement>>('confirmBtn');
  private readonly dialogs = inject(DialogsService);
  private readonly focus = inject(FocusService);

  constructor() {
    afterNextRender(() => this.confirmBtn().nativeElement.focus());
  }

  /** Esc cancels (and stops here — see PromptDialog); Tab stays inside. */
  onKeydown(event: KeyboardEvent): void {
    if (event.key === 'Escape') {
      event.preventDefault();
      event.stopPropagation();
      this.cancel();
    } else {
      cycleFocus(event.currentTarget as Element, event);
    }
  }

  submit(): void {
    const req = this.request();
    this.close();
    req.onConfirm();
  }

  cancel(): void {
    this.close();
  }

  private close(): void {
    this.dialogs.confirm.set(null);
    this.focus.bump();
  }
}