/* /#/design-system — every component, every state.
 *
 * Used to verify the design rules in spec section 2.5 hold across the
 * library without having to navigate the real app. Hidden from primary
 * navigation; accessed by URL hash only.
 */
(function () {
  const { useState } = React;
  const {
    Button,
    Card,
    Pill,
    Avatar,
    Input,
    TextArea,
    SegmentedControl,
    Drawer,
    EmptyState,
    LoadingSpinner,
    Banner,
    Icons,
    showToast,
    tokens,
  } = window.CC;

  function DesignSystem({ onBack }) {
    const [seg, setSeg] = useState("ideas");
    const [seg2, setSeg2] = useState("all");
    const [text, setText] = useState("");
    const [textArea, setTextArea] = useState("");
    const [drawerOpen, setDrawerOpen] = useState(false);

    const Section = ({ id, title, children }) => (
      <section className="cc-ds__section" id={id}>
        <h2 className="cc-ds__h2">{title}</h2>
        {children}
      </section>
    );

    const Row = ({ children, label }) => (
      <>
        {label && <h3 className="cc-ds__h3">{label}</h3>}
        <div className="cc-ds__row">{children}</div>
      </>
    );

    return (
      <div className="cc-ds">
        <div className="cc-ds__nav">
          <h1 className="cc-ds__title">Design system</h1>
          <a href="#/" className="cc-ds__back" onClick={onBack}>
            ← back
          </a>
        </div>

        <Section title="Buttons">
          <Row label="Variants">
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="ghost">Ghost</Button>
            <Button variant="danger">Danger</Button>
          </Row>
          <Row label="Sizes">
            <Button size="sm" variant="primary">Small</Button>
            <Button size="md" variant="primary">Medium</Button>
            <Button size="lg" variant="primary">Large</Button>
            <Button size="xl" variant="primary">Extra large</Button>
          </Row>
          <Row label="States">
            <Button>Default</Button>
            <Button disabled>Disabled</Button>
            <Button loading>Loading</Button>
            <Button icon={Icons.plus(16)}>With icon</Button>
            <Button iconRight={Icons.chevronRight(16)} variant="secondary">
              With icon right
            </Button>
          </Row>
        </Section>

        <Section title="Cards">
          <div className="cc-ds__grid">
            <Card variant="elevated">
              <strong>Elevated</strong>
              <div style={{ color: tokens.colors.textMuted, fontSize: 13, marginTop: 4 }}>
                Default. Layered shadow.
              </div>
            </Card>
            <Card variant="flat">
              <strong>Flat</strong>
              <div style={{ color: tokens.colors.textMuted, fontSize: 13, marginTop: 4 }}>
                No shadow.
              </div>
            </Card>
            <Card variant="elevated" onClick={() => showToast("Card tapped.")}>
              <strong>Interactive</strong>
              <div style={{ color: tokens.colors.textMuted, fontSize: 13, marginTop: 4 }}>
                Hover and tap states.
              </div>
            </Card>
          </div>
        </Section>

        <Section title="Pills (status)">
          <Row>
            <Pill tone="member">Member</Pill>
            <Pill tone="onTrack">On track</Pill>
            <Pill tone="due">Due</Pill>
            <Pill tone="overdue">Overdue</Pill>
            <Pill tone="lost">Lost</Pill>
            <Pill tone="other">Other</Pill>
          </Row>
          <Row label="Sizes">
            <Pill tone="member" size="sm">Small</Pill>
            <Pill tone="member" size="md">Medium</Pill>
            <Pill tone="member" size="lg">Large</Pill>
          </Row>
        </Section>

        <Section title="Avatars">
          <Row>
            <Avatar coach="simon" size={24} label="Simon" />
            <Avatar coach="simon" size={32} label="Simon" />
            <Avatar coach="simon" size={40} label="Simon" />
            <Avatar coach="perrie" size={24} label="Perrie" />
            <Avatar coach="perrie" size={32} label="Perrie" />
            <Avatar coach="perrie" size={40} label="Perrie" />
          </Row>
        </Section>

        <Section title="Inputs">
          <div style={{ display: "grid", gap: 24, maxWidth: 480 }}>
            <Input
              label="Member name"
              value={text}
              onChange={setText}
              placeholder="Type a name"
            />
            <Input
              label="Search"
              value=""
              onChange={() => {}}
              placeholder="Find an entry"
              icon={Icons.search(16)}
            />
            <Input
              label="Disabled"
              value="Locked value"
              onChange={() => {}}
              disabled
            />
            <TextArea
              label="Anything else"
              value={textArea}
              onChange={setTextArea}
              placeholder="Type or tap mic to record."
            />
          </div>
        </Section>

        <Section title="Segmented control">
          <Row>
            <SegmentedControl
              value={seg}
              onChange={setSeg}
              options={[
                { label: "Ideas", value: "ideas" },
                { label: "Scheduled", value: "scheduled" },
                { label: "Done", value: "done" },
              ]}
            />
          </Row>
          <Row label="Larger, four options">
            <SegmentedControl
              size="lg"
              value={seg2}
              onChange={setSeg2}
              options={[
                { label: "All", value: "all" },
                { label: "Member", value: "member" },
                { label: "Class", value: "class" },
                { label: "Notes", value: "notes" },
              ]}
            />
          </Row>
        </Section>

        <Section title="Drawer">
          <Row>
            <Button onClick={() => setDrawerOpen(true)}>Open drawer</Button>
          </Row>
          <Drawer
            open={drawerOpen}
            onClose={() => setDrawerOpen(false)}
            title="Member update"
            footer={
              <Button fullWidth onClick={() => setDrawerOpen(false)}>
                Save
              </Button>
            }
          >
            <p style={{ color: tokens.colors.textMuted, marginTop: 0 }}>
              Phase 2 wires up the real capture flow.
            </p>
            <Input label="Member" placeholder="Type a name" value="" onChange={() => {}} />
          </Drawer>
        </Section>

        <Section title="Toasts">
          <Row>
            <Button variant="secondary" onClick={() => showToast("Saved.")}>
              Plain
            </Button>
            <Button
              variant="secondary"
              onClick={() =>
                showToast("Entry deleted.", {
                  action: { label: "Undo", onClick: () => showToast("Restored.") },
                })
              }
            >
              With undo
            </Button>
            <Button
              variant="secondary"
              onClick={() =>
                showToast("Couldn’t save. Retry?", {
                  action: { label: "Retry", onClick: () => showToast("Saved.") },
                })
              }
            >
              Error-style
            </Button>
          </Row>
        </Section>

        <Section title="Empty states">
          <Card>
            <EmptyState
              icon={Icons.note(40)}
              title="Nothing logged yet today"
              subtitle="The capture buttons live on the home tab."
            />
          </Card>
        </Section>

        <Section title="Spinner">
          <Row>
            <span style={{ color: tokens.colors.primary }}>
              <LoadingSpinner size="sm" delay={0} />
            </span>
            <span style={{ color: tokens.colors.primary }}>
              <LoadingSpinner size="md" delay={0} />
            </span>
            <span style={{ color: tokens.colors.primary }}>
              <LoadingSpinner size="lg" delay={0} />
            </span>
          </Row>
        </Section>

        <Section title="Banners">
          <div style={{ display: "grid", gap: 12 }}>
            <Banner tone="info" message="3 things to finish setting up" action={{ label: "Open", onClick: () => {} }} onDismiss={() => {}} />
            <Banner tone="warning" message="Sheet refresh stale (45 min)" action={{ label: "Refresh", onClick: () => {} }} />
            <Banner tone="error" message="Couldn’t reach Firebase. Cached data only." />
            <Banner tone="success" message="Connected to Google Sheets." />
          </div>
        </Section>

        <Section title="Icons">
          <div className="cc-ds__grid">
            {Object.entries(Icons).map(([name, render]) => (
              <Card key={name} variant="flat" padding={12}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <span style={{ color: tokens.colors.text }}>{render(20)}</span>
                  <span style={{ fontFamily: tokens.typography.fontMono, fontSize: 12, color: tokens.colors.textMuted }}>
                    {name}
                  </span>
                </div>
              </Card>
            ))}
          </div>
        </Section>

        <Section title="Colour tokens">
          <div className="cc-ds__grid">
            {[
              ["primary", tokens.colors.primary],
              ["bg", tokens.colors.bg],
              ["surface", tokens.colors.surface],
              ["text", tokens.colors.text],
              ["text-muted", tokens.colors.textMuted],
              ["text-dim", tokens.colors.textDim],
              ["status.member", tokens.colors.status.member],
              ["status.onTrack", tokens.colors.status.onTrack],
              ["status.overdue", tokens.colors.status.overdue],
              ["status.due", tokens.colors.status.due],
              ["status.lost", tokens.colors.status.lost],
              ["coach.simon", tokens.colors.coach.simon],
              ["coach.perrie", tokens.colors.coach.perrie],
              ["ivory", tokens.colors.ivory],
            ].map(([name, value]) => (
              <div
                key={name}
                className="cc-ds__swatch"
                style={{
                  background: value,
                  color: ["bg", "surface", "ivory"].includes(name)
                    ? tokens.colors.text
                    : "#fff",
                }}
              >
                <span className="cc-ds__swatch__name" style={{ color: "inherit" }}>{name}</span>
                <span className="cc-ds__swatch__value" style={{ color: "inherit", opacity: 0.85 }}>{value}</span>
              </div>
            ))}
          </div>
        </Section>

        <Section title="Spacing scale">
          <Row>
            {tokens.space.map((s) => (
              <div key={s} style={{ textAlign: "center", fontFamily: tokens.typography.fontMono, fontSize: 11, color: tokens.colors.textMuted }}>
                <div style={{ width: s, height: 24, background: tokens.colors.primary, borderRadius: 2, margin: "0 auto 4px" }} />
                {s}
              </div>
            ))}
          </Row>
        </Section>

        <Section title="Type scale">
          {[
            ["display", 48, 700, 1],
            ["h1", 30, 700, 1.15],
            ["h2", 20, 600, 1.25],
            ["h3", 16, 600, 1.4],
            ["body", 15, 400, 1.55],
            ["caption", 13, 500, 1.4],
          ].map(([name, size, weight, lh]) => (
            <div key={name} style={{ marginBottom: 12 }}>
              <span style={{ fontFamily: tokens.typography.fontMono, fontSize: 11, color: tokens.colors.textMuted, marginRight: 12 }}>
                {name} · {size}/{lh} / {weight}
              </span>
              <span style={{ fontSize: size, fontWeight: weight, lineHeight: lh, color: tokens.colors.text }}>
                The quick brown fox jumps.
              </span>
            </div>
          ))}
          <div style={{ marginTop: 16 }}>
            <span style={{ fontFamily: tokens.typography.fontMono, fontSize: 14, color: tokens.colors.text }}>
              Mono · 12 May 2026 · 14:23
            </span>
          </div>
        </Section>
      </div>
    );
  }

  window.CC = Object.assign(window.CC || {}, { DesignSystem });
})();