/* ELEV8 ATS - screen: Components & tokens sheet. Every primitive, live. */

const DSs = window.Stand8DesignSystem_b5c975;

function TokenSwatch({ name, value, text }) {
  /* Swatch renders the LIVE token (value is only the fallback + caption), so dark mode shows dark values. */
  const live = name && name.startsWith('--') ? `var(${name}, ${value})` : value;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 0' }}>
      <span style={{ width: 28, height: 28, borderRadius: 7, background: live, border: '1px solid var(--ui-border)', flex: 'none' }}></span>
      <span style={{ minWidth: 0 }}>
        <code style={{ display: 'block', fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text)', fontFamily: 'var(--font-body)', fontWeight: 500 }}>{name}</code>
        <span className="tnum" style={{ fontSize: 'var(--ui-text-xs)', color: 'var(--ui-text-tertiary)' }}>{text || value}</span>
      </span>
    </div>
  );
}

function SheetSection({ title, sub, children }) {
  return (
    <section style={{ marginBottom: 36 }}>
      <h2 style={{ fontSize: 'var(--ui-text-xl)', marginBottom: 2 }}>{title}</h2>
      {sub ? <div style={{ fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text-tertiary)', marginBottom: 14 }}>{sub}</div> : <div style={{ marginBottom: 14 }}></div>}
      {children}
    </section>
  );
}

function SpecimenRow({ label, children }) {
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '8px 0', borderBottom: '1px solid var(--ui-border)', flexWrap: 'wrap' }}>
      <span style={{ width: 150, flex: 'none', fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text-tertiary)' }}>{label}</span>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', flex: 1 }}>{children}</div>
    </div>
  );
}

