// dialogs.jsx — themed replacements for window.confirm / window.alert.
//
// Two singletons mounted at the App root:
//
//   <ConfirmHost/>   — exposes window.confirmDialog({ title, message, ... }) → Promise<boolean>
//   <ToastHost/>     — exposes window.toast.{success|error|info}(message, opts)
//
// Both use Modal (from screens-a.jsx) for theming. Esc cancels confirms;
// click-outside cancels confirms; toasts auto-dismiss and click-to-close.

function ConfirmHost() {
  const [req, setReq] = React.useState(null);
  const reqRef = React.useRef(null);
  reqRef.current = req;

  React.useEffect(() => {
    window.confirmDialog = (opts) => new Promise((resolve) => {
      setReq({
        title: opts?.title ?? null,
        message: opts?.message ?? "",
        confirmLabel: opts?.confirmLabel ?? "Confirm",
        cancelLabel: opts?.cancelLabel ?? "Cancel",
        danger: !!opts?.danger,
        resolve,
      });
    });
    return () => { delete window.confirmDialog; };
  }, []);

  // Enter = confirm when dialog is open
  React.useEffect(() => {
    if (!req) return;
    const onKey = (e) => {
      if (e.key === "Enter") {
        e.preventDefault();
        const r = reqRef.current; if (r) { r.resolve(true); setReq(null); }
      }
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [req]);

  if (!req) return null;

  const cancel = () => { req.resolve(false); setReq(null); };
  const ok = () => { req.resolve(true); setReq(null); };

  return (
    <Modal onClose={cancel} title={req.title || "Confirm"} maxWidth={420}>
      <div className="col g16">
        {req.message && (
          <div style={{fontSize:14, color:"var(--ink-2)", lineHeight:1.55}}>{req.message}</div>
        )}
        <div className="row g8" style={{justifyContent:"flex-end"}}>
          <button className="btn btn-ghost btn-sm" onClick={cancel}>{req.cancelLabel}</button>
          <button
            className="btn btn-sm"
            onClick={ok}
            autoFocus
            style={req.danger
              ? { background:"#DC2626", color:"white", boxShadow:"0 1px 2px rgba(220,38,38,.3), inset 0 1px 0 rgba(255,255,255,.2)" }
              : undefined}
            ref={(el) => {
              // Promote default styling to btn-primary (red for danger)
              if (!el) return;
              if (!req.danger) el.classList.add("btn-primary");
            }}
          >{req.confirmLabel}</button>
        </div>
      </div>
    </Modal>
  );
}

function ToastHost() {
  const [toasts, setToasts] = React.useState([]);
  const idRef = React.useRef(0);

  React.useEffect(() => {
    function add(variant, message, opts = {}) {
      const id = ++idRef.current;
      const ttl = opts.ttl ?? (variant === "error" ? 6000 : 3500);
      setToasts((cur) => [...cur, { id, variant, message }]);
      if (ttl > 0) setTimeout(() => {
        setToasts((cur) => cur.filter((t) => t.id !== id));
      }, ttl);
      return id;
    }
    window.toast = {
      success: (m, o) => add("success", m, o),
      error:   (m, o) => add("error",   m, o),
      info:    (m, o) => add("info",    m, o),
      dismiss: (id) => setToasts((cur) => cur.filter((t) => t.id !== id)),
    };
    return () => { delete window.toast; };
  }, []);

  function dismiss(id) {
    setToasts((cur) => cur.filter((t) => t.id !== id));
  }

  return (
    <div className="toast-host">
      {toasts.map((t) => (
        <div
          key={t.id}
          className={"toast toast--" + t.variant}
          onClick={() => dismiss(t.id)}
          role="status"
        >
          <span className="toast__icon">
            {t.variant === "success" && <I.check size={14}/>}
            {t.variant === "error"   && <I.x size={14}/>}
            {t.variant === "info"    && <I.bell size={14}/>}
          </span>
          <span className="toast__msg">{t.message}</span>
        </div>
      ))}
    </div>
  );
}

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