// AMOMS — Components index (Figma Setup Guide §7 checklist).
// Atoms C-001..C-021, core molecules, M9 field molecules — each with ID + live thumbnail.
// IDs anchored to the screen-spec inventory (C-001 Button, C-007 Date-range, C-101 Top app
// bar, C-103 Side nav, C-105 Empty state, C-110 KPI card, C-201 Data table); the rest follow
// the same scheme and are marked provisional until the full inventory is supplied.

const { useState: useS } = React;
const Ico = window.Icons;
const { Button, IconButton, Badge, StatusBadge, SeverityBadge, JourneyBadge, Card, CardHead,
        Kpi, Avatar, Progress, Switch, Tabs, StatusDot, Sparkline, BarChart, Donut, Empty,
        Drawer, Modal } = window;

// ─── Specimen frame ───
const Spec = ({ id, name, provisional, wide, children }) => (
  <div className={`cx-spec${wide ? " wide" : ""}`}>
    <div className="cx-spec-stage">{children}</div>
    <div className="cx-spec-foot">
      <span className="cx-id">{id}{provisional && <i title="Provisional ID — confirm against inventory">*</i>}</span>
      <span className="cx-name">{name}</span>
    </div>
  </div>
);

const SwitchDemo = () => { const [on, setOn] = useS(true); return <div className="row" style={{gap:10}}><Switch checked={on} onChange={setOn} /><span className="text-body-sm muted">{on ? "On" : "Off"}</span></div>; };
const TabsDemo = () => { const [v, setV] = useS("all"); return <Tabs value={v} onChange={setV} options={[{value:"all",label:"All"},{value:"open",label:"Open"},{value:"closed",label:"Closed"}]} />; };
const DrawerDemo = () => { const [o, setO] = useS(false); return (<><Button size="sm" variant="outline" onClick={()=>setO(true)}>Open drawer</Button><Drawer open={o} onClose={()=>setO(false)} title="Requirement details" sub="PR-2026-0184"><div className="text-body-sm muted">Drawer body content slides in from the right.</div></Drawer></>); };
const ModalDemo = () => { const [o, setO] = useS(false); return (<><Button size="sm" variant="outline" onClick={()=>setO(true)}>Open modal</Button><Modal open={o} onClose={()=>setO(false)} title="Confirm award" sub="3 farmers · 18,500 kg" footer={<><Button variant="ghost" onClick={()=>setO(false)}>Cancel</Button><Button variant="primary" onClick={()=>setO(false)}>Confirm</Button></>}><div className="text-body-sm muted">Modal dialog content.</div></Modal></>); };

// ─── Section ───
const CxSection = ({ num, title, desc, children }) => (
  <section className="cx-section">
    <div className="cx-section-head">
      <span className="cx-secnum">{num}</span>
      <div><h2 className="text-heading-2">{title}</h2>{desc && <p className="cx-desc">{desc}</p>}</div>
    </div>
    <div className="cx-grid">{children}</div>
  </section>
);

