/* global React, CcTopbar, CcKpi, CcLineChart, CcDonut, CcFeed, CcBars, CcPillars, CcTicker, CcFunnel, CcPipelineCard, CcStat, CcWorldMap, CC_DATA, fmtNum */
// Variant B — Mosaic Terminal: everything visible at once, max density.

function VariantB() {
  const d = CC_DATA;
  const initialFeed = React.useMemo(() => d.makeFeed(11, 4), []);

  // Compact mini-KPI
  const MiniKpi = ({ label, value, prefix, suffix, delta, dir = 'pos', tint, spark }) => (
    <div style={{
      background: 'var(--color-panel)',
      border: '1px solid var(--color-line)',
      borderTop: tint ? `2px solid var(--${tint}-accent)` : undefined,
      borderRadius: 6,
      padding: '10px 12px',
      display: 'flex', flexDirection: 'column', gap: 4,
      position: 'relative',
      overflow: 'hidden',
      minHeight: 78,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '1.4px', textTransform: 'uppercase', color: 'var(--color-subtle)', fontWeight: 500 }}>
          {label}
        </span>
        {delta && (
          <span className={'cc-kpi-delta ' + dir} style={{ fontSize: 10 }}>
            {dir === 'pos' ? '▲' : dir === 'neg' ? '▼' : '·'} {delta}
          </span>
        )}
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 26, fontWeight: 600, letterSpacing: '-0.8px', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
        {prefix && <span style={{ fontSize: 14, color: 'var(--color-muted)' }}>{prefix}</span>}
        {value}
        {suffix && <span style={{ fontSize: 14, color: 'var(--color-muted)' }}>{suffix}</span>}
      </div>
    </div>
  );

  return (
    <div className="cc-artboard">
      <CcTopbar section="Terminal · all signals" extras={
        <span className="cc-label-sm">mosaic / one-screen</span>
      } />

      <div style={{
        flex: 1, minHeight: 0,
        display: 'grid',
        gridTemplateRows: 'auto 1.05fr 0.95fr 0.8fr',
        gap: 10,
        padding: 14,
      }}>
        {/* ROW 1 — 8 mini KPIs across */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 10 }}>
          <MiniKpi label="MRR" prefix="$" value="12,847" delta="+18.4%" dir="pos" />
          <MiniKpi label="Revenue · today" prefix="$" value="428" delta="−6%" dir="neg" />
          <MiniKpi label="DAU" value="3,421" delta="+312" dir="pos" />
          <MiniKpi label="MAU · 30d" value="18,290" delta="+13.2%" dir="pos" />
          <MiniKpi label="Signups · today" value="47" delta="+12" dir="pos" />
          <MiniKpi label="Paid conversion" value="4.9" suffix="%" delta="+0.3" dir="pos" />
          <MiniKpi label="RL installs · today" value="312" delta="+5.7%" dir="pos" tint="rl" />
          <MiniKpi label="BA audits · today" value="89" delta="+22" dir="pos" tint="ba" />
        </div>

        {/* ROW 2 — world map | live feed | pillars+donut */}
        <div style={{ display: 'grid', gridTemplateColumns: '2.1fr 1.3fr 1.2fr', gap: 10, minHeight: 0 }}>
          {/* world map */}
          <div className="cc-card-flush" style={{ minHeight: 0 }}>
            <div className="cc-card-head" style={{ padding: '10px 14px 8px' }}>
              <div className="cc-card-head-title">
                <span className="cc-card-title" style={{ fontSize: 12 }}>Global activity</span>
                <span className="cc-chip accent" style={{ fontSize: 9, padding: '1px 6px' }}>heatmap · 30d</span>
              </div>
              <span className="cc-card-sub">41 countries</span>
            </div>
            <div className="cc-card-body" style={{ padding: '6px 10px 10px', display: 'flex', minHeight: 0 }}>
              <CcWorldMap
                heatByCountry={d.countryHeat}
                centroids={d.countryCentroids}
                pings={['AU', 'US', 'GB', 'NZ', 'DE']}
              />
            </div>
          </div>

          {/* live feed */}
          <div className="cc-card-flush" style={{ minHeight: 0 }}>
            <div className="cc-card-head" style={{ padding: '10px 14px 8px' }}>
              <div className="cc-card-head-title">
                <span className="cc-card-title" style={{ fontSize: 12 }}>Live</span>
                <span className="cc-live-dot">stream</span>
              </div>
              <span className="cc-card-sub">all products</span>
            </div>
            <div className="cc-card-body" style={{ padding: '0 12px 6px', overflow: 'hidden' }}>
              <CcFeed initial={initialFeed} maxRows={8} intervalMs={2200} />
            </div>
          </div>

          {/* pillars + donut stacked */}
          <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 10, minHeight: 0 }}>
            <div className="cc-card" data-tint="ba" style={{ minHeight: 0, gap: 8, padding: 14 }}>
              <div className="cc-row" style={{ justifyContent: 'space-between' }}>
                <span className="cc-label" style={{ fontSize: 9 }}>BlynkAudit pillars · avg</span>
                <span className="cc-mono" style={{ fontSize: 11, color: 'var(--color-fg)', fontWeight: 600 }}>{d.blynkAudit.avgScore}/100</span>
              </div>
              <CcPillars pillars={d.blynkAudit.avgPillars} />
            </div>
            <div className="cc-card" style={{ minHeight: 0, padding: 12, gap: 6 }}>
              <span className="cc-label" style={{ fontSize: 9 }}>Subscription mix</span>
              <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center' }}>
                <CcDonut segments={d.subscriptionMix.segments} size={104} stroke={13} />
              </div>
            </div>
          </div>
        </div>

        {/* ROW 3 — RL chart | RL species | BA chart | BA cats */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1.4fr 1fr', gap: 10, minHeight: 0 }}>
          <div className="cc-card-flush" style={{
            borderTop: '2px solid var(--rl-accent)',
            border: '1px solid var(--color-line)',
            borderTopWidth: 2,
            background: 'var(--color-panel)',
            borderRadius: 8,
            minHeight: 0,
          }}>
            <div className="cc-card-head" style={{ padding: '10px 14px 6px' }}>
              <div className="cc-card-head-title">
                <span className="cc-chip rl" style={{ fontSize: 9, padding: '1px 6px' }}>rod locker</span>
                <span className="cc-card-title" style={{ fontSize: 12 }}>Installs · 30d</span>
              </div>
              <span className="cc-card-sub">{fmtNum(d.rodLocker.installsTotal)} lifetime</span>
            </div>
            <div className="cc-card-body" style={{ padding: '0 10px 8px', minHeight: 0 }}>
              <CcLineChart series={[{ ...d.series.rl_installs_30d, color: 'var(--rl-accent)' }]} w={500} h={160} />
            </div>
          </div>

          <div className="cc-card" data-tint="rl" style={{ minHeight: 0, padding: 12, gap: 6 }}>
            <span className="cc-label" style={{ fontSize: 9 }}>Top species · 30d</span>
            <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
              <CcBars items={d.rodLocker.topSpecies.slice(0, 5)} color="var(--rl-accent)" />
            </div>
          </div>

          <div className="cc-card-flush" style={{
            borderTop: '2px solid var(--ba-accent)',
            border: '1px solid var(--color-line)',
            borderTopWidth: 2,
            background: 'var(--color-panel)',
            borderRadius: 8,
            minHeight: 0,
          }}>
            <div className="cc-card-head" style={{ padding: '10px 14px 6px' }}>
              <div className="cc-card-head-title">
                <span className="cc-chip ba" style={{ fontSize: 9, padding: '1px 6px' }}>blynkaudit</span>
                <span className="cc-card-title" style={{ fontSize: 12 }}>Audits · 30d</span>
              </div>
              <span className="cc-card-sub">{fmtNum(d.blynkAudit.creditsUsed)} credits</span>
            </div>
            <div className="cc-card-body" style={{ padding: '0 10px 8px', minHeight: 0 }}>
              <CcLineChart series={[{ ...d.series.ba_audits_30d, color: 'var(--ba-accent)' }]} w={500} h={160} />
            </div>
          </div>

          <div className="cc-card" data-tint="ba" style={{ minHeight: 0, padding: 12, gap: 6 }}>
            <span className="cc-label" style={{ fontSize: 9 }}>Top categories · 30d</span>
            <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
              <CcBars items={d.blynkAudit.topCategories.slice(0, 5)} color="var(--ba-accent)" />
            </div>
          </div>
        </div>

        {/* ROW 4 — Device | Funnel | Pipeline | System health */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr 1fr 1fr', gap: 10, minHeight: 0 }}>
          <div className="cc-card" style={{ minHeight: 0, padding: 12, gap: 6 }}>
            <span className="cc-label" style={{ fontSize: 9 }}>Device · OS · 30d</span>
            <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center' }}>
              <CcDonut segments={d.deviceMix.segments} size={104} stroke={13} />
            </div>
          </div>

          <div className="cc-card" data-tint="rl" style={{ minHeight: 0, padding: 14, gap: 8 }}>
            <div className="cc-row" style={{ justifyContent: 'space-between' }}>
              <span className="cc-label" style={{ fontSize: 9 }}>Rod Locker · activation</span>
              <span className="cc-chip rl" style={{ fontSize: 9, padding: '1px 6px' }}>install → pro</span>
            </div>
            <CcFunnel stages={d.rodLocker.funnel} color="var(--rl-accent)" />
          </div>

          <div className="cc-card" style={{ minHeight: 0, padding: 12, gap: 6 }}>
            <span className="cc-label" style={{ fontSize: 9 }}>Pipeline · next quarters</span>
            <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
              <CcPipelineCard items={d.pipeline} />
            </div>
          </div>

          <div className="cc-card" style={{ minHeight: 0, padding: 14, gap: 8 }}>
            <span className="cc-label" style={{ fontSize: 9 }}>System health</span>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 2 }}>
              <CcStat label="GA4" value="OK" sub="12s ago" />
              <CcStat label="Firebase" value="92%" sub="reads / cap" deltaDir="warn" />
              <CcStat label="SQL · BA" value="42ms" sub="OK" />
              <CcStat label="Stripe" value="OK" sub="$2,847 pend." />
              <CcStat label="Crash-free" value="99.6%" sub="all sessions" />
              <CcStat label="Rating · RL" value="4.7★" sub="312 reviews" />
            </div>
          </div>
        </div>
      </div>

      <CcTicker items={d.tickerItems} />
    </div>
  );
}
window.VariantB = VariantB;