import { createIcons, TriangleAlert } from 'lucide';
import { escapeHTML } from '../shared/utils';

export interface ConfirmOptions {
  /** Titolo del modal (default: "Conferma"). */
  title?: string;
  /** Messaggio principale; i "\n" vengono resi come a capo. */
  message: string;
  /** Etichetta del pulsante di conferma (default: "Conferma"). */
  confirmLabel?: string;
  /** Etichetta del pulsante di annullamento (default: "Annulla"). */
  cancelLabel?: string;
  /** Variante cromatica: "danger" per azioni distruttive (default). */
  variant?: 'danger' | 'primary';
}

/**
 * Modal di conferma basato su <dialog> DaisyUI: alternativa controllabile e
 * coerente cross-browser a globalThis.confirm(). Risolve true se l'utente
 * conferma, false se annulla (anche via ESC o click sul backdrop).
 *
 * Il dialog viene creato e rimosso ad ogni chiamata, così non restano
 * listener appesi né markup orfano nel DOM.
 */
export function confirmDialog(options: ConfirmOptions): Promise<boolean> {
  const {
    title = 'Conferma',
    message,
    confirmLabel = 'Conferma',
    cancelLabel = 'Annulla',
    variant = 'danger',
  } = options;

  return new Promise((resolve) => {
    const confirmClass = variant === 'danger' ? 'btn-error' : 'btn-primary';
    const iconClass = variant === 'danger' ? 'text-error' : 'text-primary';

    const dialog = document.createElement('dialog');
    dialog.className = 'modal';
    dialog.innerHTML = `
      <div class="modal-box">
        <h3 class="flex items-center gap-2 text-lg font-bold">
          <i data-lucide="triangle-alert" class="size-5 ${iconClass}"></i>
          ${escapeHTML(title)}
        </h3>
        <p class="py-4 whitespace-pre-line">${escapeHTML(message)}</p>
        <div class="modal-action">
          <button type="button" data-action="cancel" class="btn btn-ghost">${escapeHTML(cancelLabel)}</button>
          <button type="button" data-action="confirm" class="btn ${confirmClass}">${escapeHTML(confirmLabel)}</button>
        </div>
      </div>
      <form method="dialog" class="modal-backdrop">
        <button type="submit">chiudi</button>
      </form>`;

    document.body.appendChild(dialog);
    createIcons({ icons: { TriangleAlert }, root: dialog });

    let settled = false;
    const settle = (result: boolean): void => {
      if (settled) return;
      settled = true;
      resolve(result);
      dialog.close();
    };

    dialog.querySelector('[data-action="confirm"]')?.addEventListener('click', () => settle(true));
    dialog.querySelector('[data-action="cancel"]')?.addEventListener('click', () => settle(false));

    // Chiusura via ESC o click sul backdrop = annulla; al close rimuovo il nodo
    dialog.addEventListener('close', () => {
      if (!settled) {
        settled = true;
        resolve(false);
      }
      dialog.remove();
    });

    dialog.showModal();
  });
}
