/* planner-dialog.jsx — in-app confirm dialog for destructive actions.
   Replaces window.confirm so wording, counts and styling stay consistent,
   and so a really destructive action can ask for a typed confirmation. */

function PlannerConfirm({
  open,
  tone = "danger",          /* "danger" | "normal" */
  title,
  message,
  details = [],             /* bullet list of exactly what happens */
  confirmLabel = "Delete",
  cancelLabel = "Cancel",
  confirmWord = null,       /* when set, the word must be typed to enable Delete */
  checkbox = null,          /* { label, checked, onChange } */
  onConfirm,
  onCancel
}) {
  const [typed, setTyped] = React.useState("");
  const cancelRef = React.useRef(null);
  const typedRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    setTyped("");
    const id = requestAnimationFrame(() => {
      /* Focus the safe choice first; the typed field when one is required. */
      if (confirmWord && typedRef.current) typedRef.current.focus();
      else if (cancelRef.current) cancelRef.current.focus();
    });
    return () => cancelAnimationFrame(id);
  }, [open, confirmWord]);

  const ready = !confirmWord || typed.trim().toUpperCase() === String(confirmWord).toUpperCase();

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") {
        e.preventDefault();
        e.stopPropagation();
        onCancel();
      } else if (e.key === "Enter" && ready && !e.shiftKey) {
        e.preventDefault();
        onConfirm();
      }
    };
    /* Capture phase: this dialog owns Escape/Enter while it is open. */
    window.addEventListener("keydown", onKey, true);
    return () => window.removeEventListener("keydown", onKey, true);
  }, [open, ready, onConfirm, onCancel]);

  if (!open) return null;

  return (
    <>
      <div className="confirm-backdrop" onClick={onCancel}/>
      <div className={"confirm-modal tone-" + tone} role="alertdialog" aria-modal="true" aria-label={title}>
        <div className="confirm-icon">{tone === "danger" ? <window.Icon.trash/> : <window.Icon.sparkle/>}</div>
        <h2 className="confirm-title">{title}</h2>
        {message && <p className="confirm-message">{message}</p>}

        {details.length > 0 && (
          <ul className="confirm-details">
            {details.map((d, i) => <li key={i}>{d}</li>)}
          </ul>
        )}

        {checkbox && (
          <label className="confirm-checkbox">
            <input
              type="checkbox"
              checked={checkbox.checked}
              onChange={(e) => checkbox.onChange(e.target.checked)}
            />
            <span>{checkbox.label}</span>
          </label>
        )}

        {confirmWord && (
          <label className="confirm-typed">
            <span>Type <b>{confirmWord}</b> to confirm</span>
            <input
              ref={typedRef}
              type="text"
              value={typed}
              autoComplete="off"
              spellCheck="false"
              placeholder={confirmWord}
              onChange={(e) => setTyped(e.target.value)}
            />
          </label>
        )}

        <div className="confirm-actions">
          <button ref={cancelRef} type="button" className="btn-secondary" onClick={onCancel}>
            {cancelLabel}
          </button>
          <button
            type="button"
            className={tone === "danger" ? "btn-danger" : "btn-primary"}
            onClick={onConfirm}
            disabled={!ready}
          >
            {tone === "danger" ? <window.Icon.trash/> : <window.Icon.check/>} {confirmLabel}
          </button>
        </div>
      </div>
    </>
  );
}

window.PlannerConfirm = PlannerConfirm;