// styleguide.jsx — UI audit stránka (page === 'styleguide')
// Stahuje data z window.SG_* (vyplněné v styleguide-data*.jsx)
// Cíl: ukázat REÁLNÝ stav, vč. inline stylů a duplicit. Nic nevymýšlí.

function SGRow({ title, where, count, meta, note, hover, dup, accent, children }) {
  return (
    <article className={"sg-row" + (dup ? " is-dup" : "") + (accent ? " is-accent" : "")}>
      <div className="sg-row__preview">{children}</div>
      <div className="sg-row__meta">
        <div className="sg-row__title">
          <code>{title}</code>
          {count && <span className="sg-row__count">{count}</span>}
          {dup && <span className="sg-row__flag">duplicitní</span>}
        </div>
        {meta && <div className="sg-row__data">{meta}</div>}
        {hover && <div className="sg-row__data sg-row__data--hover">↳ hover: {hover}</div>}
        {where && <div className="sg-row__where">{where}</div>}
        {note && <div className="sg-row__note">{note}</div>}
      </div>
    </article>
  );
}

function SGSection({ id, label, title, intro, children }) {
  return (
    <section className="sg-sect" id={id} data-screen-label={label}>
      <header className="sg-sect__head">
        <span className="sg-sect__num mono">{label}</span>
        <h2 className="sg-sect__title">{title}</h2>
        {intro && <p className="sg-sect__intro">{intro}</p>}
      </header>
      {children}
    </section>
  );
}

function SGSub({ title, intro, children, columns }) {
  return (
    <div className="sg-sub">
      <h3 className="sg-sub__title">{title}</h3>
      {intro && <p className="sg-sub__intro">{intro}</p>}
      <div className={"sg-list" + (columns ? " sg-list--cols-" + columns : "")}>
        {children}
      </div>
    </div>
  );
}

