// ============================================================================
// Imara — shared widgets: Modal, Pager, Select, Toggle, Field, Empty, usePaged
// ============================================================================

function Modal({ open, onClose, width = 860, children }) {
  useEffect(() => {
    if (!open) return;
    const h = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="cmdk-scrim" data-modal="1" style={{ alignItems: "center", paddingTop: 0 }} onClick={onClose}>
      <div className="panel fadein" style={{ width: `min(${width}px, 94vw)`, maxHeight: "90vh", display: "flex", flexDirection: "column", boxShadow: "var(--shadow-lg)", overflow: "hidden" }} onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

function Toggle({ on, onChange, size = 18 }) {
  return (
    <button type="button" onClick={() => onChange(!on)} aria-pressed={on}
      style={{ width: size * 1.85, height: size + 4, borderRadius: 20, border: "none", padding: 2,
        background: on ? "var(--accent)" : "var(--bg-active)", transition: "background .15s", cursor: "pointer", position: "relative" }}>
      <span style={{ display: "block", width: size, height: size, borderRadius: "50%", background: "#fff",
        boxShadow: "0 1px 2px rgba(0,0,0,.3)", transform: on ? `translateX(${size * 0.85}px)` : "translateX(0)", transition: "transform .15s" }} />
    </button>
  );
}

function Select({ value, onChange, options, style }) {
  return (
    <div style={{ position: "relative", ...style }}>
      <select value={value} onChange={(e) => onChange(e.target.value)} className="input"
        style={{ appearance: "none", paddingRight: 28, cursor: "pointer" }}>
        {options.map((o) => {
          const val = typeof o === "string" ? o : o.value;
          const label = typeof o === "string" ? o : o.label;
          return <option key={val} value={val}>{label}</option>;
        })}
      </select>
      <Icon name="ChevronDown" size={14} style={{ position: "absolute", right: 9, top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "var(--text-subtle)" }} />
    </div>
  );
}

function Field({ label, hint, children }) {
  return (
    <label style={{ display: "block" }}>
      <div className="stat-label" style={{ marginBottom: 6 }}>{label}</div>
      {children}
      {hint && <div className="faint" style={{ fontSize: 11, marginTop: 5 }}>{hint}</div>}
    </label>
  );
}

// A small "?" that shows an explanation when clicked, so explanations do
// not fill the page; it closes on a click elsewhere, Escape or scrolling.
// Drawn on top of everything (a portal), so a card or list that clips its
// content does not cut it off. Never put it inside another button.
function Help({ children, label = "What does this mean?", width = 320 }) {
  const [at, setAt] = useState(null); // where the explanation shows, while open
  const btn = useRef(null);
  const pop = useRef(null);
  useEffect(() => {
    if (!at) return;
    const inside = (t) => (btn.current && btn.current.contains(t)) || (pop.current && pop.current.contains(t));
    const away = (e) => { if (!inside(e.target)) setAt(null); };
    const key = (e) => { if (e.key === "Escape") { e.stopPropagation(); setAt(null); if (btn.current) btn.current.focus(); } };
    const moved = (e) => { if (!(pop.current && e.target && e.target.nodeType === 1 && pop.current.contains(e.target))) setAt(null); };
    const resized = () => setAt(null);
    document.addEventListener("mousedown", away);
    window.addEventListener("keydown", key, true);
    window.addEventListener("scroll", moved, true);
    window.addEventListener("resize", resized);
    return () => {
      document.removeEventListener("mousedown", away);
      window.removeEventListener("keydown", key, true);
      window.removeEventListener("scroll", moved, true);
      window.removeEventListener("resize", resized);
    };
  }, [at]);
  const toggle = (e) => {
    e.preventDefault(); e.stopPropagation();
    if (at) { setAt(null); return; }
    const r = btn.current.getBoundingClientRect();
    const left = Math.max(12, Math.min(r.left - 12, window.innerWidth - width - 12));
    // Above the "?" when there is little room below it.
    setAt(window.innerHeight - r.bottom < 220 ? { left, bottom: window.innerHeight - r.top + 6 } : { left, top: r.bottom + 6 });
  };
  const stop = (e) => e.stopPropagation();
  return (
    <React.Fragment>
      <button ref={btn} type="button" className="help-btn" aria-label={label} title={label} aria-expanded={!!at} onClick={toggle}>
        <Icon name="CircleHelp" size={13} />
      </button>
      {at && ReactDOM.createPortal(
        <div ref={pop} role="note" className="help-pop" style={{ ...at, width }} onClick={stop} onMouseDown={stop}>{children}</div>,
        document.body)}
    </React.Fragment>
  );
}

function Empty({ icon = "Inbox", text }) {
  return (
    <div className="col" style={{ alignItems: "center", gap: 8, padding: "40px 20px", color: "var(--text-faint)" }}>
      <Icon name={icon} size={26} />
      <span style={{ fontSize: 12.5 }}>{text}</span>
    </div>
  );
}

function Pager({ page, pageCount, total, onPage, unit = "rows", size }) {
  if (total === 0) return null;
  const btn = (to, disabled, children, title) => (
    <button className="btn ghost sm" disabled={disabled} title={title} onClick={() => onPage(to)} style={{ opacity: disabled ? 0.4 : 1 }}>{children}</button>
  );
  const range = size && pageCount > 1 ? `${(page * size + 1).toLocaleString("en-US")}-${Math.min(total, (page + 1) * size).toLocaleString("en-US")} of ${total.toLocaleString("en-US")} ${unit}` : `${total.toLocaleString("en-US")} ${unit}`;
  return (
    <div className="row spread" style={{ marginTop: 12 }}>
      <span className="faint" style={{ fontSize: 11.5 }}>{range}</span>
      {pageCount > 1 && (
        <div className="row gap6">
          {btn(0, page === 0, <Icon name="ChevronsLeft" size={14} />, "First page")}
          {btn(page - 1, page === 0, <React.Fragment><Icon name="ChevronLeft" size={14} /> Previous</React.Fragment>)}
          <span className="mono subtle" style={{ fontSize: 12 }}>page {page + 1} of {pageCount}</span>
          {btn(page + 1, page >= pageCount - 1, <React.Fragment>Next <Icon name="ChevronRight" size={14} /></React.Fragment>)}
          {btn(pageCount - 1, page >= pageCount - 1, <Icon name="ChevronsRight" size={14} />, "Last page")}
        </div>
      )}
    </div>
  );
}

// resetKey: the list's search, filter and sort; the first page comes back
// when it changes. Entries that arrive or go keep the page (clamped).
function usePaged(rows, size = 12, resetKey) {
  const [page, setPage] = useState(0);
  const pageCount = Math.max(1, Math.ceil(rows.length / size));
  const p = Math.min(page, pageCount - 1);
  const prevKey = useRef(resetKey);
  useEffect(() => { if (prevKey.current !== resetKey) { prevKey.current = resetKey; setPage(0); } }, [resetKey]);
  return { slice: rows.slice(p * size, p * size + size), page: p, pageCount, setPage, total: rows.length, size };
}

// Confirmation dialog with an optional text field (e.g. a reject reason).
// onConfirm(text) may be async: while it runs the dialog is busy; if it
// throws, the server's error is shown and the dialog STAYS OPEN. It closes
// only after onConfirm resolves.
function ConfirmModal({ open, title, children, confirmLabel = "Confirm", tone = "primary", input, onConfirm, onClose }) {
  const [text, setText] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");
  useEffect(() => { if (open) { setText(""); setBusy(false); setErr(""); } }, [open]);
  if (!open) return null;
  const missing = !!(input && input.required && !text.trim());
  const close = () => { if (!busy) onClose(); };
  const go = async () => {
    if (missing || busy) return;
    setBusy(true); setErr("");
    try {
      await onConfirm(text.trim());
      setBusy(false);
      onClose();
    } catch (e) {
      setErr((e && e.message) || "failed");
      setBusy(false);
    }
  };
  return (
    <Modal open={open} onClose={close} width={500}>
      <div className="drawer-head" style={{ padding: "16px 20px" }}>
        <div style={{ flex: 1, fontSize: 15, fontWeight: 650 }}>{title}</div>
        <button className="icon-btn" onClick={close}><Icon name="X" size={17} /></button>
      </div>
      <div className="drawer-body" style={{ padding: 20 }}>
        {children && <div className="muted" style={{ fontSize: 12.5, lineHeight: 1.6, marginBottom: input ? 14 : 0 }}>{children}</div>}
        {input && (
          <Field label={input.label + (input.required ? " (required)" : " (optional)")}>
            <textarea className="input" style={{ minHeight: 72, fontSize: 12.5, width: "100%" }} value={text}
              placeholder={input.placeholder || ""} onChange={(e) => setText(e.target.value)} autoFocus />
          </Field>
        )}
        {err && <div style={{ color: "var(--bad)", fontSize: 12, marginTop: 12, whiteSpace: "pre-wrap", wordBreak: "break-word" }}>{err}</div>}
      </div>
      <div className="row spread" style={{ padding: "14px 20px", borderTop: "1px solid var(--border)" }}>
        <button className="btn ghost" onClick={close} disabled={busy}>Cancel</button>
        <button className={cx("btn", tone === "danger" ? "danger" : "primary")} disabled={missing || busy}
          style={{ opacity: missing || busy ? 0.5 : 1 }} onClick={go}>{busy ? "Working…" : confirmLabel}</button>
      </div>
    </Modal>
  );
}

// Copy text to the clipboard. navigator.clipboard needs a secure context
// (HTTPS); the console may be served over plain HTTP, so fall back to a
// hidden textarea + execCommand("copy"). Resolves true only on success.
async function copyText(text) {
  if (navigator.clipboard && window.isSecureContext) {
    try { await navigator.clipboard.writeText(text); return true; } catch (e) { /* fall back */ }
  }
  const ta = document.createElement("textarea");
  ta.value = text;
  ta.setAttribute("readonly", "");
  ta.style.position = "fixed"; ta.style.top = "-1000px"; ta.style.left = "0"; ta.style.opacity = "0";
  document.body.appendChild(ta);
  ta.select();
  let ok = false;
  try { ok = document.execCommand("copy"); } catch (e) { ok = false; }
  document.body.removeChild(ta);
  return ok;
}

Object.assign(window, { Modal, Toggle, Select, Field, Empty, Help, Pager, usePaged, ConfirmModal, copyText });