// AdminWidgets.jsx — shared building blocks for admin pages.
// Built on the same hierarchy rules as the client (hero KPI + hairline strip,
// section eyebrow → Figtree heading, tabular numerals everywhere).

const fmtMoney = (n) => "$" + Math.round(n).toLocaleString("en-US");
const fmtMoneyShort = (n) => {
  if (n >= 1e6) return "$" + (n / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
  if (n >= 1e3) return "$" + Math.round(n / 1e3) + "K";
  return "$" + Math.round(n);
};

// Map any admin status string → { variant, label } for StatusPill.
const STATUS_META = {
  active:        { variant: "healthy",      label: "Active" },
  normal:        { variant: "healthy",      label: "Normal" },
  healthy:       { variant: "healthy",      label: "Healthy" },
  approved:      { variant: "healthy",      label: "Approved" },
  executed:      { variant: "healthy",      label: "Executed" },
  warn:          { variant: "at-risk",      label: "Warn" },
  paused:        { variant: "at-risk",      label: "Paused" },
  pending:       { variant: "at-risk",      label: "Pending" },
  "under-review":{ variant: "at-risk",      label: "Under review" },
  high:          { variant: "at-risk",      label: "High" },
  monitoring:    { variant: "at-risk",      label: "Monitoring" },
  reverted:      { variant: "neutral",      label: "Reverted" },
  default:       { variant: "not-eligible", label: "Default" },
  liquidated:    { variant: "not-eligible", label: "Liquidated" },
  rejected:      { variant: "not-eligible", label: "Rejected" },
  revoked:       { variant: "not-eligible", label: "Revoked" },
  critical:      { variant: "not-eligible", label: "Critical" },
  shutdown:      { variant: "not-eligible", label: "Shutdown" },
  frozen:        { variant: "blue",         label: "Frozen" },
  medium:        { variant: "neutral",      label: "Medium" },
};
const AdminStatus = ({ status, dot }) => {
  const m = STATUS_META[status] || { variant: "neutral", label: status };
  return <StatusPill variant={m.variant} dot={dot}>{m.label}</StatusPill>;
};

// Page header — eyebrow + Figtree title + lede + optional action.
const PageHeader = ({ eyebrow, title, lede, icon, action, annot }) => (
  <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}
       data-annot-note={annot}>
    <div style={{ minWidth: 0 }}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h1 style={{
        margin: eyebrow ? "6px 0 6px" : "0 0 6px",
        font: '700 32px/36px "Figtree", sans-serif',
        letterSpacing: "-0.015em", color: "var(--fg)",
        display: "flex", alignItems: "center", gap: 12,
      }}>
        {icon && <span style={{ color: "var(--fg-muted)" }}><Icon name={icon} size={26} stroke={1.4}/></span>}
        {title}
      </h1>
      {lede && <div style={{ font: '400 14px/22px "Inter", sans-serif', color: "var(--fg-subtle)", maxWidth: 680 }}>{lede}</div>}
    </div>
    {action}
  </div>
);

// Hero KPI — the one number a page is about.
const HeroKPI = ({ label, value, sub, tone }) => (
  <div style={{
    flex: "2 1 300px", minWidth: 0, padding: "24px 28px",
    background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 12,
    display: "flex", flexDirection: "column", gap: 8,
  }} data-annot-note="C-4 hero KPI">
    <Eyebrow>{label}</Eyebrow>
    <div className="tnum" style={{
      font: '700 44px/48px "Figtree", sans-serif', letterSpacing: "-0.018em",
      color: tone === "danger" ? "var(--danger)" : tone === "warning" ? "var(--gold-70)" : "var(--fg)",
    }}>{value}</div>
    {sub && <div style={{ font: '400 13px/20px "Inter", sans-serif', color: "var(--fg-subtle)" }}>{sub}</div>}
  </div>
);

