// analytics-tabs.jsx — 7 dimensional tabs for Analytics
// Each tab: KPI strip · 4-6 charts · ranked table · cross-filter on click
// ────────────────────────────────────────────────────────────
(function () {
  if (typeof window === 'undefined' || !window.React) return;
  if (window.AnalyticsTabs) return;

  const E = window.ANALYTICS_ENGINE;
  const C = window.AnalyticsCharts;
  const Mono = C.Mono;

  // ─── shared layouts ───────────────────────────────────
  function KPIStrip({ kpis }) {
    return React.createElement('div', {
      style: { display: 'grid', gridTemplateColumns: `repeat(${kpis.length}, 1fr)`, borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', marginBottom: 22 }
    }, kpis.map((k, i) => React.createElement(C.KPI, { key: i, ...k })));
  }

  function ChartGrid({ children, cols = 2 }) {
    return React.createElement('div', {
      style: { display: 'grid', gridTemplateColumns: cols === 2 ? '1fr 1fr' : cols === 3 ? '1fr 1fr 1fr' : '1fr', gap: 22, marginBottom: 22 }
    }, children);
  }

  function ChartCard({ title, sub, children, span }) {
    return React.createElement('div', {
      style: { padding: '16px 18px', border: '1px solid var(--rule)', background: 'var(--bg)', gridColumn: span ? `span ${span}` : 'auto', minHeight: 260 }
    },
      React.createElement(Mono, { upper: true, size: 9, color: 'var(--ink-3)', style: { display: 'block', marginBottom: 4 } }, title),
      sub && React.createElement('div', { style: { fontSize: 11, color: 'var(--ink-2)', marginBottom: 10 } }, sub),
      React.createElement('div', null, children)
    );
  }

  function RankedTable({ rows, cols, dim, onSelect, max = 12 }) {
    return React.createElement('div', { style: { border: '1px solid var(--rule)' } },
      React.createElement('div', {
        style: { display: 'grid', gridTemplateColumns: cols.map(c => c.w || '1fr').join(' '), gap: 14, padding: '10px 16px', borderBottom: '1px solid var(--rule)', background: 'var(--bg-2)' }
      }, cols.map((c, i) => React.createElement(Mono, { key: i, upper: true, size: 9, color: 'var(--ink-3)', style: { textAlign: c.align || 'left' } }, c.l))),
      rows.slice(0, max).map((r, i) =>
        React.createElement('div', {
          key: r.id || i,
          onClick: () => onSelect && onSelect(r),
          style: { display: 'grid', gridTemplateColumns: cols.map(c => c.w || '1fr').join(' '), gap: 14, padding: '11px 16px', borderBottom: i < Math.min(max, rows.length) - 1 ? '1px solid var(--rule-soft)' : 0, alignItems: 'baseline', cursor: 'pointer' }
        }, cols.map((c, ci) => {
          const v = c.fn(r, i);
          return React.createElement('div', { key: ci, style: { textAlign: c.align || 'left', fontSize: c.size || 12, color: c.color || 'var(--ink)', fontFamily: c.mono ? 'var(--font-mono, ui-monospace)' : 'inherit', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, v);
        }))
      )
    );
  }

  function commonKpis(rows) {
    const total = rows.reduce((s, r) => s + r.total, 0);
    const totalStreams = rows.reduce((s, r) => s + r.streams, 0);
    const popAvg = rows.reduce((s, r) => s + (r.pop || 0) * r.total, 0) / Math.max(1, total);
    const top = rows[0];
    const top5Share = total ? rows.slice(0, 5).reduce((s, r) => s + r.total, 0) / total : 0;
    return { total, totalStreams, popAvg, top, top5Share };
  }

  // ═══════════════════════════════════════════════
  // MARKET TAB
  // ═══════════════════════════════════════════════
  function MarketTab({ ctx, onDrill }) {
    const rows = E.applyXFilter(E.buildDim('market', ctx), 'market');
    const k = commonKpis(rows);
    const aggSeries = rows[0]?.series.map((p, i) => ({ t: p.t, v: rows.reduce((s, r) => s + r.series[i].v, 0) })) || [];
    return React.createElement('div', null,
      React.createElement(KPIStrip, { kpis: [
        { label: 'EARNINGS · ALL MARKETS', value: C.fmt$(k.total), sub: ctx.periodLabel, pop: k.popAvg, sparkSeries: aggSeries },
        { label: 'STREAMS', value: C.fmtN(k.totalStreams), sub: 'Aggregate plays' },
        { label: 'TOP MARKET', value: k.top?.label || '—', sub: C.fmt$(k.top?.total) + ' · ' + ((k.top?.total / k.total) * 100).toFixed(1) + '% of mix' },
        { label: 'TOP-5 CONCENTRATION', value: (k.top5Share * 100).toFixed(0) + '%', sub: 'of earnings' },
      ]}),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 1, title: 'GEOGRAPHIC FOOTPRINT · BUBBLE = EARNINGS', sub: ctx.periodLabel },
          React.createElement(C.Choropleth, { rows, w: 540, h: 280 })
        ),
        React.createElement(ChartCard, { key: 2, title: 'EARNINGS BY MARKET · TOP 12', sub: 'Click to filter the rest of analytics' },
          React.createElement(C.BarsH, { rows: rows.slice(0, 12), w: 480, h: 280, color: 'var(--ink)', onRowClick: (r) => E.setXFilter({ dim: 'market', id: r.id, label: r.label }) })
        ),
      ]),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 3, title: 'TERRITORY → DSP FLOW · SANKEY' },
          React.createElement(C.Sankey, { flows: E.buildSankey(ctx), leftMap: Object.fromEntries(E.MARKETS.map(m => [m.k, m])), rightMap: Object.fromEntries(E.PLATFORMS.map(p => [p.k, p])), w: 540, h: 320 })
        ),
        React.createElement(ChartCard, { key: 4, title: 'CONCENTRATION · PARETO' },
          React.createElement(C.Pareto, { rows, w: 480, h: 320 })
        ),
      ]),
      ChartGrid({ cols: 1 }, [
        React.createElement(ChartCard, { key: 5, title: 'DAILY HEATMAP · ALL MARKETS' },
          React.createElement(C.HeatmapCal, { series: aggSeries })
        ),
      ]),
      RankedTable({
        rows, dim: 'market', onSelect: (r) => onDrill('market', r),
        cols: [
          { l: '#',        w: '34px',  fn: (_r, i) => String(i + 1).padStart(2, '0'), mono: true, color: 'var(--ink-3)' },
          { l: 'MARKET',   w: '1fr',   fn: r => r.label },
          { l: 'CODE',     w: '60px',  fn: r => r.code, mono: true, color: 'var(--ink-3)' },
          { l: 'EARNINGS', w: '110px', fn: r => C.fmt$(r.total), align: 'right', mono: true },
          { l: 'STREAMS',  w: '90px',  fn: r => C.fmtN(r.streams), align: 'right', mono: true, color: 'var(--ink-3)' },
          { l: 'POP',      w: '70px',  fn: r => React.createElement('span', { style: { color: r.pop >= 0 ? '#0a8754' : '#a32a18' } }, C.fmtPct(r.pop)), align: 'right', mono: true },
          { l: 'SHARE',    w: '60px',  fn: r => ((r.total / k.total) * 100).toFixed(1) + '%', align: 'right', mono: true, color: 'var(--ink-3)' },
        ]
      })
    );
  }

  // ═══════════════════════════════════════════════
  // ARTIST TAB
  // ═══════════════════════════════════════════════
  function ArtistTab({ ctx, onDrill }) {
    const rows = E.applyXFilter(E.buildDim('artist', ctx), 'artist');
    const k = commonKpis(rows);
    const aggSeries = rows[0]?.series.map((p, i) => ({ t: p.t, v: rows.slice(0, 20).reduce((s, r) => s + r.series[i].v, 0) })) || [];
    return React.createElement('div', null,
      React.createElement(KPIStrip, { kpis: [
        { label: 'ROSTER EARNINGS', value: C.fmt$(k.total), sub: rows.length + ' artists', pop: k.popAvg, sparkSeries: aggSeries },
        { label: 'TOP ARTIST', value: (k.top?.label || '—').slice(0, 18), sub: C.fmt$(k.top?.total) },
        { label: 'AVG · ARTIST',  value: C.fmt$(k.total / Math.max(1, rows.length)), sub: 'Mean earnings' },
        { label: 'CONCENTRATION', value: (k.top5Share * 100).toFixed(0) + '%', sub: 'Top-5 share' },
      ]}),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 1, title: 'EARNINGS BY ARTIST · TOP 12' },
          React.createElement(C.BarsH, { rows: rows.slice(0, 12), w: 480, h: 320, color: 'var(--ink)', onRowClick: (r) => E.setXFilter({ dim: 'artist', id: r.id, label: r.label }) })
        ),
        React.createElement(ChartCard, { key: 2, title: 'GROWTH × EARNINGS · QUADRANT', sub: 'PoP vs total · upper-right = stars' },
          React.createElement(C.Quadrant, { rows: rows.slice(0, 24), w: 480, h: 320 })
        ),
      ]),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 3, title: 'ROSTER PARETO' },
          React.createElement(C.Pareto, { rows, w: 480, h: 280 })
        ),
        React.createElement(ChartCard, { key: 4, title: 'AGGREGATE TREND · TOP 20', sub: '7-day moving average' },
          React.createElement(C.LineChart, { series: E.smooth(aggSeries), w: 480, h: 280 })
        ),
      ]),
      RankedTable({
        rows, dim: 'artist', onSelect: (r) => onDrill('artist', r),
        cols: [
          { l: '#', w: '34px', fn: (_r, i) => String(i + 1).padStart(2, '0'), mono: true, color: 'var(--ink-3)' },
          { l: 'ARTIST', w: '1fr', fn: r => r.label },
          { l: 'COUNTRY', w: '70px', fn: r => r.country || '—', mono: true, color: 'var(--ink-3)' },
          { l: 'EARNINGS', w: '110px', fn: r => C.fmt$(r.total), align: 'right', mono: true },
          { l: 'STREAMS', w: '90px', fn: r => C.fmtN(r.streams), align: 'right', mono: true, color: 'var(--ink-3)' },
          { l: 'POP', w: '70px', fn: r => React.createElement('span', { style: { color: r.pop >= 0 ? '#0a8754' : '#a32a18' } }, C.fmtPct(r.pop)), align: 'right', mono: true },
          { l: 'TREND', w: '80px', fn: r => React.createElement(C.Sparkline, { series: r.series, w: 70, h: 18 }), align: 'right' },
        ]
      })
    );
  }

  // ═══════════════════════════════════════════════
  // WORK TAB
  // ═══════════════════════════════════════════════
  function WorkTab({ ctx, onDrill }) {
    const rows = E.applyXFilter(E.buildDim('work', ctx), 'work');
    const k = commonKpis(rows);
    const aggSeries = rows[0]?.series.map((p, i) => ({ t: p.t, v: rows.reduce((s, r) => s + r.series[i].v, 0) })) || [];
    return React.createElement('div', null,
      React.createElement(KPIStrip, { kpis: [
        { label: 'PUB EARNINGS', value: C.fmt$(k.total), sub: rows.length + ' works', pop: k.popAvg, sparkSeries: aggSeries },
        { label: 'TOP WORK', value: (k.top?.label || '—').slice(0, 16), sub: C.fmt$(k.top?.total) },
        { label: 'AVG · WORK',  value: C.fmt$(k.total / Math.max(1, rows.length)), sub: 'Mean earnings' },
        { label: 'CONCENTRATION', value: (k.top5Share * 100).toFixed(0) + '%', sub: 'Top-5 of catalog' },
      ]}),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 1, title: 'EARNINGS BY WORK · TOP 12' },
          React.createElement(C.BarsH, { rows: rows.slice(0, 12), w: 480, h: 320, color: 'var(--ink)', onRowClick: (r) => E.setXFilter({ dim: 'work', id: r.id, label: r.label }) })
        ),
        React.createElement(ChartCard, { key: 2, title: 'CATALOG PARETO · 80/20 TEST' },
          React.createElement(C.Pareto, { rows, w: 480, h: 320 })
        ),
      ]),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 3, title: 'GROWTH × EARNINGS · WORKS' },
          React.createElement(C.Quadrant, { rows: rows.slice(0, 30), w: 480, h: 280 })
        ),
        React.createElement(ChartCard, { key: 4, title: 'AGGREGATE TREND', sub: '7-day MA' },
          React.createElement(C.LineChart, { series: E.smooth(aggSeries), w: 480, h: 280 })
        ),
      ]),
      RankedTable({
        rows, dim: 'work', onSelect: (r) => onDrill('work', r),
        cols: [
          { l: '#', w: '34px', fn: (_r, i) => String(i + 1).padStart(2, '0'), mono: true, color: 'var(--ink-3)' },
          { l: 'TITLE', w: '1fr', fn: r => r.label },
          { l: 'ISWC', w: '120px', fn: r => r.iswc || '—', mono: true, color: 'var(--ink-3)' },
          { l: 'EARNINGS', w: '110px', fn: r => C.fmt$(r.total), align: 'right', mono: true },
          { l: 'STREAMS', w: '90px', fn: r => C.fmtN(r.streams), align: 'right', mono: true, color: 'var(--ink-3)' },
          { l: 'POP', w: '70px', fn: r => React.createElement('span', { style: { color: r.pop >= 0 ? '#0a8754' : '#a32a18' } }, C.fmtPct(r.pop)), align: 'right', mono: true },
        ]
      })
    );
  }

  // ═══════════════════════════════════════════════
  // RECORDING TAB
  // ═══════════════════════════════════════════════
  function RecordingTab({ ctx, onDrill }) {
    const rows = E.applyXFilter(E.buildDim('recording', ctx), 'recording');
    const k = commonKpis(rows);
    const aggSeries = rows[0]?.series.map((p, i) => ({ t: p.t, v: rows.reduce((s, r) => s + r.series[i].v, 0) })) || [];
    return React.createElement('div', null,
      React.createElement(KPIStrip, { kpis: [
        { label: 'MASTER EARNINGS', value: C.fmt$(k.total), sub: rows.length + ' recordings', pop: k.popAvg, sparkSeries: aggSeries },
        { label: 'TOP RECORDING', value: (k.top?.label || '—').slice(0, 16), sub: C.fmt$(k.top?.total) },
        { label: 'STREAMS', value: C.fmtN(k.totalStreams), sub: 'Plays' },
        { label: 'CONCENTRATION', value: (k.top5Share * 100).toFixed(0) + '%', sub: 'Top-5 share' },
      ]}),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 1, title: 'EARNINGS BY RECORDING · TOP 12' },
          React.createElement(C.BarsH, { rows: rows.slice(0, 12), w: 480, h: 320, color: 'var(--ink)', onRowClick: (r) => E.setXFilter({ dim: 'recording', id: r.id, label: r.label }) })
        ),
        React.createElement(ChartCard, { key: 2, title: 'GROWTH × EARNINGS' },
          React.createElement(C.Quadrant, { rows: rows.slice(0, 30), w: 480, h: 320 })
        ),
      ]),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 3, title: 'STREAM HEATMAP · ALL RECORDINGS' },
          React.createElement(C.HeatmapCal, { series: aggSeries })
        ),
        React.createElement(ChartCard, { key: 4, title: 'PARETO · MASTERS' },
          React.createElement(C.Pareto, { rows, w: 480, h: 280 })
        ),
      ]),
      RankedTable({
        rows, dim: 'recording', onSelect: (r) => onDrill('recording', r),
        cols: [
          { l: '#', w: '34px', fn: (_r, i) => String(i + 1).padStart(2, '0'), mono: true, color: 'var(--ink-3)' },
          { l: 'TITLE', w: '1fr', fn: r => r.label },
          { l: 'ARTIST', w: '160px', fn: r => r.artist || '—', color: 'var(--ink-2)' },
          { l: 'ISRC', w: '120px', fn: r => r.isrc || '—', mono: true, color: 'var(--ink-3)' },
          { l: 'EARNINGS', w: '110px', fn: r => C.fmt$(r.total), align: 'right', mono: true },
          { l: 'POP', w: '70px', fn: r => React.createElement('span', { style: { color: r.pop >= 0 ? '#0a8754' : '#a32a18' } }, C.fmtPct(r.pop)), align: 'right', mono: true },
        ]
      })
    );
  }

  // ═══════════════════════════════════════════════
  // RELEASE TAB
  // ═══════════════════════════════════════════════
  function ReleaseTab({ ctx, onDrill }) {
    const rows = E.applyXFilter(E.buildDim('release', ctx), 'release');
    const k = commonKpis(rows);
    const aggSeries = rows[0]?.series.map((p, i) => ({ t: p.t, v: rows.reduce((s, r) => s + r.series[i].v, 0) })) || [];
    return React.createElement('div', null,
      React.createElement(KPIStrip, { kpis: [
        { label: 'RELEASE EARNINGS', value: C.fmt$(k.total), sub: rows.length + ' releases', pop: k.popAvg, sparkSeries: aggSeries },
        { label: 'TOP RELEASE', value: (k.top?.label || '—').slice(0, 16), sub: C.fmt$(k.top?.total) },
        { label: 'AVG · RELEASE', value: C.fmt$(k.total / Math.max(1, rows.length)), sub: 'Mean earnings' },
        { label: 'CONCENTRATION', value: (k.top5Share * 100).toFixed(0) + '%', sub: 'Top-5 share' },
      ]}),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 1, title: 'EARNINGS BY RELEASE · TOP 12' },
          React.createElement(C.BarsH, { rows: rows.slice(0, 12), w: 480, h: 320, color: 'var(--ink)', onRowClick: (r) => E.setXFilter({ dim: 'release', id: r.id, label: r.label }) })
        ),
        React.createElement(ChartCard, { key: 2, title: 'COHORT · RELEASE YEAR × MONTH-AGE' },
          React.createElement(C.Cohort, { cohorts: E.buildCohort(ctx), w: 480, h: 320 })
        ),
      ]),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 3, title: 'RELEASE FUNNEL', sub: 'Discovery → engagement → repeat' },
          React.createElement(C.Funnel, { stages: E.buildFunnel(ctx), w: 480, h: 280 })
        ),
        React.createElement(ChartCard, { key: 4, title: 'RELEASE PARETO' },
          React.createElement(C.Pareto, { rows, w: 480, h: 280 })
        ),
      ]),
      RankedTable({
        rows, dim: 'release', onSelect: (r) => onDrill('release', r),
        cols: [
          { l: '#', w: '34px', fn: (_r, i) => String(i + 1).padStart(2, '0'), mono: true, color: 'var(--ink-3)' },
          { l: 'TITLE', w: '1fr', fn: r => r.label },
          { l: 'ARTIST', w: '160px', fn: r => r.artist || '—', color: 'var(--ink-2)' },
          { l: 'TYPE', w: '70px', fn: r => r.type || '—', mono: true, color: 'var(--ink-3)' },
          { l: 'EARNINGS', w: '110px', fn: r => C.fmt$(r.total), align: 'right', mono: true },
          { l: 'POP', w: '70px', fn: r => React.createElement('span', { style: { color: r.pop >= 0 ? '#0a8754' : '#a32a18' } }, C.fmtPct(r.pop)), align: 'right', mono: true },
        ]
      })
    );
  }

  // ═══════════════════════════════════════════════
  // VIDEO TAB
  // ═══════════════════════════════════════════════
  function VideoTab({ ctx, onDrill }) {
    const rows = E.applyXFilter(E.buildDim('video', ctx), 'video');
    const k = commonKpis(rows);
    const aggSeries = rows[0]?.series.map((p, i) => ({ t: p.t, v: rows.reduce((s, r) => s + r.series[i].v, 0) })) || [];
    return React.createElement('div', null,
      React.createElement(KPIStrip, { kpis: [
        { label: 'VIDEO EARNINGS', value: C.fmt$(k.total), sub: rows.length + ' videos', pop: k.popAvg, sparkSeries: aggSeries },
        { label: 'VIEWS', value: C.fmtN(k.totalStreams), sub: 'YT + UGC' },
        { label: 'TOP VIDEO', value: (k.top?.label || '—').slice(0, 16), sub: C.fmt$(k.top?.total) },
        { label: 'CPM EQUIV', value: '$' + (k.totalStreams ? (k.total / k.totalStreams * 1000).toFixed(2) : '0.00'), sub: 'Per 1k views' },
      ]}),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 1, title: 'EARNINGS BY VIDEO' },
          React.createElement(C.BarsH, { rows: rows.slice(0, 12), w: 480, h: 320, color: 'var(--ink)', onRowClick: (r) => E.setXFilter({ dim: 'video', id: r.id, label: r.label }) })
        ),
        React.createElement(ChartCard, { key: 2, title: 'AGGREGATE VIEW TREND', sub: '7-day MA' },
          React.createElement(C.LineChart, { series: E.smooth(aggSeries), w: 480, h: 320 })
        ),
      ]),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 3, title: 'GROWTH × EARNINGS' },
          React.createElement(C.Quadrant, { rows: rows.slice(0, 24), w: 480, h: 280 })
        ),
        React.createElement(ChartCard, { key: 4, title: 'PARETO' },
          React.createElement(C.Pareto, { rows, w: 480, h: 280 })
        ),
      ]),
      RankedTable({
        rows, dim: 'video', onSelect: (r) => onDrill('video', r),
        cols: [
          { l: '#', w: '34px', fn: (_r, i) => String(i + 1).padStart(2, '0'), mono: true, color: 'var(--ink-3)' },
          { l: 'TITLE', w: '1fr', fn: r => r.label },
          { l: 'KIND', w: '120px', fn: r => r.kind || '—', mono: true, color: 'var(--ink-3)' },
          { l: 'EARNINGS', w: '110px', fn: r => C.fmt$(r.total), align: 'right', mono: true },
          { l: 'VIEWS', w: '90px', fn: r => C.fmtN(r.streams), align: 'right', mono: true, color: 'var(--ink-3)' },
          { l: 'POP', w: '70px', fn: r => React.createElement('span', { style: { color: r.pop >= 0 ? '#0a8754' : '#a32a18' } }, C.fmtPct(r.pop)), align: 'right', mono: true },
        ]
      })
    );
  }

  // ═══════════════════════════════════════════════
  // PLATFORM TAB
  // ═══════════════════════════════════════════════
  function PlatformTab({ ctx, onDrill }) {
    const rows = E.applyXFilter(E.buildDim('platform', ctx), 'platform');
    const k = commonKpis(rows);
    const aggSeries = rows[0]?.series.map((p, i) => ({ t: p.t, v: rows.reduce((s, r) => s + r.series[i].v, 0) })) || [];

    // Build stacked-bar data: 12 months × top 8 platforms
    const months = [];
    const now = new Date();
    for (let i = 11; i >= 0; i--) {
      const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
      months.push(d.toISOString().slice(0, 7));
    }
    const topPlats = rows.slice(0, 8);
    const segments = topPlats.map(p => ({
      k: p.id, l: p.label, color: p.color,
      values: months.map((_, mi) => {
        // distribute total across months by series sum * monthly factor
        const monthSum = p.total / 12;
        const factor = 0.85 + (Math.sin(mi / 2) * 0.15);
        return monthSum * factor;
      })
    }));

    return React.createElement('div', null,
      React.createElement(KPIStrip, { kpis: [
        { label: 'PLATFORM EARNINGS', value: C.fmt$(k.total), sub: rows.length + ' DSPs', pop: k.popAvg, sparkSeries: aggSeries },
        { label: 'TOP PLATFORM', value: (k.top?.label || '—'), sub: C.fmt$(k.top?.total) + ' · ' + ((k.top?.total / k.total) * 100).toFixed(0) + '%' },
        { label: 'STREAMS', value: C.fmtN(k.totalStreams), sub: 'Aggregate' },
        { label: 'CONCENTRATION', value: (k.top5Share * 100).toFixed(0) + '%', sub: 'Top-5 share' },
      ]}),
      ChartGrid({ cols: 2 }, [
        React.createElement(ChartCard, { key: 1, title: 'PLATFORM MIX · TOP 12' },
          React.createElement(C.BarsH, { rows: rows.slice(0, 12), w: 480, h: 320, onRowClick: (r) => E.setXFilter({ dim: 'platform', id: r.id, label: r.label }) })
        ),
        React.createElement(ChartCard, { key: 2, title: 'MIX SHARE · DONUT' },
          React.createElement('div', { style: { display: 'flex', gap: 14, alignItems: 'center' } },
            React.createElement(C.Donut, { slices: rows.slice(0, 8).map(r => ({ value: r.total, color: r.color, label: r.label })), size: 200 }),
            React.createElement('div', { style: { flex: 1 } },
              rows.slice(0, 8).map((r, i) => React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', fontSize: 12, color: 'var(--ink-2)' } },
                React.createElement('span', { style: { width: 10, height: 10, background: r.color, display: 'inline-block' } }),
                React.createElement('span', { style: { flex: 1 } }, r.label),
                React.createElement(Mono, { size: 11 }, ((r.total / k.total) * 100).toFixed(1) + '%')
              ))
            )
          )
        ),
      ]),
      ChartGrid({ cols: 1 }, [
        React.createElement(ChartCard, { key: 3, title: '12-MONTH PLATFORM MIX · STACKED' },
          React.createElement(C.StackedBars, { months, segments, w: 1000, h: 240 })
        ),
      ]),
      RankedTable({
        rows, dim: 'platform', onSelect: (r) => onDrill('platform', r),
        cols: [
          { l: '#', w: '34px', fn: (_r, i) => String(i + 1).padStart(2, '0'), mono: true, color: 'var(--ink-3)' },
          { l: 'PLATFORM', w: '1fr', fn: r => React.createElement('span', null,
            React.createElement('span', { style: { display: 'inline-block', width: 10, height: 10, background: r.color, marginRight: 8, verticalAlign: '-1px' } }),
            r.label
          )},
          { l: 'EARNINGS', w: '110px', fn: r => C.fmt$(r.total), align: 'right', mono: true },
          { l: 'STREAMS', w: '90px', fn: r => C.fmtN(r.streams), align: 'right', mono: true, color: 'var(--ink-3)' },
          { l: 'SHARE', w: '60px', fn: r => ((r.total / k.total) * 100).toFixed(1) + '%', align: 'right', mono: true, color: 'var(--ink-3)' },
          { l: 'POP', w: '70px', fn: r => React.createElement('span', { style: { color: r.pop >= 0 ? '#0a8754' : '#a32a18' } }, C.fmtPct(r.pop)), align: 'right', mono: true },
        ]
      })
    );
  }

  window.AnalyticsTabs = { MarketTab, ArtistTab, WorkTab, RecordingTab, ReleaseTab, VideoTab, PlatformTab };
})();