/* global React, CcTopbar, CcKpi, CcLineChart, CcDonut, CcFeed, CcBars, CcPillars, CcTicker, CcFunnel, CcPipelineCard, CcRotator, CcStat, CcWorldMap, CC_DATA, fmtNum */
// Variant A — Auto-Rotating Wall Display

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const VIEWS = ['Overview', 'Rod Locker', 'BlynkAudit'];

function VariantA({ rotateMs = 18000, paused = false, activeViewOverride = null }) {
  const d = CC_DATA;
  const [view, setView] = useStateA(0);
  const [progress, setProgress] = useStateA(0);
  const startRef = useRefA(performance.now());
  const rafRef = useRefA(null);

  useEffectA(() => {
    if (activeViewOverride != null) {
      setView(activeViewOverride);
      setProgress(0);
      return;
    }
    if (paused) return;
    startRef.current = performance.now();
    const tick = (now) => {
      const elapsed = now - startRef.current;
      const p = Math.min(1, elapsed / rotateMs);
      setProgress(p);
      if (p >= 1) {
        setView(v => (v + 1) % VIEWS.length);
        startRef.current = now;
      }
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, [rotateMs, paused, activeViewOverride, view]);

  // initial feed
  const initialFeed = React.useMemo(() => d.makeFeed(9, 4), []);

  return (
    <div className="cc-artboard">
      <CcTopbar section={VIEWS[view]} extras={
        <>
          <CcRotator tabs={VIEWS} active={view} progress={progress} />
          <span style={{ width: 1, height: 18, background: 'var(--color-line)' }}></span>
        </>
      } />

      {/* Hero KPI row — always visible */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(6, 1fr)',
        gap: 14, padding: '18px 24px 12px',
      }}>
        {d.heroKpis.map(k => <CcKpi key={k.id} kpi={k} />)}
      </div>

      {/* Main rotating view */}
      <div style={{ flex: 1, minHeight: 0, padding: '6px 24px 18px', display: 'flex' }}>
        <div key={view} className="cc-view" style={{ flex: 1, minHeight: 0 }}>
          {view === 0 && <ViewOverview data={d} initialFeed={initialFeed} />}
          {view === 1 && <ViewRodLocker data={d} />}
          {view === 2 && <ViewBlynkAudit data={d} />}
        </div>
      </div>

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

// ============================================================
// View: Overview
// ============================================================
function ViewOverview({ data, initialFeed }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '1.4fr 1fr',
      gridTemplateRows: '1fr 1fr',
      gap: 14,
      height: '100%',
    }}>
      {/* World map (large) */}
      <div className="cc-card-flush" style={{ gridRow: '1 / span 2', minHeight: 0 }}>
        <div className="cc-card-head">
          <div className="cc-card-head-title">
            <span className="cc-card-title">Global activity · 30d</span>
            <span className="cc-chip accent">heatmap</span>
          </div>
          <span className="cc-card-sub">14,820 users · 41 countries</span>
        </div>
        <div className="cc-card-body" style={{ display: 'flex', minHeight: 0 }}>
          <CcWorldMap
            heatByCountry={data.countryHeat}
            centroids={data.countryCentroids}
            pings={['AU', 'US', 'GB', 'NZ', 'DE', 'JP']}
          />
        </div>
      </div>

      {/* Live feed */}
      <div className="cc-card-flush" style={{ minHeight: 0 }}>
        <div className="cc-card-head">
          <div className="cc-card-head-title">
            <span className="cc-card-title">Live activity</span>
            <span className="cc-live-dot">streaming</span>
          </div>
          <span className="cc-card-sub">All products · Last 5 min</span>
        </div>
        <div className="cc-card-body" style={{ paddingTop: 0, overflow: 'hidden' }}>
          <CcFeed initial={initialFeed} maxRows={7} intervalMs={2400} />
        </div>
      </div>

      {/* Subscription mix donut */}
      <div className="cc-card-flush" style={{ minHeight: 0 }}>
        <div className="cc-card-head">
          <div className="cc-card-head-title">
            <span className="cc-card-title">{data.subscriptionMix.title}</span>
          </div>
          <span className="cc-card-sub">{fmtNum(data.subscriptionMix.segments.reduce((s, x) => s + x.value, 0))} total</span>
        </div>
        <div className="cc-card-body" style={{ display: 'flex', alignItems: 'center' }}>
          <CcDonut segments={data.subscriptionMix.segments} size={130} stroke={16} />
        </div>
      </div>
    </div>
  );
}

