/* Generic confirmation modal. Used for destructive actions. */
{
  const { useEffect, useRef, useState } = React;

  function ConfirmDialog({
    open,
    title,
    message,
    confirmLabel = "Confirm",
    cancelLabel = "Cancel",
    danger = false,
    onConfirm,
    onCancel,
  }) {
    const [busy, setBusy] = useState(false);
    const confirmRef = useRef(null);

    useEffect(() => {
      if (open) {
        setBusy(false);
        setTimeout(() => confirmRef.current?.focus(), 0);
      }
    }, [open]);

    if (!open) return null;

    async function handleConfirm() {
      setBusy(true);
      try {
        await onConfirm();
      } catch {
        setBusy(false);
      }
    }

    return (
      <div className="modal-backdrop" onClick={() => !busy && onCancel()}>
        <div className="modal confirm-dialog" onClick={(e) => e.stopPropagation()}>
          <div className="modal-head">
            {danger ? <Icon.trash /> : <Icon.check />}
            <h3>{title}</h3>
            <button className="close iconbtn" onClick={onCancel} disabled={busy}><Icon.close /></button>
          </div>
          <div className="modal-body">
            <p className="confirm-message">{message}</p>
          </div>
          <div className="modal-foot">
            <button className="btn" onClick={onCancel} disabled={busy}>{cancelLabel}</button>
            <button
              ref={confirmRef}
              className={`btn ${danger ? "danger" : "primary"}`}
              onClick={handleConfirm}
              disabled={busy}
              onKeyDown={(e) => { if (e.key === "Escape") onCancel(); }}
            >
              {busy ? <><Icon.spinner /> Working…</> : confirmLabel}
            </button>
          </div>
        </div>
      </div>
    );
  }

  window.ConfirmDialog = ConfirmDialog;
}