const SupportKPI = ({ label, value, sub, tone }) => (
  <div className="support-kpi">
    <div className="stat-label" style={{ minHeight: "32px" }}>{label}</div>
    <div className="tnum" style={{
      font: '600 22px/28px "Inter", sans-serif', letterSpacing: "-0.01em", marginTop: 4,
      color: tone === "danger" ? "var(--danger)" : tone === "warning" ? "var(--gold-70)" : tone === "success" ? "var(--success)" : "var(--fg)",
    }}>{value}</div>
    {sub && <div className="kpi-sub" title={typeof sub === "string" ? sub : undefined} style={{
      font: '400 12px/16px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: 4,
    }}>{sub}</div>}
  </div>
);

// HeroStrip — hero + supporting strip side by side.
const HeroStrip = ({ hero, supports }) => (
  <section style={{ display: "flex", gap: 16, flexWrap: "wrap" }} data-annot-note="C-4 hierarchy">
    <HeroKPI {...hero} />
    <div className="kpi-strip" style={{
      flex: "3 1 460px", minWidth: 0,
      background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 12,
    }}>
      {supports.map((s, i) => <SupportKPI key={i} {...s} />)}
    </div>
  </section>
);

const SectionHeader = ({ eyebrow, title, count, action, annot }) => (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 12, marginBottom: 16, flexWrap: "wrap" }}
       data-annot-note={annot}>
    <div>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 className="section-heading" style={{ marginTop: eyebrow ? 6 : 0 }}>
        {title}
        {count !== undefined && (
          <span style={{ display: "inline-block", marginLeft: 12, font: '500 14px/20px "Inter", sans-serif', color: "var(--fg-subtle)", verticalAlign: "middle" }}>{count}</span>
        )}
      </h2>
    </div>
    {action}
  </div>
);

const SegmentControl = ({ value, options, onChange }) => (
  <div style={{ display: "inline-flex", padding: 3, background: "var(--bg-alt)", borderRadius: 999, border: "1px solid var(--border)", flexWrap: "wrap" }}>
    {options.map((o) => {
      const active = o.value === value;
      return (
        <button key={o.value} type="button" onClick={() => onChange(o.value)} style={{
          all: "unset", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6,
          padding: "4px 12px", borderRadius: 999,
          font: '500 12px/16px "Inter", sans-serif',
          color: active ? "var(--fg)" : "var(--fg-subtle)",
          background: active ? "var(--surface)" : "transparent",
          boxShadow: active ? "0 1px 2px rgba(0,0,0,0.04)" : "none",
          transition: "background var(--motion-fast), color var(--motion-fast)",
        }}>
          {o.label}
          {o.count !== undefined && <span className="tnum" style={{ color: "var(--fg-faint)", fontWeight: 400 }}>{o.count}</span>}
        </button>
      );
    })}
  </div>
);

// Search input (visual)
const SearchBox = ({ placeholder, value, onChange, width = 280 }) => (
  <div style={{
    display: "flex", alignItems: "center", gap: 8, padding: "0 12px", height: 34,
    border: "1px solid var(--border-strong)", borderRadius: 8, background: "var(--surface)",
    font: '400 13px "Inter", sans-serif', color: "var(--fg)", width, maxWidth: "100%",
  }}>
    <Icon name="search" size={14} stroke={1.6} style={{ color: "var(--fg-subtle)", flexShrink: 0 }} />
    <input value={value || ""} onChange={(e) => onChange && onChange(e.target.value)} placeholder={placeholder}
      style={{ all: "unset", flex: 1, minWidth: 0, color: "var(--fg)" }} />
  </div>
);

// Table column header cell with optional sort affordance
const Th = ({ children, align = "left", sortable }) => (
  <span style={{
    display: "inline-flex", alignItems: "center", gap: 5,
    justifyContent: align === "right" ? "flex-end" : "flex-start",
    font: '500 11px/16px "Inter", sans-serif', letterSpacing: "0.04em",
    textTransform: "uppercase", color: "var(--fg-subtle)",
  }}>
    {children}
    {sortable && <span style={{ color: "var(--fg-faint)" }}><Icon name="sort" size={11} stroke={1.4}/></span>}
  </span>
);

Object.assign(window, {
  fmtMoney, fmtMoneyShort, STATUS_META, AdminStatus, PageHeader,
  HeroKPI, SupportKPI, HeroStrip, SectionHeader, SegmentControl, SearchBox, Th,
});