/* global React, Icon, Button, IconBtn, Chip, Badge, Pill, Avatar, Field, Input, Textarea, Select, Toggle, Slider,
   Tabs, Segmented, Accordion, Sparkline, LineChart, BarChart, AreaChart, Donut, KPICard, StatBlock,
   StatusPill, Banner, EmptyState, MOCK, PageHead, Breadcrumb */

const { useState: useStateG } = React;

function GallerySection({ id, eyebrow, title, children }) {
  return (
    <section data-screen-label={`gallery-${id}`} style={{ paddingTop: 48, scrollMarginTop: 96 }}>
      <div className="col gap-4" style={{ marginBottom: 24, paddingBottom: 16, borderBottom: "1px solid var(--line)" }}>
        <span className="eyebrow">{eyebrow}</span>
        <h2 className="h-2" style={{ fontSize: 32 }}>{title}</h2>
      </div>
      {children}
    </section>
  );
}

function Cell({ label, children, span = 1 }) {
  return (
    <div className="card" style={{ padding: 20, gridColumn: `span ${span}`, display: "flex", flexDirection: "column", gap: 14 }}>
      <span className="mono" style={{ color: "var(--ink-3)" }}>{label.toUpperCase()}</span>
      <div className="row gap-8 wrap" style={{ alignItems: "center", flex: 1 }}>{children}</div>
    </div>
  );
}

