"use client";

import { useCallback, useRef, useState } from "react";
import { Button, type ButtonVariant } from "@/components/ui/button";

/**
 * Promise-based drop-in replacement for `window.confirm()`, backed by the
 * native <dialog> element so we get a focus trap, Escape-to-close, and
 * top-layer stacking for free — no extra dependency, no manual a11y wiring.
 */
export function useConfirmDialog() {
  const dialogRef = useRef<HTMLDialogElement>(null);
  const resolveRef = useRef<((value: boolean) => void) | null>(null);
  const [message, setMessage] = useState("");
  const [confirmLabel, setConfirmLabel] = useState("Delete");
  const [confirmVariant, setConfirmVariant] = useState<ButtonVariant>("danger");

  const confirm = useCallback((msg: string, label = "Delete", variant: ButtonVariant = "danger") => {
    setMessage(msg);
    setConfirmLabel(label);
    setConfirmVariant(variant);
    dialogRef.current?.showModal();
    return new Promise<boolean>((resolve) => {
      resolveRef.current = resolve;
    });
  }, []);

  function settle(result: boolean) {
    dialogRef.current?.close();
    resolveRef.current?.(result);
    resolveRef.current = null;
  }

  const dialog = (
    <dialog
      ref={dialogRef}
      role="alertdialog"
      aria-label="Confirm"
      onCancel={(e) => {
        e.preventDefault();
        settle(false);
      }}
      onClick={(e) => {
        if (e.target === dialogRef.current) settle(false);
      }}
      className="m-auto rounded-xl border border-kolabora-neutral-dark/10 p-0 backdrop:bg-kolabora-neutral-dark/40"
    >
      <div className="w-80 max-w-[90vw] p-5">
        <p className="text-sm">{message}</p>
        <div className="mt-4 flex justify-end gap-2">
          <Button type="button" variant="secondary" size="sm" onClick={() => settle(false)}>
            Cancel
          </Button>
          <Button type="button" variant={confirmVariant} size="sm" onClick={() => settle(true)}>
            {confirmLabel}
          </Button>
        </div>
      </div>
    </dialog>
  );

  return { confirm, dialog };
}