// AMOMS — Design System Foundations review page (Figma Setup Guide §3).
// Documents brand, status/severity/journey, data-viz, type scale, spacing & grid.

const { useState, useEffect } = React;
const Ic = window.Icons;

const cssVar = (name) => {
  try { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); }
  catch (e) { return ""; }
};

// ─── Color swatch ───
const Swatch = ({ token, varName, use, big }) => (
  <div className="ds-swatch">
    <div className={`ds-chip${big ? " big" : ""}`} style={{ background: `var(${varName})` }} />
    <div className="ds-meta">
      <div className="ds-token">{token}</div>
      {use && <div className="ds-use">{use}</div>}
      <div className="ds-val mono">{cssVar(varName) || "—"}</div>
    </div>
  </div>
);

// ─── Section wrapper ───
const Section = ({ id, num, title, desc, children }) => (
  <section className="ds-section" id={id}>
    <div className="ds-section-head">
      <div className="ds-num">{num}</div>
      <div>
        <h2 className="text-heading-2">{title}</h2>
        {desc && <p className="ds-section-desc">{desc}</p>}
      </div>
    </div>
    {children}
  </section>
);

const SubHead = ({ children, note }) => (
  <div className="ds-subhead">
    <h3 className="text-heading-3">{children}</h3>
    {note && <span className="ds-note">{note}</span>}
  </div>
);

// ─── Data ───
const STATUS = [
  { token: "status/pending",     v: "--status-pending",     use: "Pending review / awaiting action", badge: "pending", label: "Pending" },
  { token: "status/in-progress", v: "--status-in-progress", use: "Work in progress",                 badge: "in-progress", label: "In progress" },
  { token: "status/approved",    v: "--status-approved",    use: "Approved / success / passed",      badge: "approved", label: "Approved" },
  { token: "status/rejected",    v: "--status-rejected",    use: "Rejected / failed / blocked",      badge: "rejected", label: "Rejected" },
  { token: "status/closed",      v: "--status-closed",      use: "Completed / closed / archived",    badge: "closed", label: "Closed" },
];
const SEVERITY = [
  { token: "severity/low",      v: "--severity-low",      use: "Low severity incidents",  level: "low" },
  { token: "severity/medium",   v: "--severity-medium",   use: "Medium severity",         level: "medium" },
  { token: "severity/high",     v: "--severity-high",     use: "High severity",           level: "high" },
  { token: "severity/critical", v: "--severity-critical", use: "Critical — must stand out", level: "critical" },
];
const JOURNEY = [
  { token: "journey/aware",              v: "--journey-aware",              use: "Lead state: Aware",                stage: "aware" },
  { token: "journey/committee",          v: "--journey-committee",          use: "Lead state: Committed",            stage: "committee" },
  { token: "journey/planted",            v: "--journey-planted",            use: "Lead state: Planted",              stage: "planted" },
  { token: "journey/growing",            v: "--journey-growing",            use: "Lead state: Growing",              stage: "growing" },
  { token: "journey/first-harvest",      v: "--journey-first-harvest",      use: "First Harvest — promote prompt",   stage: "first-harvest" },
  { token: "journey/procurement-active", v: "--journey-procurement-active", use: "Promoted to active Farmer",        stage: "procurement-active" },
];
const CAT = [
  { token: "cat/1", v: "--cat-1", use: "Blue" },
  { token: "cat/2", v: "--cat-2", use: "Orange" },
  { token: "cat/3", v: "--cat-3", use: "Bluish-green" },
  { token: "cat/4", v: "--cat-4", use: "Vermillion" },
  { token: "cat/5", v: "--cat-5", use: "Purple" },
];
const TYPE = [
  { token: "display/lg", cls: "text-display-lg", v: "--display-lg", use: "Hero KPIs", sample: "2,500 kg" },
  { token: "display/md", cls: "text-display-md", v: "--display-md", use: "Hero KPIs", sample: "KSh 92/kg" },
  { token: "display/sm", cls: "text-display-sm", v: "--display-sm", use: "Dashboard headers", sample: "Procurement" },
  { token: "heading/1",  cls: "text-heading-1",  v: "--heading-1",  use: "Page title", sample: "Active requirements" },
  { token: "heading/2",  cls: "text-heading-2",  v: "--heading-2",  use: "Section", sample: "Pending your action" },
  { token: "heading/3",  cls: "text-heading-3",  v: "--heading-3",  use: "Card title", sample: "Recent broadcast activity" },
  { token: "body/lg",    cls: "text-body-lg",    v: "--body-lg",    use: "Lead copy", sample: "Broadcast a sourcing requirement to your farmer groups." },
  { token: "body/md",    cls: "text-body-md",    v: "--body-md",    use: "Body copy", sample: "Hass avocados sourced from Murang'a smallholder farmers." },
  { token: "body/sm",    cls: "text-body-sm",    v: "--body-sm",    use: "Dense tables", sample: "Delivery window 15–19 May 2026." },
  { token: "label/lg",   cls: "text-label-lg",   v: "--label-lg",   use: "Form labels", sample: "Target quantity" },
  { token: "label/md",   cls: "text-label-md",   v: "--label-md",   use: "Captions", sample: "Required field" },
  { token: "label/sm",   cls: "text-label-sm",   v: "--label-sm",   use: "Table headers", sample: "RESPONSES" },
  { token: "mono/md",    cls: "text-mono-md",     v: "--mono-md",    use: "IDs, codes", sample: "PR-2026-0184 · GPN-26851" },
];
const SPACE = ["--space-1","--space-2","--space-3","--space-4","--space-5","--space-6","--space-8","--space-10","--space-12","--space-16","--space-20"];
const GRID = [
  { device: "Admin Web",      cols: "12", gutter: "24px", margin: "80px" },
  { device: "Operator Tablet",cols: "8",  gutter: "16px", margin: "24px" },
  { device: "Mobile (Farmer + Field)", cols: "4", gutter: "16px", margin: "16px" },
];