function GalleryScreen() {
  const [tab, setTab] = useStateG("audits");
  const [seg, setSeg] = useStateG("week");
  const [slider, setSlider] = useStateG(64);

  return (
    <div className="page-body" data-screen-label="gallery">
      <PageHead
        breadcrumb={<Breadcrumb items={[{ label: "Design system" }, { label: "Components" }]}/>}
        eyebrow="UI · v4.1 · 2026"
        title="Components,"
        gradWord="catalogued."
        lead="The full primitive set, in editorial order. Same system that powers Catalyst, BrandLens, HIVE, and Milton.AI."
      />

      <GallerySection id="buttons" eyebrow="01 · Action" title="Buttons & icon buttons">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
          <Cell label="Primary · gradient">
            <Button variant="primary">Run audit</Button>
            <Button variant="primary" icon={<Icon.Bolt size={14}/>}>Run Catalyst</Button>
            <Button variant="primary" iconRight={<Icon.ArrowRight size={14}/>}>Continue</Button>
            <Button variant="primary" size="sm">Small</Button>
            <Button variant="primary" disabled>Disabled</Button>
          </Cell>
          <Cell label="Ink · solid black">
            <Button variant="ink">Confirm</Button>
            <Button variant="ink" icon={<Icon.Check size={14}/>}>Approve</Button>
            <Button variant="ink" size="sm">Small</Button>
          </Cell>
          <Cell label="Secondary · outlined">
            <Button variant="secondary">Cancel</Button>
            <Button variant="secondary" icon={<Icon.Filter size={14}/>}>Filters</Button>
            <Button variant="secondary" size="sm">Small</Button>
          </Cell>
          <Cell label="Ghost · text only">
            <Button variant="ghost">Skip</Button>
            <Button variant="ghost" icon={<Icon.Plus size={14}/>}>Add field</Button>
            <Button variant="ghost" iconRight={<Icon.ArrowRight size={12}/>}>Inbox</Button>
          </Cell>
          <Cell label="Danger">
            <Button variant="danger">Delete</Button>
            <Button variant="danger" icon={<Icon.Trash size={14}/>}>Delete workspace</Button>
          </Cell>
          <Cell label="Icon buttons">
            <IconBtn icon={<Icon.Search size={14}/>}/>
            <IconBtn icon={<Icon.Bell size={14}/>}/>
            <IconBtn icon={<Icon.Settings size={14}/>}/>
            <IconBtn icon={<Icon.MoreV size={14}/>}/>
            <IconBtn icon={<Icon.Plus size={14}/>} variant="primary"/>
          </Cell>
        </div>
      </GallerySection>

      <GallerySection id="chips" eyebrow="02 · Tagging" title="Chips, badges, pills">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          <Cell label="Chips">
            <Chip>Default</Chip>
            <Chip onRemove={() => {}}>MIA · Strategy</Chip>
            <Chip onRemove={() => {}}>Diagnose phase</Chip>
            <Chip selected>Selected</Chip>
          </Cell>
          <Cell label="Badges">
            <Badge>Beta</Badge>
            <Badge tone="grad">12 NEW</Badge>
            <Badge tone="warn">Stalled</Badge>
            <Badge tone="pos">Live</Badge>
            <Badge tone="info">Draft</Badge>
            <Badge tone="neg">Failed</Badge>
          </Cell>
          <Cell label="Pills + status">
            <Pill dot>Active</Pill>
            <Pill dot tone="warn">Review</Pill>
            <StatusPill status="active"/>
            <StatusPill status="review"/>
            <StatusPill status="shipped"/>
          </Cell>
        </div>
      </GallerySection>

      <GallerySection id="forms" eyebrow="03 · Input" title="Forms">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
          <Cell label="Text & email">
            <div className="col gap-12" style={{ width: "100%" }}>
              <Field label="Work email"><Input value="ines@bnmrglvz.com" onChange={() => {}} icon={<Icon.Mail size={14}/>}/></Field>
              <Field label="Search" hint="Start typing…"><Input placeholder="Search audits…" icon={<Icon.Search size={14}/>} onChange={() => {}}/></Field>
              <Field label="Disabled"><Input value="Read-only" onChange={() => {}} disabled/></Field>
              <Field label="Error" error="Email is already in use"><Input value="ines@bnmrglvz.com" onChange={() => {}} error/></Field>
            </div>
          </Cell>
          <Cell label="Select & textarea">
            <div className="col gap-12" style={{ width: "100%" }}>
              <Field label="Office"><Select value="MIA · Strategy" onChange={() => {}} options={["MIA · Strategy", "NYC · 722", "SCL · 403"]} placeholder=""/></Field>
              <Field label="Brief"><Textarea value="Why has CAC risen 28% on stable LTV?" onChange={() => {}} rows={3}/></Field>
            </div>
          </Cell>
          <Cell label="Toggle & slider">
            <div className="col gap-16" style={{ width: "100%" }}>
              <Toggle checked={true} onChange={() => {}} label="Editorial reveals" description="22px translateY + opacity, 1s cubic-bezier."/>
              <Toggle checked={false} onChange={() => {}} label="Beta features"/>
              <Field label={`Confidence threshold · ${slider}%`}>
                <Slider value={slider} onChange={setSlider} min={0} max={100}/>
              </Field>
            </div>
          </Cell>
          <Cell label="Tabs & segmented">
            <div className="col gap-16" style={{ width: "100%" }}>
              <Tabs value={tab} onChange={setTab} items={[
                { value: "audits", label: "Audits", count: 38 },
                { value: "agents", label: "Agents", count: 14 },
                { value: "prompts", label: "Prompts", count: 450 },
              ]}/>
              <Segmented value={seg} onChange={setSeg} items={[
                { value: "day", label: "Day" }, { value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "qtr", label: "Qtr" },
              ]}/>
            </div>
          </Cell>
        </div>
      </GallerySection>

      <GallerySection id="data" eyebrow="04 · Data" title="KPI cards & charts">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 16 }}>
          <KPICard label="Decisions" value="1,284" delta={12.4} spark={MOCK.s30}/>
          <KPICard label="Audits" value="38" delta={-3.1} spark={MOCK.s30b}/>
          <KPICard label="Forecast lift" value="+11%" gradient delta={null} deltaLabel="Conservative"/>
          <KPICard label="Cycle time" value="11.3d" delta={-8.2} spark={MOCK.s30}/>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
          <div className="card" style={{ padding: 0 }}>
            <div className="row between" style={{ padding: "16px 20px", borderBottom: "1px solid var(--line)" }}>
              <span className="eyebrow">Line · gradient</span>
              <Sparkline data={MOCK.s30} w={80} h={20}/>
            </div>
            <div style={{ padding: 12 }}><LineChart series={[{ data: MOCK.s30, color: "var(--brand-grad)" }]} h={200}/></div>
          </div>
          <div className="card" style={{ padding: 0 }}>
            <div className="row between" style={{ padding: "16px 20px", borderBottom: "1px solid var(--line)" }}>
              <span className="eyebrow">Area</span>
            </div>
            <div style={{ padding: 12 }}><AreaChart data={MOCK.s30b} h={200}/></div>
          </div>
          <div className="card" style={{ padding: 0 }}>
            <div className="row between" style={{ padding: "16px 20px", borderBottom: "1px solid var(--line)" }}>
              <span className="eyebrow">Bar · 12 months</span>
            </div>
            <div style={{ padding: 12 }}><BarChart data={MOCK.bars12} labels={MOCK.s12m} h={200}/></div>
          </div>
          <div className="card" style={{ padding: 24 }}>
            <span className="eyebrow">Donut</span>
            <div className="row gap-24" style={{ marginTop: 16, alignItems: "center" }}>
              <Donut value={68} size={140} label="68%" sub="Suite adoption"/>
              <div className="col gap-6" style={{ flex: 1 }}>
                <StatBlock label="Active" value="38"/>
                <StatBlock label="Shipped" value="129"/>
              </div>
            </div>
          </div>
        </div>
      </GallerySection>

      <GallerySection id="states" eyebrow="05 · State" title="Banners, empty, loading, error">
        <div className="col gap-16">
          <Banner tone="grad" title="Diagnose phase complete — 4 high-confidence issues found"
            body="Milton.AI surfaced 4 issues worth simulating."
            action={<Button variant="ink" size="sm">Open simulator</Button>}/>
          <Banner tone="warn" title="Assumption locked window closes Friday"
            body="Catalyst will fall back to defaults if assumptions aren't confirmed by 17:00 MIA."/>
          <Banner tone="pos" title="Forecast shipped to Northbeam"
            body="Delivered at 09:42 MIA. Inés Vidal signed off."/>
          <Banner tone="info" title="14 agents updated to Milton-IDX v2"
            body="Re-run any audit indexed before today to pick up the new embeddings."/>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 16 }}>
          <div className="card"><EmptyState ph="var(--ph-pink)" code="01" title="No audits yet" body="Diagnose before you prescribe. Start one." cta="Run audit"/></div>
          <div className="card"><EmptyState ph="var(--ph-teal)" code="02" title="Loading the loop" body="Milton.AI is indexing 12k assets." loading/></div>
          <div className="card"><EmptyState ph="var(--ph-orange)" code="ERR" title="Connection dropped" body="Snowflake returned 504. Retry or check your VPN." cta="Retry" tone="error"/></div>
        </div>
      </GallerySection>

      <GallerySection id="logos" eyebrow="06 · Brand" title="Wordmark & lockups">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <div className="card" style={{ padding: 32, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 180 }}>
            <img src="assets/wordmark-inline.svg" alt="BENAMOR GALVEZ" style={{ height: 28 }}/>
          </div>
          <div className="card" style={{ padding: 32, background: "var(--brand-grad-band)", display: "flex", alignItems: "center", justifyContent: "center", minHeight: 180 }}>
            <img src="assets/wordmark-inline-white.svg" alt="BENAMOR GALVEZ" style={{ height: 28 }}/>
          </div>
        </div>
      </GallerySection>
    </div>
  );
}

Object.assign(window, { GalleryScreen });