function SystemScreen() {
  const { showToast } = React.useContext(E8Ctx);
  const reasons = [
    { label: 'Java 17 + Spring Boot depth', weight: 3 },
    { label: 'Located in Memphis, TN', weight: 2 },
    { label: 'No Kubernetes on profile', weight: -1 },
  ];
  return (
    <React.Fragment>
      <Topbar crumbs={[{ label: 'Components & tokens' }]} actions={<DSs.Button variant="secondary" size="sm" icon="open_in_new" onClick={() => showToast('Cards for each component live in the Design System tab')}>Design System tab</DSs.Button>} />
      <div className="e8-content">
        <div className="e8-page" style={{ maxWidth: 1080 }}>
          <div className="e8-pagehead">
            <div>
              <h1>Components &amp; tokens</h1>
              <div className="e8-pagehead-sub">The ELEV8 product UI layer - built on the Stand8 brand palette. Everything on this page is the live component, not a picture of it.</div>
            </div>
          </div>

          <SheetSection title="Color tokens" sub="Cobalt is the only interactive color · Daybreak is the soft accent · semantic base tokens anchor dots and fills, the -text tier is the readable ink">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '4px 20px' }}>
              <div>
                <div className="e8-sectionlabel" style={{ margin: '6px 0' }}>Neutrals</div>
                <TokenSwatch name="--ui-surface" value="#FFFFFF" />
                <TokenSwatch name="--ui-bg-app" value="#F7F7F9" />
                <TokenSwatch name="--ui-fill" value="#F2F2F5" />
                <TokenSwatch name="--ui-border" value="#EAEAEE" />
                <TokenSwatch name="--ui-border-strong" value="#DCDCE3" />
                <TokenSwatch name="--ui-text-tertiary" value="#8E8E9A" />
                <TokenSwatch name="--ui-text-secondary" value="#5A5A66" />
                <TokenSwatch name="--ui-text" value="#191922" />
              </div>
              <div>
                <div className="e8-sectionlabel" style={{ margin: '6px 0' }}>Interactive & accents</div>
                <TokenSwatch name="--ui-accent" value="#5215FC" text="#5215FC · Cobalt" />
                <TokenSwatch name="--ui-accent-tint" value="#EFEBFF" text="cobalt wash · active states" />
                <TokenSwatch name="--ui-accent-tint-2" value="var(--ui-accent-tint-2)" text="color-mix 14% · soft-button hover" />
                <TokenSwatch name="--ui-ring" value="var(--ui-ring)" text="color-mix 30% · input focus halo" />
                <TokenSwatch name="--ui-link" value="#0668DE" text="#0668DE · inline links" />
                <TokenSwatch name="--ui-daybreak" value="#ABB1FF" text="#ABB1FF · Daybreak" />
                <TokenSwatch name="--ui-daybreak-tint" value="#DBDDFF" />
                <TokenSwatch name="--ui-daybreak-text" value="#4E14EE" text="#4E14EE · accent-colored ink" />
                <TokenSwatch name="--ui-chart" value="#3D9CFA" text="#3D9CFA · Cloud (sparingly)" />
                <TokenSwatch name="--ui-pm-glyph" value="var(--ui-pm-glyph)" text="provenance-mark glyph · white in dark" />
              </div>
              <div>
                <div className="e8-sectionlabel" style={{ margin: '6px 0' }}>Semantic · base anchors dots/fills</div>
                <TokenSwatch name="--ui-success" value="#189A4E" />
                <TokenSwatch name="--ui-warning" value="#E39B0D" />
                <TokenSwatch name="--ui-danger" value="#DE3B3B" />
                <TokenSwatch name="--ui-info" value="#0E7FE8" />
                <div className="e8-sectionlabel" style={{ margin: '10px 0 6px' }}>Semantic ink · -text on -tint</div>
                <TokenSwatch name="--ui-success-text" value="#0F7A3B" />
                <TokenSwatch name="--ui-warning-text" value="#8A5B00" />
                <TokenSwatch name="--ui-danger-text" value="#B42323" />
                <TokenSwatch name="--ui-info-text" value="#0668DE" />
              </div>
              <div>
                <div className="e8-sectionlabel" style={{ margin: '6px 0' }}>Match tiers · ink + -tint / -dot / -br</div>
                {[1, 2, 3, 4, 5].map((t) => (
                  <TokenSwatch key={t} name={`--ui-tier-${t}`} value={`var(--ui-tier-${t})`} text={DSs.MATCH_TIERS[t - 1].label} />
                ))}
                <div style={{ fontSize: 'var(--ui-text-xs)', color: 'var(--ui-text-tertiary)', marginTop: 6, lineHeight: 1.45 }}>
                  Each tier ships four tokens: ink, -tint pill bg, -dot marker, -br border.
                </div>
              </div>
            </div>
            <div style={{ marginTop: 14 }}>
              <div className="e8-sectionlabel" style={{ marginBottom: 8 }}>Categorical chip palette (11)</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {['Java 17', 'AWS ECS', 'Kafka', 'Spring Boot', 'Postgres', 'Terraform', 'React', 'SQL', 'Salesforce', 'Next.js', 'Kubernetes'].map((s, i) => (
                  <DSs.SkillChip key={s} color={i + 1}>{s}</DSs.SkillChip>
                ))}
              </div>
            </div>
          </SheetSection>

          <SheetSection title="Type scale" sub="Geist for product UI · Roobert (--font-brand) for metric numerals and brand moments · sentence case everywhere · tabular numerals in numeric columns">
            {[
              ['Page title', 18, 600], ['Section title', 16, 600], ['Emphasized body', 14, 500],
              ['Body', 13.5, 400], ['Table cell', 13.5, 400], ['Caption / meta', 11.5, 400],
            ].map(([label, size, weight]) => (
              <div key={label} style={{ display: 'flex', alignItems: 'baseline', gap: 16, padding: '7px 0', borderBottom: '1px solid var(--ui-border)' }}>
                <span style={{ width: 150, flex: 'none', fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text-tertiary)' }}>{label} · {size}px</span>
                <span style={{ fontSize: size, fontWeight: weight, letterSpacing: '-0.01em' }}>Senior Java Developer · FedEx · Memphis</span>
              </div>
            ))}
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, padding: '7px 0', borderBottom: '1px solid var(--ui-border)' }}>
              <span style={{ width: 150, flex: 'none', fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text-tertiary)' }}>Metric numeral · 27px</span>
              <span className="tnum" style={{ font: '500 var(--ui-text-metric)/1.15 var(--font-brand)', letterSpacing: '-0.02em' }}>1,284 <span style={{ fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text-tertiary)', fontFamily: 'var(--font-body)' }}>--ui-text-metric · --font-brand</span></span>
            </div>
          </SheetSection>

          <SheetSection title="Shape & elevation" sub="7px controls · 10px panels · 14px cards & table wraps · hairline borders · resting/overlay shadows plus -2h hover and -pop popover levels">
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              {[
                ['--ui-radius-sm · 5px', 'var(--ui-radius-sm)', 'none'], ['--ui-radius · 7px', 'var(--ui-radius)', 'none'],
                ['--ui-radius-lg · 10px', 'var(--ui-radius-lg)', 'none'], ['--ui-radius-xl · 14px', 'var(--ui-radius-xl)', 'none'],
                ['--ui-shadow-1 · resting', 'var(--ui-radius-xl)', 'var(--ui-shadow-1)'], ['--ui-shadow-2h · card hover', 'var(--ui-radius-xl)', 'var(--ui-shadow-2h)'],
                ['--ui-shadow-pop · popovers', 'var(--ui-radius-lg)', 'var(--ui-shadow-pop)'], ['--ui-shadow-2 · overlays', 'var(--ui-radius-xl)', 'var(--ui-shadow-2)'],
              ].map(([label, r, sh]) => (
                <div key={label} style={{ textAlign: 'center' }}>
                  <div style={{ width: 110, height: 64, background: 'var(--ui-surface)', border: '1px solid var(--ui-border)', borderRadius: r, boxShadow: sh, marginBottom: 6 }}></div>
                  <code style={{ fontSize: 'var(--ui-text-xs)', color: 'var(--ui-text-tertiary)', fontFamily: 'var(--font-body)' }}>{label}</code>
                </div>
              ))}
              <div style={{ textAlign: 'center' }}>
                <div style={{ width: 110, height: 64, background: 'var(--ui-scrim)', borderRadius: 'var(--ui-radius-xl)', marginBottom: 6 }}></div>
                <code style={{ fontSize: 'var(--ui-text-xs)', color: 'var(--ui-text-tertiary)', fontFamily: 'var(--font-body)' }}>--ui-scrim · overlay backdrop</code>
              </div>
            </div>
          </SheetSection>

          <SheetSection title="Components" sub="Live specimens - hover, click and open the popovers">
            <SpecimenRow label="Buttons">
              <DSs.Button variant="primary" icon="add">Add candidate</DSs.Button>
              <DSs.Button variant="secondary">Export</DSs.Button>
              <DSs.Button variant="ghost">Cancel</DSs.Button>
              <DSs.Button variant="danger">Delete</DSs.Button>
              <DSs.Button variant="accept" size="sm" icon="check">Accept</DSs.Button>
              <DSs.Button variant="reject" size="sm" icon="close">Reject</DSs.Button>
            </SpecimenRow>
            <SpecimenRow label="Inputs">
              <div style={{ width: 280 }}><DSs.Input icon="search" placeholder="java devs in memphis…" kbd="⌘K" /></div>
              <div style={{ width: 170 }}><DSs.Select options={[{ value: 'a', label: 'For review' }, { value: 'b', label: 'Accepted' }]} /></div>
              <DSs.Checkbox defaultChecked />
              <DSs.Toggle checked onChange={() => {}} />
            </SpecimenRow>
            <SpecimenRow label="Tabs">
              <DSs.Tabs items={[{ id: 'a', label: 'Overview' }, { id: 'b', label: 'Matching', count: 7 }]} active="b" onChange={() => {}} />
              <DSs.SubTabs items={[{ id: 'r', label: 'For review', count: 7 }, { id: 'a', label: 'Accepted', count: 1 }]} active="r" onChange={() => {}} />
            </SpecimenRow>
            <SpecimenRow label="Semantic badges">
              <DSs.Badge tone="success" dot>Healthy</DSs.Badge>
              <DSs.Badge tone="warning" dot>Depleting</DSs.Badge>
              <DSs.Badge tone="danger" dot>Expired</DSs.Badge>
              <DSs.Badge tone="info" dot>Synced</DSs.Badge>
              <DSs.Badge tone="neutral">Draft</DSs.Badge>
            </SpecimenRow>
            <SpecimenRow label="Match tiers + why?">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'flex-start' }}>
                <DSs.MatchBadge tier={1} reasons={reasons} footnote="Weighted by Skills · Experience · Location" />
                <span style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                  <DSs.MatchBadge tier={2} /><DSs.MatchBadge tier={3} /><DSs.MatchBadge tier={4} /><DSs.MatchBadge tier={5} />
                </span>
              </div>
            </SpecimenRow>
            <SpecimenRow label="AI provenance">
              <DSs.ProvenanceBadge kind="drafted" />
              <DSs.ProvenanceBadge kind="advised" />
              <DSs.ProvenanceBadge kind="qa" />
              <DSs.ProvenanceBadge kind="human" />
            </SpecimenRow>
            <SpecimenRow label="Platform mark (E8Mark)">
              <DSs.E8Mark />
              <DSs.E8Mark size="lg" />
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 'var(--ui-text-sm)' }}><DSs.E8Mark /> ELEV8 platform data</span>
              <span style={{ fontSize: 'var(--ui-text-xs)', color: 'var(--ui-text-tertiary)' }}>platform-verified data glyph · hidden by the platform-signals toggle</span>
            </SpecimenRow>
            <SpecimenRow label="Chips">
              <DSs.SkillChips skills={['Java 17', 'Spring Boot', 'AWS ECS', 'Postgres', 'Kafka']} max={3} />
              <DSs.AgentChip name="Voice screening" />
              <DSs.FilterChip field="skill" value="java" onRemove={() => {}} />
              <DSs.ConfidenceChip state="confirmed">$92/hr W2</DSs.ConfidenceChip>
              <DSs.ConfidenceChip state="suggested">Hybrid preferred</DSs.ConfidenceChip>
            </SpecimenRow>
            <SpecimenRow label="Avatars">
              <DSs.Avatar name="Daniel Okafor" size="sm" />
              <DSs.Avatar name="Aisha Patel" size="md" />
              <DSs.Avatar name="Beatriz Silva" size="lg" />
              <DSs.Avatar agent size="md" title="Agent actor" />
              <DSs.AvatarGroup names={['Daniel Okafor', 'Aisha Patel', 'Beatriz Silva', 'Marcus Webb', 'Elena Vasquez']} max={3} />
            </SpecimenRow>
            <SpecimenRow label="AI insights bar">
              <div style={{ flex: 1, minWidth: 380 }}>
                <DSs.InsightsBar items={[{ id: 'x', text: <span><b>3 candidates stale 30+ days</b> - re-engage today</span>, action: { label: 'Start sequence', onClick: () => showToast('Sequence queued', 'Undo') } }]} onDismiss={() => {}} />
              </div>
            </SpecimenRow>
            <SpecimenRow label="Transcript turns">
              <div className="e8-card" style={{ flex: 1, minWidth: 380, padding: '4px 14px', boxShadow: 'none' }}>
                <DSs.TranscriptTurn speaker="Agent" time="00:16" ai>Could you confirm your hourly rate expectation?</DSs.TranscriptTurn>
                <DSs.TranscriptTurn speaker="Daniel" time="00:27">Ninety-two an hour on W2 works for me.</DSs.TranscriptTurn>
              </div>
            </SpecimenRow>
            <SpecimenRow label="Live call card">
              <div style={{ width: 340 }}>
                <DSs.LiveCallCard candidate="Marcus Webb" job="Senior Java Developer · FedEx" timer="04:18" sentiment="positive"
                  footer={<div style={{ display: 'flex' }}><DSs.AgentChip name="Voice screening" /></div>} />
              </div>
            </SpecimenRow>
            <SpecimenRow label="Toast (undo)">
              <DSs.Toast icon="archive" message="3 candidates archived" action="Undo" onAction={() => showToast('Restored')} style={{ position: 'static' }} />
            </SpecimenRow>
            <SpecimenRow label="Skeleton">
              <div style={{ flex: 1, minWidth: 320 }}><DSs.SkeletonRow style={{ padding: '4px 0' }} /></div>
            </SpecimenRow>
            <SpecimenRow label="Empty state">
              <div className="e8-card" style={{ flex: 1, minWidth: 380, boxShadow: 'none' }}>
                <DSs.EmptyState icon="person_search" title="No candidates match this view" body="Try widening the rate range, or let matching surface nearby profiles." cta={<DSs.Button variant="primary" size="sm" className="e8-empty-cta">Run matching</DSs.Button>} style={{ padding: '24px 16px' }} />
              </div>
            </SpecimenRow>
          </SheetSection>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { SystemScreen });