/* confirm.jsx — on-brand confirmation modal that replaces native confirm().

   Usage (anywhere):
     if (await confirmDialog({
       title: "Remove channel",
       message: "Stop watching this channel?",
       confirmLabel: "Remove",
       danger: true,
     })) { ...do it... }

   Mount <ConfirmHost /> once near the app root. */

let _setState = null;   // wired up by the mounted ConfirmHost
let _resolve = null;    // resolver for the in-flight promise

function confirmDialog(opts = {}) {
  return new Promise((resolve) => {
    // Resolve any previous pending dialog as cancelled.
    if (_resolve) { _resolve(false); _resolve = null; }
    _resolve = resolve;
    if (_setState) _setState({ open: true, opts });
    else resolve(window.confirm(opts.message || "Are you sure?")); // fallback if host not mounted
  });
}

function ConfirmHost() {
  const [state, setState] = useState({ open: false, opts: {} });

  useEffect(() => { _setState = setState; return () => { _setState = null; }; }, []);

  function close(result) {
    setState((s) => ({ ...s, open: false }));
    if (_resolve) { _resolve(result); _resolve = null; }
  }

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

  if (!state.open) return null;
  const {
    title = "Are you sure?",
    message = "",
    confirmLabel = "Confirm",
    cancelLabel = "Cancel",
    danger = false,
  } = state.opts;

  return (
    <div className="modal-back" onMouseDown={() => close(false)}>
      <div className="modal" role="dialog" aria-modal="true" onMouseDown={(e) => e.stopPropagation()}>
        <div className={cx("modal-icon", danger && "danger")}>{I(danger ? "alert" : "check", { size: 18 })}</div>
        <div className="modal-title">{title}</div>
        {message && <div className="modal-body">{message}</div>}
        <div className="modal-actions">
          <button className="btn" onClick={() => close(false)}>{cancelLabel}</button>
          <button className={cx("btn", danger ? "danger" : "primary")} autoFocus onClick={() => close(true)}>
            {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { confirmDialog, ConfirmHost });