// ============================================================
// View: Rod Locker
// ============================================================
function ViewRodLocker({ data }) {
  const rl = data.rodLocker;
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '1.1fr 1fr 1fr',
      gridTemplateRows: '1fr 1fr',
      gap: 14,
      height: '100%',
    }}>
      {/* Funnel */}
      <div className="cc-card" data-tint="rl" style={{ gridRow: '1 / span 1', minHeight: 0 }}>
        <div className="cc-row" style={{ justifyContent: 'space-between' }}>
          <div>
            <span className="cc-label">Activation funnel</span>
            <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>Install → Pro</div>
          </div>
          <span className="cc-chip rl">rod locker</span>
        </div>
        <CcFunnel stages={rl.funnel} color="var(--rl-accent)" />
      </div>

      {/* Top species */}
      <div className="cc-card" data-tint="rl" style={{ minHeight: 0 }}>
        <div className="cc-row" style={{ justifyContent: 'space-between' }}>
          <div>
            <span className="cc-label">Top species logged</span>
            <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>{fmtNum(rl.catchesLogged)} catches</div>
          </div>
          <span className="cc-chip muted">30d</span>
        </div>
        <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
          <CcBars items={rl.topSpecies.slice(0, 6)} color="var(--rl-accent)" />
        </div>
      </div>

      {/* Stats column */}
      <div className="cc-card" data-tint="rl" style={{ minHeight: 0 }}>
        <span className="cc-label">App health</span>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 4 }}>
          <CcStat label="Play store rating" value={`${rl.rating}★`} sub={`${rl.ratingCount} reviews`} delta="+0.1" />
          <CcStat label="Crash-free" value={`${rl.crashFree}%`} sub="all sessions" delta="+0.04" />
          <CcStat label="Pro conversion" value={`${rl.proConversion}%`} sub={`${rl.proSubs} subs`} delta="+0.3" />
          <CcStat label="ARPU" value={`$${rl.arpu}`} sub="per active" delta="+$0.08" />
        </div>
      </div>

      {/* 30d install chart spanning bottom */}
      <div className="cc-card-flush" data-tint="rl" style={{
        gridColumn: '1 / span 2', minHeight: 0,
        background: 'var(--color-panel)',
        border: '1px solid var(--color-line)',
        borderTop: '2px solid var(--rl-accent)',
        borderRadius: 8,
      }}>
        <div className="cc-card-head">
          <div className="cc-card-head-title">
            <span className="cc-card-title">Installs · last 30 days</span>
            <span className="cc-chip rl">{fmtNum(rl.installsTotal)} lifetime</span>
          </div>
          <span className="cc-card-sub">Firebase + Play Store · GA4</span>
        </div>
        <div className="cc-card-body" style={{ minHeight: 0 }}>
          <CcLineChart
            series={[{ ...data.series.rl_installs_30d, color: 'var(--rl-accent)' }]}
            w={780} h={200}
          />
        </div>
      </div>

      {/* Device breakdown donut */}
      <div className="cc-card-flush" data-tint="rl" style={{
        background: 'var(--color-panel)',
        border: '1px solid var(--color-line)',
        borderTop: '2px solid var(--rl-accent)',
        borderRadius: 8,
        minHeight: 0,
      }}>
        <div className="cc-card-head">
          <div className="cc-card-head-title">
            <span className="cc-card-title">Device · OS</span>
          </div>
          <span className="cc-card-sub">30d active</span>
        </div>
        <div className="cc-card-body" style={{ display: 'flex', alignItems: 'center' }}>
          <CcDonut segments={data.deviceMix.segments.slice(0, 4)} size={120} stroke={14} />
        </div>
      </div>
    </div>
  );
}

// ============================================================
// View: BlynkAudit
// ============================================================
function ViewBlynkAudit({ data }) {
  const ba = data.blynkAudit;

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '1fr 1fr 1fr',
      gridTemplateRows: 'auto 1fr 1fr',
      gap: 14,
      height: '100%',
    }}>
      {/* Mega audits today */}
      <div className="cc-card" data-tint="ba" style={{ minHeight: 0, gridRow: '1 / span 2' }}>
        <span className="cc-label">Audits run today</span>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 84, fontWeight: 600, letterSpacing: '-2.5px', color: 'var(--color-fg)', lineHeight: 0.95, fontVariantNumeric: 'tabular-nums', marginTop: 8 }}>
          {ba.auditsToday}
        </div>
        <div style={{ color: 'var(--color-muted)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
          <span className="cc-kpi-delta pos">▲ +22 vs yesterday</span>
        </div>
        <hr className="cc-divider" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 4 }}>
          <CcStat label="Lifetime" value={fmtNum(ba.auditsTotal)} sub="since launch" />
          <CcStat label="Active agencies" value={String(ba.activeAgencies)} sub="paying" />
          <CcStat label="Avg score" value={`${ba.avgScore}/100`} sub="all categories" delta="+1.8" />
          <CcStat label="Queue" value={`${ba.queueRunning} / ${ba.queueDepth}`} sub="run / depth" deltaDir="warn" />
        </div>
      </div>

      {/* Pillars */}
      <div className="cc-card" data-tint="ba" style={{ minHeight: 0 }}>
        <div className="cc-row" style={{ justifyContent: 'space-between' }}>
          <div>
            <span className="cc-label">Pillar averages · network</span>
            <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>Score distribution</div>
          </div>
          <span className="cc-chip ba">/ 100</span>
        </div>
        <CcPillars pillars={ba.avgPillars} />
      </div>

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

      {/* Audits 30d chart */}
      <div className="cc-card-flush" style={{
        gridColumn: '2 / span 2', minHeight: 0,
        background: 'var(--color-panel)',
        border: '1px solid var(--color-line)',
        borderTop: '2px solid var(--ba-accent)',
        borderRadius: 8,
      }}>
        <div className="cc-card-head">
          <div className="cc-card-head-title">
            <span className="cc-card-title">Audits · last 30 days</span>
            <span className="cc-chip ba">{fmtNum(ba.creditsUsed)} credits used</span>
          </div>
          <span className="cc-card-sub">SQL · {((ba.creditsUsed / ba.creditsCap) * 100).toFixed(0)}% of cap</span>
        </div>
        <div className="cc-card-body" style={{ minHeight: 0 }}>
          <CcLineChart
            series={[{ ...data.series.ba_audits_30d, color: 'var(--ba-accent)' }]}
            w={780} h={180}
          />
        </div>
      </div>
    </div>
  );
}