// ─── Page ───
const DSPage = () => {
  const [dark, setDark] = useState(false);
  useEffect(() => { document.documentElement.classList.toggle("dark", dark); }, [dark]);
  // force re-read of CSS vars on theme change
  const [, force] = useState(0);
  useEffect(() => { const id = requestAnimationFrame(() => force(n => n + 1)); return () => cancelAnimationFrame(id); }, [dark]);

  return (
    <div className="ds-root">
      <header className="ds-header">
        <div className="ds-header-inner">
          <div className="ds-brand">
            <span className="ds-brand-mark"><Ic.Leaf size={20} /></span>
            <div>
              <div className="text-heading-3">AMOMS — Design System</div>
              <div className="ds-use">Foundations · Figma Setup Guide v1.1 · §3</div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <a className="btn btn-outline btn-sm" href="components.html"><Ic.Layers size={14} />Components</a>
            <button className="btn btn-outline btn-sm" onClick={() => setDark(d => !d)}>
              {dark ? <Ic.Sun size={14} /> : <Ic.Moon size={14} />}{dark ? "Light" : "Dark"}
            </button>
          </div>
        </div>
      </header>

      <main className="ds-main">
        {/* 3.1 Brand */}
        <Section id="brand" num="3.1" title="Brand tokens" desc="Client-provided and locked. Apply consistently — never introduce new brand colors.">
          <div className="ds-grid">
            <Swatch big token="brand/soil" varName="--soil" use="Red-soil terracotta — accents, alerts" />
            <Swatch big token="brand/avocado" varName="--avocado" use="Deep avocado green — primary brand" />
            <Swatch big token="brand/pulp" varName="--pulp" use="Pulp / oil amber — highlights" />
          </div>
        </Section>

        {/* 3.2 Status & severity */}
        <Section id="status" num="3.2" title="Status & severity palette" desc="Functional colors that extend the brand. Use as named tokens, not raw hex.">
          <SubHead note="status/*">Status</SubHead>
          <div className="ds-grid">
            {STATUS.map(s => <Swatch key={s.token} token={s.token} varName={s.v} use={s.use} />)}
          </div>
          <div className="ds-badge-row">
            {STATUS.map(s => <window.Badge key={s.token} tone={s.badge}>{s.label}</window.Badge>)}
          </div>

          <SubHead note="severity/*">Severity</SubHead>
          <div className="ds-grid">
            {SEVERITY.map(s => <Swatch key={s.token} token={s.token} varName={s.v} use={s.use} />)}
          </div>
          <div className="ds-badge-row">
            {SEVERITY.map(s => <window.SeverityBadge key={s.token} level={s.level} />)}
          </div>

          <SubHead note="journey/*">Journey — lead lifecycle</SubHead>
          <div className="ds-journey">
            {JOURNEY.map((s, i) => (
              <React.Fragment key={s.token}>
                <div className="ds-journey-step">
                  <div className="ds-chip" style={{ background: `var(${s.v})` }} />
                  <window.JourneyBadge stage={s.stage} />
                  <div className="ds-token" style={{ marginTop: 6 }}>{s.token}</div>
                  <div className="ds-use">{s.use}</div>
                </div>
                {i < JOURNEY.length - 1 && <Ic.ChevronRight size={16} className="ds-journey-arrow" />}
              </React.Fragment>
            ))}
          </div>
        </Section>

        {/* 3.3 Data-viz */}
        <Section id="dataviz" num="3.3" title="Data-viz palette" desc="5-color categorical (color-blind safe) plus single-hue sequential ramp. Use only these in charts.">
          <SubHead note="cat/1–5">Categorical</SubHead>
          <div className="ds-grid">
            {CAT.map(c => <Swatch key={c.token} token={c.token} varName={c.v} use={c.use} />)}
          </div>
          <SubHead note="seq/1–5">Sequential (single-hue)</SubHead>
          <div className="ds-seq">
            {["--seq-1","--seq-2","--seq-3","--seq-4","--seq-5"].map((v, i) => (
              <div key={v} className="ds-seq-step">
                <div className="ds-seq-chip" style={{ background: `var(${v})` }} />
                <div className="ds-val mono">seq/{i + 1}</div>
              </div>
            ))}
          </div>
          <div className="ds-chart-demo">
            <window.Card>
              <div className="card-body">
                <div className="text-label-md muted" style={{ marginBottom: 10 }}>BarChart — default cat/1</div>
                <window.BarChart data={[6.2, 8.4, 9.1, 11.4, 12.1, 13.2, 14.6]} labels={["M","T","W","T","F","S","S"]} height={120} />
              </div>
            </window.Card>
            <window.Card>
              <div className="card-body" style={{ display: "flex", gap: 18, alignItems: "center", justifyContent: "center", height: "100%" }}>
                <window.Donut value={68} label="Capacity" />
                <window.Donut value={84} label="Yield" color="var(--cat-3)" />
              </div>
            </window.Card>
          </div>
        </Section>

        {/* 3.4 Type scale */}
        <Section id="type" num="3.4" title="Type scale" desc="One set of token names across web/tablet/mobile. Web headlines are largest; tablet sits between; mobile smallest.">
          <div className="ds-type-list">
            {TYPE.map(t => (
              <div key={t.token} className="ds-type-row">
                <div className="ds-type-meta">
                  <div className="ds-token">{t.token}</div>
                  <div className="ds-use">{t.use} · <span className="mono">{cssVar(t.v)}</span></div>
                </div>
                <div className={t.cls}>{t.sample}</div>
              </div>
            ))}
          </div>
        </Section>

        {/* 3.5 Spacing & grid */}
        <Section id="spacing" num="3.5" title="Spacing & grid" desc="4-pt base — all paddings, gaps and margins resolve to a multiple of 4.">
          <SubHead note="--space-*">Spacing scale</SubHead>
          <div className="ds-space-list">
            {SPACE.map(s => (
              <div key={s} className="ds-space-row">
                <div className="ds-token" style={{ width: 96 }}>{s.replace("--", "")}</div>
                <div className="ds-space-bar" style={{ width: `var(${s})` }} />
                <div className="ds-val mono">{cssVar(s)}</div>
              </div>
            ))}
          </div>

          <SubHead note="responsive grid">Layout grid</SubHead>
          <div className="tbl-wrap">
            <table className="tbl">
              <thead><tr><th>Device class</th><th>Columns</th><th>Gutter</th><th>Outer margin</th></tr></thead>
              <tbody>
                {GRID.map(g => (
                  <tr key={g.device}>
                    <td style={{ fontWeight: 500 }}>{g.device}</td>
                    <td>{g.cols}</td><td>{g.gutter}</td><td>{g.margin}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="ds-gridviz">
            {Array.from({ length: 12 }).map((_, i) => <div key={i} className="ds-gridviz-col" />)}
          </div>
          <div className="ds-use" style={{ marginTop: 8 }}>Admin Web · 12 columns · 24px gutter</div>
        </Section>
      </main>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<DSPage />);