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

@Component({
  selector: 'app-prompt-dialog',
  template: `
    <div class="fixed inset-0 z-40 grid place-items-center bg-black/40" (mousedown)="cancel()">
      <div
        class="w-96 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-xl"
        (mousedown)="$event.stopPropagation()"
      >
        <h2 class="text-sm font-semibold">{{ request().title }}</h2>
        <input
          #box
          [value]="value()"
          (input)="value.set($any($event.target).value)"
          (keydown.enter)="submit()"
          (keydown.escape)="cancel()"
          [placeholder]="request().placeholder ?? ''"
          spellcheck="false"
          class="mt-3 h-8 w-full rounded-md border border-input bg-transparent px-2 text-sm outline-none focus:ring-2 focus:ring-ring"
        />
        <div class="mt-4 flex justify-end gap-2">
          <button
            (click)="cancel()"
            class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
          >
            {{ i18n.t('common.cancel') }}
          </button>
          <button
            (click)="submit()"
            [disabled]="!value().trim()"
            class="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
          >
            {{ request().confirmLabel }}
          </button>
        </div>
      </div>
    </div>
  `,
})
export class PromptDialog {
  readonly i18n = inject(I18nService);
  readonly request = input.required<PromptRequest>();
  readonly value = signal('');

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

  constructor() {
    afterNextRender(() => {
      this.value.set(this.request().initial ?? '');
      const el = this.box().nativeElement;
      el.focus();
      el.select();
    });
  }

  submit(): void {
    const value = this.value().trim();
    if (!value) return;
    const req = this.request();
    this.close();
    req.onConfirm(value);
  }

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

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