const CxPage = () => {
  const [dark, setDark] = useS(false);
  React.useEffect(() => { document.documentElement.classList.toggle("dark", dark); }, [dark]);

  return (
    <div className="cx-root">
      <header className="cx-header">
        <div className="cx-header-inner">
          <div className="row" style={{ gap: 12 }}>
            <span className="cx-mark"><Ico.Leaf size={20} /></span>
            <div>
              <div className="text-heading-3">Components — index</div>
              <div className="cx-desc" style={{ margin: 0 }}>AMOMS Design System · matches inventory IDs</div>
            </div>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <a className="btn btn-outline btn-sm" href="design-system.html"><Ico.Layers size={14} />Foundations</a>
            <button className="btn btn-outline btn-sm" onClick={() => setDark(d => !d)}>{dark ? <Ico.Sun size={14}/> : <Ico.Moon size={14}/>}{dark ? "Light" : "Dark"}</button>
          </div>
        </div>
      </header>

      <main className="cx-main">
        <div className="cx-note">
          <Ico.Info size={15} />
          <div><b>Icon library:</b> currently the built-in Lucide-style set. The guide recommends <b>Phosphor</b> for breadth — can be swapped in wholesale on request. <span className="muted">IDs marked <i>*</i> are provisional pending the full component inventory.</span></div>
        </div>

        {/* Atoms */}
        <CxSection num="Atoms" title="C-001 – C-021" desc="Foundational, indivisible controls. Includes the new journey-state pill (C-012).">
          <Spec id="C-001" name="Button">
            <div className="col" style={{ gap: 8, alignItems: "flex-start" }}>
              <div className="row" style={{ gap: 6 }}><Button variant="primary" size="sm">Primary</Button><Button variant="outline" size="sm">Outline</Button></div>
              <div className="row" style={{ gap: 6 }}><Button variant="soil" size="sm">Soil</Button><Button variant="ghost" size="sm">Ghost</Button></div>
            </div>
          </Spec>
          <Spec id="C-002" name="Icon button"><div className="row" style={{gap:6}}><IconButton icon={Ico.Plus} /><IconButton icon={Ico.Edit} variant="ghost" /><IconButton icon={Ico.Trash} variant="outline" /></div></Spec>
          <Spec id="C-003" name="Text input"><input className="input" placeholder="Target quantity (kg)" defaultValue="28,000" /></Spec>
          <Spec id="C-004" name="Select" provisional><select className="select" defaultValue="Hass"><option>Hass</option><option>Fuerte</option><option>Pinkerton</option></select></Spec>
          <Spec id="C-005" name="Textarea" provisional><textarea className="textarea" rows="2" defaultValue="Delivery notes…" style={{minHeight:60}} /></Spec>
          <Spec id="C-006" name="Checkbox" provisional><label className="row" style={{gap:8, fontSize:13}}><input type="checkbox" defaultChecked style={{width:16,height:16, accentColor:"var(--avocado)"}} />Export grade only</label></Spec>
          <Spec id="C-007" name="Date-range picker"><button className="btn btn-outline btn-sm"><Ico.Calendar size={14}/>Last 30 days<Ico.ChevronDown size={13}/></button></Spec>
          <Spec id="C-008" name="Switch / toggle" provisional><SwitchDemo /></Spec>
          <Spec id="C-009" name="Radio group" provisional><div className="col" style={{gap:6, fontSize:13}}><label className="row" style={{gap:8}}><input type="radio" name="g" defaultChecked style={{accentColor:"var(--avocado)"}}/>App + SMS</label><label className="row" style={{gap:8}}><input type="radio" name="g" style={{accentColor:"var(--avocado)"}}/>App only</label></div></Spec>
          <Spec id="C-010" name="Status pill"><div className="cx-wrap"><StatusBadge status="pending"/><StatusBadge status="approved"/><StatusBadge status="rejected"/></div></Spec>
          <Spec id="C-011" name="Severity tag"><div className="cx-wrap"><SeverityBadge level="low"/><SeverityBadge level="medium"/><SeverityBadge level="high"/><SeverityBadge level="critical"/></div></Spec>
          <Spec id="C-012" name="Journey-state pill"><div className="cx-wrap"><JourneyBadge stage="aware"/><JourneyBadge stage="growing"/><JourneyBadge stage="first-harvest"/></div></Spec>
          <Spec id="C-013" name="Badge / count" provisional><div className="cx-wrap"><Badge tone="avocado">Hass</Badge><Badge tone="outline">12</Badge><Badge tone="soil">Export</Badge></div></Spec>
          <Spec id="C-014" name="Avatar" provisional><div className="row" style={{gap:6}}><Avatar initials="CW" tone="avocado"/><Avatar initials="EN" tone="soil"/><Avatar initials="MW" tone="pulp"/></div></Spec>
          <Spec id="C-015" name="Progress bar" provisional><div style={{width:"100%"}}><Progress value={68}/></div></Spec>
          <Spec id="C-016" name="Tabs / segmented" provisional><TabsDemo /></Spec>
          <Spec id="C-017" name="Tooltip" provisional><span className="row" style={{gap:6, fontSize:13}} title="Avg time from broadcast to first response.">Avg response <Ico.Info size={14} style={{color:"var(--muted-foreground)"}}/></span></Spec>
          <Spec id="C-018" name="Status dot" provisional><div className="row" style={{gap:14}}><span className="row" style={{gap:6,fontSize:12}}><StatusDot tone="success"/>Live</span><span className="row" style={{gap:6,fontSize:12}}><StatusDot tone="warning" pulse/>Due</span><span className="row" style={{gap:6,fontSize:12}}><StatusDot tone="danger"/>Over</span></div></Spec>
          <Spec id="C-019" name="Breadcrumb" provisional><div className="tb-crumbs" style={{fontSize:12.5}}><span>Operations</span><span className="sep">/</span><span className="now">Procurement</span></div></Spec>
          <Spec id="C-020" name="Search field" provisional><div className="tb-search" style={{minWidth:0, width:"100%"}}><Ico.Search size={14}/><span>Search…</span><span className="kbd-chip">⌘K</span></div></Spec>
          <Spec id="C-021" name="Filter chip" provisional><div className="cx-wrap"><span className="cx-chip">Hass <Ico.X size={12}/></span><span className="cx-chip">Open <Ico.X size={12}/></span></div></Spec>
        </CxSection>

        {/* Core molecules */}
        <CxSection num="Molecules" title="Core molecules" desc="Composed from atoms — the building blocks of every screen.">
          <Spec id="C-110" name="KPI tile" wide><Kpi label="Open requirements" value="12" /></Spec>
          <Spec id="C-111" name="KPI tile + delta" wide provisional><Kpi label="Confirmed orders" value="8" delta="14%" deltaDir="up" /></Spec>
          <Spec id="C-120" name="Card" wide provisional>
            <Card style={{width:"100%"}}><CardHead title="Card title" desc="Supporting description" /><div className="card-body" style={{paddingTop:0}}><div className="text-body-sm muted">Card body content.</div></div></Card>
          </Spec>
          <Spec id="C-130" name="Alert banner" wide provisional>
            <div className="alert alert-warning" style={{width:"100%"}}><span className="alert-icon"><Ico.Warning size={16}/></span><div className="alert-body"><div className="alert-title">Cold Store C below threshold</div><div className="alert-desc">2,100 kg remaining.</div></div></div>
          </Spec>
          <Spec id="C-201" name="Data table" wide>
            <div className="tbl-wrap" style={{width:"100%", border:"1px solid var(--border)"}}>
              <table className="tbl"><thead><tr><th>ID</th><th>Variety</th><th>Status</th></tr></thead>
              <tbody>
                <tr><td className="mono" style={{fontSize:12}}>PR-0184</td><td><Badge tone="avocado">Hass</Badge></td><td><StatusBadge status="open"/></td></tr>
                <tr><td className="mono" style={{fontSize:12}}>PR-0182</td><td><Badge tone="avocado">Hass</Badge></td><td><StatusBadge status="approved"/></td></tr>
              </tbody></table>
            </div>
          </Spec>
          <Spec id="C-101" name="Top app bar" wide>
            <div className="cx-topbar"><Ico.Menu size={16}/><div className="tb-crumbs" style={{fontSize:12.5}}><span className="now">Procurement</span></div><div style={{flex:1}}/><Ico.Search size={15}/><Ico.Bell size={15}/><Avatar initials="CW" tone="avocado" size="sm"/></div>
          </Spec>
          <Spec id="C-103" name="Side navigation" provisional>
            <div className="cx-sidenav"><a className="sb-link active"><Ico.Procurement size={15} className="icon"/><span>Procurement</span></a><a className="sb-link"><Ico.Production size={15} className="icon"/><span>Production</span></a><a className="sb-link"><Ico.Inventory size={15} className="icon"/><span>Inventory</span></a></div>
          </Spec>
          <Spec id="C-105" name="Empty state block" wide><Empty title="No requirements" desc="Create your first requirement to begin." /></Spec>
          <Spec id="C-140" name="Drawer / sheet" provisional><DrawerDemo /></Spec>
          <Spec id="C-141" name="Modal dialog" provisional><ModalDemo /></Spec>
          <Spec id="C-150" name="Toast" wide provisional>
            <div className="toast" style={{position:"static", minWidth:0, width:"100%", boxShadow:"none", border:"1px solid var(--border)"}}><span className="toast-icon"><Ico.CheckCircle size={16}/></span><div className="toast-body"><div className="toast-title">Requirement broadcast</div><div className="toast-desc">Sent to 142 farmers.</div></div></div>
          </Spec>
        </CxSection>

        {/* Charts */}
        <CxSection num="Charts" title="Data-viz components" desc="Use only the data-viz palette (cat/1–5 + sequential ramp).">
          <Spec id="C-210" name="Sparkline" provisional><div style={{width:"100%"}}><Sparkline data={window.MD ? window.MD.SPARK.intake : [4,6,5,8,9,7,11,13]} /></div></Spec>
          <Spec id="C-211" name="Bar chart" wide provisional><div style={{width:"100%"}}><BarChart data={[6,8,9,11,12,14]} labels={["M","T","W","T","F","S"]} height={110} /></div></Spec>
          <Spec id="C-212" name="Donut" provisional><Donut value={68} label="Capacity" /></Spec>
        </CxSection>

        {/* M9 molecules */}
        <CxSection num="M9" title="Field molecules (mobile)" desc="Module 9 — GPS check-in, visit summary, commitment capture, help request.">
          <Spec id="M9-01" name="GPS check-in tile" wide><window.GpsCheckinTile /></Spec>
          <Spec id="M9-02" name="Visit summary card" wide><window.VisitSummaryCard /></Spec>
          <Spec id="M9-03" name="Commitment capture card" wide><window.CommitmentCaptureCard /></Spec>
          <Spec id="M9-04" name="Help request card" wide><window.HelpRequestCard /></Spec>
        </CxSection>
      </main>
    </div>
  );
};

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