// Password-gated delete confirmation modal.
// Use via: const ok = await window.requestDelete("article 'X'");
const { useState: useStateDM, useEffect: useEffectDM, useRef: useRefDM } = React;

let __openModal = null;

function DeleteModal() {
  const [state, setState] = useStateDM({ open: false, label: "", resolve: null });
  const [pw, setPw] = useStateDM("");
  const [err, setErr] = useStateDM("");
  const [busy, setBusy] = useStateDM(false);
  const inputRef = useRefDM(null);

  useEffectDM(() => {
    __openModal = (label) => new Promise(resolve => {
      setState({ open: true, label: label || "this item", resolve });
      setPw(""); setErr(""); setBusy(false);
      setTimeout(() => inputRef.current?.focus(), 30);
    });
    return () => { __openModal = null; };
  }, []);

  function close(result) {
    state.resolve?.(result);
    setState({ open: false, label: "", resolve: null });
  }

  useEffectDM(() => {
    if (!state.open) return;
    const onKey = (e) => { if (e.key === "Escape") close(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [state.open]);

  async function submit(e) {
    e.preventDefault();
    if (busy) return;
    setBusy(true);
    const ok = await window.KOL_STORE.verifyDeletePassword(pw);
    setBusy(false);
    if (ok) close(true);
    else { setErr("Incorrect password."); setPw(""); inputRef.current?.focus(); }
  }

  if (!state.open) return null;
  return (
    <div className="modal-backdrop" onMouseDown={() => close(false)}>
      <div className="modal" onMouseDown={e => e.stopPropagation()}>
        <h3>Delete {state.label}?</h3>
        <p>This cannot be undone. Enter the deletion password to confirm.</p>
        <form onSubmit={submit} autoComplete="off">
          <input
            ref={inputRef}
            type="password"
            value={pw}
            onChange={e => setPw(e.target.value)}
            placeholder="Deletion password"
            autoComplete="new-password"
          />
          <div className="modal-err">{err}&nbsp;</div>
          <div className="modal-actions">
            <button type="button" className="btn ghost" onClick={() => close(false)}>Cancel</button>
            <button type="submit" className="btn modal-danger" disabled={busy || !pw}>{busy ? "Checking…" : "Delete"}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

window.KOL_PAGES.DeleteModal = DeleteModal;
window.requestDelete = function (label) {
  if (!__openModal) return Promise.resolve(false);
  return __openModal(label);
};