// primitives.jsx — shared UI building blocks. Exported to window.
const { useState, useRef, useEffect } = React;

/* Phone screen shell — neutral (iOS/Android-agnostic) 390x844 device. */
function PhoneFrame({ children, theme }) {
  return (
    <div className="device" style={themeVars(theme)}>
      <div className="device-screen">{children}</div>
    </div>
  );
}

/* Generic status bar (neutral glyphs) — shows the real device time. */
function StatusBar() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => { const id = setInterval(() => setNow(new Date()), 20000); return () => clearInterval(id); }, []);
  const time = String(now.getHours()).padStart(2, "0") + ":" + String(now.getMinutes()).padStart(2, "0");
  return (
    <div className="statusbar">
      <span className="sb-time">{time}</span>
      <div className="sb-right">
        <svg width="17" height="11" viewBox="0 0 17 11" fill="none"><rect x="0" y="7" width="3" height="4" rx="1" fill="currentColor"/><rect x="4.5" y="5" width="3" height="6" rx="1" fill="currentColor"/><rect x="9" y="2.5" width="3" height="8.5" rx="1" fill="currentColor"/><rect x="13.5" y="0" width="3" height="11" rx="1" fill="currentColor" opacity=".35"/></svg>
        <svg width="15" height="11" viewBox="0 0 15 11" fill="none"><path d="M7.5 2.6c2 0 3.8.8 5 2.1l1.3-1.4A9 9 0 0 0 7.5.6 9 9 0 0 0 .7 3.3L2 4.7a6.8 6.8 0 0 1 5.5-2.1Z" fill="currentColor"/><path d="M7.5 6c1 0 1.9.4 2.5 1l1.4-1.4A5 5 0 0 0 7.5 4 5 5 0 0 0 4 5.6L5.4 7c.6-.6 1.4-1 2.1-1Z" fill="currentColor"/><circle cx="7.5" cy="9.3" r="1.5" fill="currentColor"/></svg>
        <svg width="26" height="12" viewBox="0 0 26 12" fill="none"><rect x="1" y="1" width="21" height="10" rx="2.5" stroke="currentColor" strokeWidth="1.2" opacity=".5"/><rect x="3" y="3" width="15" height="6" rx="1" fill="currentColor"/><rect x="23.5" y="4" width="1.6" height="4" rx="1" fill="currentColor" opacity=".5"/></svg>
      </div>
    </div>
  );
}

function TopBar({ title, sub, onBack, right, accent }) {
  return (
    <div className={"topbar" + (accent ? " topbar--accent" : "")}>
      {onBack ? (
        <button className="iconbtn" onClick={onBack} aria-label="back"><Ic.back width="22" height="22"/></button>
      ) : <span style={{ width: 22 }} />}
      <div className="topbar-titles">
        <div className="topbar-title">{title}</div>
        {sub && <div className="topbar-sub">{sub}</div>}
      </div>
      <div className="topbar-right">{right}</div>
    </div>
  );
}

function BottomNav({ active, onChange, onNew }) {
  const items = [
    { k: "today", label: "Today", Icon: Ic.today },
    { k: "logs", label: "Logs", Icon: Ic.logs },
    { k: "__new", label: "", Icon: null },
    { k: "flights", label: "Flights", Icon: Ic.flight },
    { k: "profile", label: "Profile", Icon: Ic.user },
  ];
  return (
    <nav className="bottomnav">
      {items.map((it) => it.k === "__new" ? (
        <button key="new" className="fab" onClick={onNew} aria-label="new log"><Ic.plus width="26" height="26"/></button>
      ) : (
        <button key={it.k} className={"navbtn" + (active === it.k ? " navbtn--on" : "")} onClick={() => onChange(it.k)}>
          <it.Icon width="23" height="23"/>
          <span>{it.label}</span>
        </button>
      ))}
    </nav>
  );
}

/* Bottom sheet */
function Sheet({ open, onClose, title, children, full }) {
  if (!open) return null;
  return (
    <div className="sheet-scrim" onClick={onClose}>
      <div className={"sheet" + (full ? " sheet--full" : "")} onClick={(e) => e.stopPropagation()}>
        <div className="sheet-grab" />
        {title && (
          <div className="sheet-head">
            <div className="sheet-title">{title}</div>
            <button className="iconbtn" onClick={onClose}><Ic.close width="20" height="20"/></button>
          </div>
        )}
        <div className="sheet-body">{children}</div>
      </div>
    </div>
  );
}

function Card({ children, className = "", ...p }) {
  return <div className={"card " + className} {...p}>{children}</div>;
}

function Btn({ children, kind = "primary", full, sm, icon, ...p }) {
  return (
    <button className={`btn btn--${kind}` + (full ? " btn--full" : "") + (sm ? " btn--sm" : "")} {...p}>
      {icon}{children}
    </button>
  );
}

function Field({ label, hint, children, req }) {
  return (
    <label className="field">
      <span className="field-label">{label}{req && <i className="req">*</i>}</span>
      {children}
      {hint && <span className="field-hint">{hint}</span>}
    </label>
  );
}

function Chip({ children, on, mono, onClick, danger }) {
  return (
    <button className={"chip" + (on ? " chip--on" : "") + (mono ? " chip--mono" : "") + (danger ? " chip--danger" : "")} onClick={onClick}>{children}</button>
  );
}

function AtaBadge({ code, big }) {
  return <span className={"ata" + (big ? " ata--big" : "")}>ATA {code}</span>;
}

function StatusDot({ status }) {
  const map = { synced: ["var(--good)", "Synced"], pending: ["var(--accent)", "Pending"], draft: ["var(--ink-soft)", "Draft"] };
  const [c, label] = map[status] || map.draft;
  return <span className="statusdot"><i style={{ background: c }} />{label}</span>;
}

/* small key/value row for data display */
function KV({ k, v, mono }) {
  return (
    <div className="kv">
      <span className="kv-k">{k}</span>
      <span className={"kv-v" + (mono ? " mono" : "")}>{v}</span>
    </div>
  );
}

Object.assign(window, {
  PhoneFrame, StatusBar, TopBar, BottomNav, Sheet, Card, Btn, Field, Chip, AtaBadge, StatusDot, KV,
});