// ----------------- HEADINGS -----------------
function SGHeadings() {
  const H1 = window.SG_HEADINGS_H1 || [];
  const H2 = window.SG_HEADINGS_H2 || [];
  const H3 = window.SG_HEADINGS_H3 || [];
  const H4 = window.SG_HEADINGS_H4 || [];

  return (
    <SGSection id="nadpisy" label="01" title="Nadpisy"
      intro="Systémové třídy (.h-1, .h-2, .h-3) + ~60 vlastních title tříd na úrovni stránek/komponent. Pod každou variantou je sample s živým renderem v PŮVODNÍ velikosti, doplněný metadaty a počtem výskytů.">
      <SGSub title="H1-like — display nadpisy" intro="14 různých zdrojů „velkého“ nadpisu, mix přes .h-1, vlastní třídy a inline styly.">
        {H1.map((h, i) => (
          <SGRow key={i} title={h.cls} where={h.where} count={h.count} meta={h.meta} note={h.note}
            dup={h.cls.includes('inline')}>
            <div className="sg-h1-sample">{h.sample || 'Sample text'}</div>
          </SGRow>
        ))}
      </SGSub>

      <SGSub title="H2-like — sekce nadpisy" intro="Systém .h-2 prakticky nepoužitý (2 výskyty). Místo toho ~25 vlastních tříd.">
        {H2.map((h, i) => (
          <SGRow key={i} title={h.cls} where={h.where} count={h.count} meta={h.meta} note={h.note}
            dup={h.cls.startsWith('.mom-') || h.cls.startsWith('.kh')}>
            <div className="sg-h2-sample">{h.sample || h.cls.replace(/[\.\#]/g,'').replace(/__/, ' / ')}</div>
          </SGRow>
        ))}
      </SGSub>

      <SGSub title="H3-like — kartové a podsekční nadpisy">
        {H3.map((h, i) => (
          <SGRow key={i} title={h.cls} where={h.where} count={h.count} meta={h.meta} note={h.note}>
            <div className="sg-h3-sample">{h.sample || h.cls.replace(/[\.\#]/g,'').replace(/__/, ' / ')}</div>
          </SGRow>
        ))}
      </SGSub>

      <SGSub title="H4-like + ad-hoc" intro="Tady leží největší tichá nekonzistence — h4 bez třídy spoléhá na user-agent style.">
        {H4.map((h, i) => (
          <SGRow key={i} title={h.cls} where={h.where} count={h.count} meta={h.meta} note={h.note}>
            <div className="sg-h4-sample">{h.cls.replace(/[\.\#]/g,'').replace(/__/, ' / ')}</div>
          </SGRow>
        ))}
      </SGSub>
    </SGSection>
  );
}

// ----------------- BUTTONS -----------------
function SGButtons() {
  const P = window.SG_BUTTONS_PRIMARY || [];
  const S = window.SG_BUTTONS_SECONDARY || [];
  const B = window.SG_BUTTONS_BESPOKE || [];

  return (
    <SGSection id="tlacitka" label="02" title="Tlačítka & odkazy"
      intro="Hierarchie podle reálného užití: primární (.btn--coral je 18×), sekundární (.btn--ghost, ghost-light) a 13+ jednorázových bespoke buttonů, které vznikly izolovaně.">
      <SGSub title="Primární CTA" intro="Coral pill je dominantní pattern — vyskytuje se 18×. Hover stav unifikovaný (coral-2).">
        {P.map((b, i) => (
          <SGRow key={i} title={b.cls} count={b.count} meta={b.meta} hover={b.hover} where={b.where} note={b.note}>
            <button className={b.cls.split(' ').map(c=>c.startsWith('.')?c.slice(1):c).join(' ')}>
              {b.cls.includes('--big') ? 'Chci konzultaci' : b.cls.includes('contact') ? 'Odeslat poptávku' : 'Začít projekt'}
              <span className="arrow">↗</span>
            </button>
          </SGRow>
        ))}
      </SGSub>

      <SGSub title="Sekundární / Ghost">
        {S.map((b, i) => (
          <SGRow key={i} title={b.cls} count={b.count} meta={b.meta} hover={b.hover} where={b.where} note={b.note}
            dup={b.note && b.note.includes('DEFINOVÁN 2×')}>
            <button className={b.cls.split(' ').map(c=>c.startsWith('.')?c.slice(1):c).join(' ')}>
              {b.cls.includes('ghost-light') ? 'Dej mi vědět ↗' : 'Naše hodnoty'}
              {!b.cls.includes('ghost-light') && <span className="arrow">↗</span>}
            </button>
          </SGRow>
        ))}
      </SGSub>

      <SGSub title="Jednorázové / bespoke buttony"
        intro="Každý vznikl izolovaně. Většina by mohla migrovat na .btn s modifikátorem nebo se zrušit.">
        {B.map((b, i) => (
          <SGRow key={i} title={b.cls} count={b.count} meta={b.meta} where={b.where} note={b.note}>
            <span className="sg-bespoke-stub">[ vlastní stylování — viz zdroj ]</span>
          </SGRow>
        ))}
      </SGSub>
    </SGSection>
  );
}

// ----------------- COLORS -----------------
function SGColors() {
  const T = window.SG_COLORS_TOKENS || [];
  const H = window.SG_COLORS_HARDCODED || [];
  return (
    <SGSection id="barvy" label="03" title="Barvy"
      intro="V :root je 10 tokenů. V kódu se ale objevuje ~19 hardcoded hex hodnot, většina jsou duplikáty/blízké tokenům. Zvlášť kritické: dvě zelené (pulse vs SLA), tři odstíny šedi pro tělo textu (#bdbdbd × #cfcfcf × #dcdcdc).">
      <SGSub title="Tokeny z :root" intro="Definované v styles.css:2.">
        <div className="sg-swatches">
          {T.map((c, i) => (
            <div key={i} className="sg-swatch">
              <div className="sg-swatch__chip" style={{background:c.hex}}><span className="sg-swatch__hex mono">{c.hex}</span></div>
              <div className="sg-swatch__meta">
                <code className="sg-swatch__name">{c.name}</code>
                <span className="sg-swatch__desc">{c.desc}</span>
              </div>
            </div>
          ))}
        </div>
      </SGSub>

      <SGSub title="Hardcoded hexy ve zdrojácích"
        intro="Co se objevuje mimo tokeny. Sloupec „duplicita“ navrhuje nejbližší ekvivalent — to je můj odhad, nesjednocuju automaticky.">
        <div className="sg-swatches sg-swatches--dense">
          {H.map((c, i) => (
            <div key={i} className={"sg-swatch sg-swatch--dense" + (c.dup ? " is-dup" : "")}>
              <div className="sg-swatch__chip" style={{background:c.hex,minHeight:80}}>
                <span className="sg-swatch__hex mono">{c.hex}</span>
              </div>
              <div className="sg-swatch__meta">
                <div className="sg-swatch__desc"><strong>{c.desc}</strong></div>
                <div className="sg-swatch__where mono">{c.where} · {c.count}</div>
                {c.dup && <div className="sg-swatch__dup">{c.dup}</div>}
              </div>
            </div>
          ))}
        </div>
      </SGSub>
    </SGSection>
  );
}

// ----------------- TYPOGRAPHY -----------------
function SGTypography() {
  const F = window.SG_TYPOGRAPHY_FONTS || [];
  const L = window.SG_TYPOGRAPHY_LABELS || [];
  const B = window.SG_TYPOGRAPHY_BODY || [];
  return (
    <SGSection id="typografie" label="04" title="Typografie"
      intro="Hubot Sans je hlavní font (variabilní — 7 vah, 3 stretch hodnoty). JetBrains Mono pro mono labely. Caveat se objeví minimálně (svc-edge__hand) — možná zbytečný.">
      <SGSub title="Rodiny">
        {F.map((f, i) => (
          <SGRow key={i} title={'"' + f.name + '"'}
            meta={f.use}
            note={f.note}
            where={'Weights: ' + f.weights + (f.stretch !== '—' ? ' · Stretch: ' + f.stretch : '')}>
            <div className="sg-font-sample" style={{fontFamily:f.name === 'Caveat' ? '"Caveat", cursive' : f.name === 'JetBrains Mono' ? '"JetBrains Mono", monospace' : '"Hubot Sans", sans-serif'}}>
              {f.name === 'Caveat' ? 'tudy to obvykle teče' : 'AaBbCc 123 — kvíz pět'}
            </div>
          </SGRow>
        ))}
      </SGSub>

      <SGSub title="Mono labely & eyebrows">
        {L.map((l, i) => (
          <SGRow key={i} title={l.cls} count={l.count} meta={l.meta} where={l.where}>
            {l.cls === '.eyebrow' && <span className="eyebrow">05 / Crossroad</span>}
            {l.cls === '.eyebrow--no-dot' && <span className="eyebrow eyebrow--no-dot">VYBRANÍ KLIENTI</span>}
            {l.cls === '.mono' && <span className="mono">12+ LET / 500+ PROJEKTŮ</span>}
            {l.cls === '.lede' && <p className="lede" style={{margin:0,maxWidth:'40ch'}}>Vybraná práce z posledních let. Od rebrandů po kompletní kampaně.</p>}
            {(l.cls.includes('inline color') || l.cls.includes('inline className')) && <p style={{margin:0,maxWidth:'40ch',color:'#bdbdbd',fontSize:18}}>Lede s inline color override — opakující se pattern.</p>}
          </SGRow>
        ))}
      </SGSub>

      <SGSub title="Body / desc paragrafy">
        {B.map((b, i) => (
          <SGRow key={i} title={b.name} count={b.count} meta={b.meta}>
            <p style={{margin:0,color:'#bdbdbd',fontSize:b.meta.includes('17px') ? 17 : b.meta.includes('14px') ? 14 : b.meta.includes('15px') ? 15 : b.meta.includes('clamp(28px') ? 32 : 16, lineHeight: 1.5,maxWidth:'48ch'}}>
              Tady je vzorová věta. Lorem nemáme rádi — tady ho být nemusí.
            </p>
          </SGRow>
        ))}
      </SGSub>
    </SGSection>
  );
}

// ----------------- CARDS -----------------
function SGCards() {
  const C = window.SG_CARDS || [];
  return (
    <SGSection id="karty" label="05" title="Dlaždice & karty"
      intro="29 různých card / tile tříd. .card (bento) má jeden konzistentní jazyk, .cross má 6 modifikátorů, knowhub a justask mají vlastní mini-systémy.">
      <div className="sg-list">
        {C.map((c, i) => (
          <SGRow key={i} title={c.cls} count={c.count} meta={c.meta} hover={c.hover} where={c.where} note={c.note}>
            <span className="sg-card-stub">{c.sample || c.cls.replace(/[\.\#]/g,'').split(' ')[0]}</span>
          </SGRow>
        ))}
      </div>
    </SGSection>
  );
}

// ----------------- FORMS -----------------
function SGForms() {
  const I = window.SG_FORM_INPUTS || [];
  const A = window.SG_FORM_AUX || [];
  return (
    <SGSection id="formulare" label="06" title="Formulářové prvky"
      intro="3 odlišné form systémy: .field (legacy contact), .ja-field (justask), .mom-reg__field. KnowhubEvent + WebinarDetail mají vlastní řešení. ~13 native inputů bez třídy.">
      <SGSub title="Inputy / textarea">
        {I.map((it, i) => (
          <SGRow key={i} title={it.cls || it.name} count={it.count} meta={it.meta} where={it.where} note={it.note}>
            <input type="text" placeholder={it.name} className="sg-form-stub" />
          </SGRow>
        ))}
      </SGSub>

      <SGSub title="Pomocné prvky (note / sla / consent / kicker)">
        {A.map((it, i) => (
          <SGRow key={i} title={it.cls} count={it.count} meta={it.meta} where={it.where}
            dup={!!it.dup}
            note={it.dup ? ('duplikát: ' + it.dup) : undefined}>
            <span className="sg-aux-stub">[ {it.cls} ]</span>
          </SGRow>
        ))}
      </SGSub>
    </SGSection>
  );
}

// ----------------- DECOR / ICONS -----------------
function SGDecor() {
  const D = window.SG_DECOR || [];
  return (
    <SGSection id="dekorace" label="07" title="Ikony & dekorace"
      intro="Webové ikony jsou text-symboly (↗ ↓ →) ve „arrow“ pill. Stone obrázky jsou hlavní dekorativní motiv (~12 instancí). Žádná SVG ikon­ová sada neexistuje.">
      {D.map((d, i) => (
        <SGRow key={i} title={d.name} count={d.count}
          meta={d.use}
          where={d.where + (d.sizes ? ' · ' + d.sizes : '')}
          note={d.note}>
          <span className="sg-decor-stub">
            {d.name.includes('arrow') ? '↗' : d.name.includes('stone') ? '◯' : d.name.includes('pulse') ? '●' : d.name.includes('eyebrow') ? '•' : '·'}
          </span>
        </SGRow>
      ))}
    </SGSection>
  );
}

// ----------------- SPACING / GRID -----------------
function SGSpacing() {
  const S = window.SG_SPACING || [];
  const R = window.SG_RADII || [];
  const O = window.SG_OTHER || [];

  return (
    <SGSection id="spacing" label="08" title="Odstupy & grid"
      intro="Spacing škála neexistuje. Padding hodnoty se opakují (8/12/14/16/20/24/32/36/48/80/120/140). Radiusy mají 3 tokeny, ale 4 ad-hoc hodnoty v užití.">
      <SGSub title="Reálně použité odstupy" intro="Roztříděné podle frekvence v kódu.">
        <div className="sg-spacing-grid">
          {S.map((s, i) => (
            <div key={i} className="sg-spacing-cell">
              <div className="sg-spacing-bar" style={{height:Math.min(parseInt(s.val) * 0.6, 88), background:'var(--coral)'}}></div>
              <div className="sg-spacing-val mono">{s.val}</div>
              <div className="sg-spacing-use">{s.use}</div>
              <div className="sg-spacing-count mono">{s.count}</div>
            </div>
          ))}
        </div>
      </SGSub>

      <SGSub title="Border-radius">
        {R.map((r, i) => (
          <SGRow key={i} title={r.val} meta={r.use}>
            <div style={{
              width: 56, height: 56,
              background:'var(--coral)',
              borderRadius: r.val.includes('var') ? r.val.split(' ')[1] : r.val
            }}></div>
          </SGRow>
        ))}
      </SGSub>

      <SGSub title="Globální + ostatní">
        {O.map((o, i) => (
          <SGRow key={i} title={o.name} count={o.count} meta={o.meta} where={o.where} note={o.note}>
            <span className="sg-aux-stub">[ {o.name} ]</span>
          </SGRow>
        ))}
      </SGSub>
    </SGSection>
  );
}

// ============================================================
// HLAVNÍ STRÁNKA
// ============================================================
function StyleguidePage({ onNav }) {
  const SECTIONS = [
    { id:'nadpisy', label:'01', title:'Nadpisy', count:'~60 tříd' },
    { id:'tlacitka', label:'02', title:'Tlačítka', count:'18 + bespoke' },
    { id:'barvy', label:'03', title:'Barvy', count:'10 tokenů · 19 hex' },
    { id:'typografie', label:'04', title:'Typografie', count:'3 fonty' },
    { id:'karty', label:'05', title:'Karty', count:'29 variant' },
    { id:'formulare', label:'06', title:'Formuláře', count:'5 systémů' },
    { id:'dekorace', label:'07', title:'Ikony / dekorace', count:'2 stone + arrow' },
    { id:'spacing', label:'08', title:'Odstupy', count:'15+ hodnot' },
  ];

  return (
    <main className="sg-page" data-screen-label="SG StyleguidePage">
      <div className="sg-shell">
        <aside className="sg-toc">
          <span className="mono sg-toc__lbl">UI AUDIT</span>
          <ul>
            {SECTIONS.map(s => (
              <li key={s.id}>
                <a href={"#" + s.id}>
                  <span className="mono sg-toc__num">{s.label}</span>
                  <span>{s.title}</span>
                  <span className="mono sg-toc__count">{s.count}</span>
                </a>
              </li>
            ))}
          </ul>
        </aside>

        <div className="sg-content">
          <header className="sg-hero" data-screen-label="SG Hero">
            <span className="mono sg-hero__kicker">● UI AUDIT · stav k dnešku</span>
            <h1 className="sg-hero__title">styleguide jak <em>fakt vypadá</em></h1>
            <p className="sg-hero__lede">
              Toto <strong>není ideální design systém.</strong> Toto je mapa toho, co je
              skutečně v kódu — včetně duplicit, inline overrideů a tříd, které vznikly
              jednou a nikam nepatří.
            </p>
            <p className="sg-hero__lede">
              Pod každou variantou je živý náhled, název třídy (nebo zdroj inline stylu),
              kde se vyskytuje a kolikrát. Karty s <span className="sg-hero__dup">červeným pruhem</span> jsou
              kandidáti na sloučení.
            </p>
            <div className="sg-hero__stats">
              <span><strong>~60</strong> heading tříd</span>
              <span><strong>13+</strong> button variant</span>
              <span><strong>29</strong> card / tile tříd</span>
              <span><strong>19</strong> hardcoded hexů</span>
              <span><strong>15</strong>× inline marginTop:16 pattern</span>
            </div>
          </header>

          <SGHeadings />
          <SGButtons />
          <SGColors />
          <SGTypography />
          <SGCards />
          <SGForms />
          <SGDecor />
          <SGSpacing />

          <footer className="sg-foot">
            <p className="mono">⌐ konec auditu — řekni, co spojit do jedné varianty.</p>
          </footer>
        </div>
      </div>
    </main>
  );
}

window.StyleguidePage = StyleguidePage;