// SCREEN: Scope Intelligence
// Nav ID: scope
// Purpose: Cross-channel analytics — blended ROAS, channel mix, content paths, budget pulse.
//
// API endpoints (all read-only):
//   GET /v1/scope/roas?start_date=YYYY-MM-DD&end_date=YYYY-MM-DD
//     → { blended_roas, channels: [{channel, spend, revenue, impressions, conversions, roas}], error }
//   GET /v1/scope/mix?start_date=...&end_date=...
//     → { channels: { meta: 0.42, google: 0.31, ... }, error }
//   GET /v1/scope/paths?start_date=...&end_date=...
//     → { paths: [{ path: string[], touchpoints, conversions, cvr }], error }
//   GET /v1/scope/pulse?days=N
//     → { daily_spend: [{date, spend}], total_spend, weekly_trend, avg_daily_spend, error }

// ─── MOCK DATA ───────────────────────────────────────────────────────────────
const SCOPE_MOCK = {
  blended_roas: 3.6,

  channels: [
    { channel: 'meta',    spend: 42000, revenue: 148000, impressions: 1840000, conversions: 892, roas: 3.52 },
    { channel: 'google',  spend: 31000, revenue: 112000, impressions: 980000,  conversions: 714, roas: 3.61 },
    { channel: 'tiktok',  spend: 8000,  revenue: 22400,  impressions: 412000,  conversions: 184, roas: 2.80 },
    { channel: 'organic', spend: 0,     revenue: 31000,  impressions: 620000,  conversions: 413, roas: null },
  ],

  mix: { meta: 0.42, google: 0.31, tiktok: 0.11, linkedin: 0.09, organic: 0.07 },

  pulse: {
    total_spend:     81000,
    weekly_trend:    0.082,  // +8.2% WoW
    avg_daily_spend: 5785,
    // Synthetic 14-day daily spend series — generated at module load time
    daily_spend: (function() {
      const base = [4200, 5100, 6300, 4800, 5500, 7200, 6100, 5800, 6700, 7800, 5400, 6200, 7100, 6500];
      const today = new Date();
      return base.map((spend, i) => {
        const d = new Date(today);
        d.setDate(d.getDate() - (13 - i));
        return { date: d.toISOString().split('T')[0], spend };
      });
    })(),
  },

  paths: [
    { path: ['meta_ad',       'page_view', 'purchase'],                  touchpoints: 92,  conversions: 18, cvr: 19.6 },
    { path: ['google_search', 'pdp',       'atc',     'purchase'],       touchpoints: 184, conversions: 31, cvr: 16.8 },
    { path: ['organic',       'blog',      'email',   'purchase'],       touchpoints: 64,  conversions:  9, cvr: 14.1 },
    { path: ['meta_ad',       'pdp',       'atc',     'checkout', 'purchase'], touchpoints: 142, conversions: 22, cvr: 15.5 },
    { path: ['google_search', 'landing_page', 'form_submit'],            touchpoints: 210, conversions: 28, cvr: 13.3 },
  ],
};

// ─── CHANNEL DISPLAY CONFIG: colour + display label ──────────────────────────
const SCOPE_CH = {
  meta:     { color: '#8B5CF6', label: 'Meta Ads'  },
  google:   { color: '#22D3EE', label: 'Google'    },
  tiktok:   { color: '#F43F5E', label: 'TikTok'    },
  linkedin: { color: '#60A5FA', label: 'LinkedIn'  },
  organic:  { color: '#10B981', label: 'Organic'   },
};

// ─── HELPERS ─────────────────────────────────────────────────────────────────

// Build ISO date strings from a "last N days" range
const scopeBuildRange = (days) => {
  const today = new Date();
  const startDate = new Date(today);
  startDate.setDate(startDate.getDate() - days);
  return {
    start: startDate.toISOString().split('T')[0],
    end:   today.toISOString().split('T')[0],
  };
};

// Compact currency formatter
const scopeFmt = (n) => {
  if (n == null) return '—';
  if (n >= 1e6)  return '$' + (n / 1e6).toFixed(2) + 'M';
  if (n >= 1e3)  return '$' + (n / 1e3).toFixed(0) + 'K';
  return '$' + n.toLocaleString();
};

// ─── SUB-COMPONENTS ──────────────────────────────────────────────────────────

// SVG donut showing spend mix by channel
const ScopeDonut = ({ mix }) => {
  const cx = 80, cy = 80, r = 56, sw = 18;
  const circ = 2 * Math.PI * r;
  const entries = Object.entries(mix);
  let offset = 0;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
      <svg width="160" height="160" viewBox="0 0 160 160" style={{ flexShrink: 0 }}>
        {entries.map(([ch, pct]) => {
          const cfg = SCOPE_CH[ch] || { color: '#6B7489' };
          const len = pct * circ;
          const el = (
            <circle key={ch}
              cx={cx} cy={cy} r={r} fill="none"
              stroke={cfg.color} strokeWidth={sw}
              strokeDasharray={`${len} ${circ - len}`}
              strokeDashoffset={-offset}
              transform={`rotate(-90 ${cx} ${cy})`}
            />
          );
          offset += len;
          return el;
        })}
        {/* Centre label */}
        <text x={cx} y={cy - 7}  textAnchor="middle" fill="var(--text-3)"
          fontSize="9" fontFamily="JetBrains Mono, monospace">SPEND MIX</text>
        <text x={cx} y={cy + 12} textAnchor="middle" fill="var(--text-1)"
          fontSize="20" fontWeight="700">{entries.length}ch</text>
      </svg>

      {/* Legend */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9, flex: 1 }}>
        {entries.map(([ch, pct]) => {
          const cfg = SCOPE_CH[ch] || { color: '#6B7489', label: ch };
          return (
            <div key={ch} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{
                width: 8, height: 8, borderRadius: 2,
                background: cfg.color, flexShrink: 0,
              }} />
              <span style={{ fontSize: 12, color: 'var(--text-2)', flex: 1 }}>{cfg.label}</span>
              <span style={{
                fontSize: 12, fontFamily: 'var(--mono)',
                color: 'var(--text-1)', fontWeight: 600,
              }}>{Math.round(pct * 100)}%</span>
            </div>
          );
        })}
        <div style={{
          marginTop: 4, fontSize: 9, color: 'var(--text-4)',
          fontFamily: 'var(--mono)', paddingTop: 8,
          borderTop: '1px dashed var(--border)',
        }}>Based on total paid spend allocation</div>
      </div>
    </div>
  );
};

// SVG area chart for budget pulse
const PulseChart = ({ dailySpend, weeklyTrend }) => {
  if (!dailySpend || !dailySpend.length) return null;
  const w = 600, h = 130;
  const pad = { t: 14, b: 28, l: 42, r: 14 };
  const iW = w - pad.l - pad.r;
  const iH = h - pad.t - pad.b;
  const n = dailySpend.length;
  const maxV = Math.max(...dailySpend.map(d => d.spend)) * 1.15;
  const X = i => pad.l + (i / (n - 1)) * iW;
  const Y = v => pad.t + iH - (v / maxV) * iH;
  const positive = weeklyTrend == null || weeklyTrend >= 0;
  const lineColor = positive ? 'var(--emerald)' : 'var(--amber)';

  const lineD = dailySpend.map((d, i) => `${i === 0 ? 'M' : 'L'}${X(i).toFixed(1)} ${Y(d.spend).toFixed(1)}`).join(' ');
  const areaD = lineD + ` L${X(n - 1).toFixed(1)} ${h - pad.b} L${X(0).toFixed(1)} ${h - pad.b} Z`;

  // Sparse Y-axis ticks
  const yTicks = [0, 0.5, 1].map(t => ({
    y:     pad.t + iH - t * iH,
    label: scopeFmt(maxV * t),
  }));
  // X-axis labels every ~4 days
  const step = Math.ceil(n / 4);
  const xLabels = dailySpend.filter((_, i) => i % step === 0 || i === n - 1).map(d => ({
    x:     X(dailySpend.indexOf(d)),
    label: d.date.slice(5), // MM-DD
  }));

  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="scopeAreaGrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"   stopColor={lineColor} stopOpacity="0.28" />
          <stop offset="100%" stopColor={lineColor} stopOpacity="0.02" />
        </linearGradient>
      </defs>
      {/* Grid */}
      {yTicks.map(t => (
        <line key={t.y} x1={pad.l} x2={w - pad.r} y1={t.y} y2={t.y}
          stroke="#232A3B" strokeDasharray="2 4" />
      ))}
      {/* Y labels */}
      {yTicks.map(t => (
        <text key={t.y} x={pad.l - 5} y={t.y + 4} textAnchor="end"
          fontSize="8" fill="var(--text-4)" fontFamily="JetBrains Mono, monospace">
          {t.label}
        </text>
      ))}
      {/* X labels */}
      {xLabels.map(l => (
        <text key={l.label} x={l.x} y={h - 5} textAnchor="middle"
          fontSize="8" fill="var(--text-4)" fontFamily="JetBrains Mono, monospace">
          {l.label}
        </text>
      ))}
      {/* Area + line */}
      <path d={areaD} fill="url(#scopeAreaGrad)" />
      <path d={lineD} stroke={lineColor} strokeWidth="2" fill="none" strokeLinejoin="round" />
      {/* Data point dots */}
      {dailySpend.map((d, i) => (
        <circle key={i} cx={X(i)} cy={Y(d.spend)} r="2.5"
          fill={lineColor} stroke="var(--bg-2)" strokeWidth="1.5" />
      ))}
      {/* WoW trend badge (top-right) */}
      {weeklyTrend != null && (
        <text x={w - pad.r} y={pad.t + 10} textAnchor="end"
          fontSize="10" fontWeight="700" fill={lineColor}
          fontFamily="JetBrains Mono, monospace">
          {weeklyTrend >= 0 ? '↑' : '↓'} {Math.abs(Math.round(weeklyTrend * 100))}% WoW
        </text>
      )}
    </svg>
  );
};

// ─── MAIN SCREEN ─────────────────────────────────────────────────────────────
const ScopeScreen = ({ refreshKey = 0 }) => {
  const [dr,        setDr]        = React.useState('30d');
  const [roasData,  setRoasData]  = React.useState(SCOPE_MOCK);
  const [mixData,   setMixData]   = React.useState(SCOPE_MOCK.mix);
  const [pulseData, setPulseData] = React.useState(SCOPE_MOCK.pulse);
  const [pathsData, setPathsData] = React.useState(SCOPE_MOCK.paths);
  const [loading,   setLoading]   = React.useState(false);

  const getDays = () => ({ '7d': 7, '14d': 14, '30d': 30, '90d': 90 }[dr] || 30);

  // ── API wiring — fires whenever the date range changes ────────────────────
  React.useEffect(() => {
    const ac = new AbortController();
    const days = getDays();
    const { start, end } = scopeBuildRange(days);
    const qs = `start_date=${start}&end_date=${end}`;

    setLoading(true);

    // Blended ROAS + channel breakdown
    const p1 = arFetch(`/v1/scope/roas?${qs}`, { signal: ac.signal })
      .then(data => {
        if (!data || data.error) return;
        setRoasData(prev => ({
          ...prev,
          blended_roas: data.blended_roas ?? prev.blended_roas,
          channels: Array.isArray(data.channels) && data.channels.length
            ? data.channels : prev.channels,
        }));
      })
      .catch(() => {}); // silently keep MOCK on error

    // Spend mix donut
    const p2 = arFetch(`/v1/scope/mix?${qs}`, { signal: ac.signal })
      .then(data => {
        if (data && data.channels && typeof data.channels === 'object' && !data.error) {
          setMixData(data.channels);
        }
      })
      .catch(() => {});

    // Budget pulse (days-based, not date-range)
    const p3 = arFetch(`/v1/scope/pulse?days=${days}`, { signal: ac.signal })
      .then(data => {
        if (!data || data.error) return;
        setPulseData(prev => ({
          ...prev,
          total_spend:     data.total_spend     ?? prev.total_spend,
          weekly_trend:    data.weekly_trend     ?? prev.weekly_trend,
          avg_daily_spend: data.avg_daily_spend  ?? prev.avg_daily_spend,
          daily_spend: Array.isArray(data.daily_spend) && data.daily_spend.length
            ? data.daily_spend : prev.daily_spend,
        }));
      })
      .catch(() => {});

    // Content paths
    const p4 = arFetch(`/v1/scope/paths?${qs}`, { signal: ac.signal })
      .then(data => {
        if (data && Array.isArray(data.paths) && data.paths.length && !data.error) {
          setPathsData(data.paths);
        }
      })
      .catch(() => {});

    Promise.allSettled([p1, p2, p3, p4]).finally(() => {
      if (!ac.signal.aborted) setLoading(false);
    });

    return () => ac.abort();
  }, [dr, refreshKey]);

  // ── Derived values ────────────────────────────────────────────────────────

  // Top channel by share in the mix
  const topChannel = React.useMemo(() => {
    const entries = Object.entries(mixData);
    if (!entries.length) return '—';
    const [ch] = entries.reduce((a, b) => b[1] > a[1] ? b : a);
    return (SCOPE_CH[ch] || { label: ch }).label;
  }, [mixData]);

  // Channels sorted by ROAS descending (null = organic, treated as highest)
  const sortedChannels = React.useMemo(() =>
    [...roasData.channels].sort((a, b) => {
      if (a.roas == null) return -1;
      if (b.roas == null) return  1;
      return b.roas - a.roas;
    }),
  [roasData.channels]);

  const totalChannelSpend = React.useMemo(() =>
    roasData.channels.reduce((s, c) => s + c.spend, 0),
  [roasData.channels]);

  // ── Render ────────────────────────────────────────────────────────────────
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

      {/* ── HEADER + DATE RANGE SELECTOR ────────────────────────────────── */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16 }}>
        <div>
          <div style={{
            fontSize: 11, color: 'var(--text-4)', fontFamily: 'var(--mono)',
            textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4,
          }}>Analytics / Scope</div>
          <div style={{ fontSize: 13, color: 'var(--text-3)' }}>
            Blended ROAS, channel mix, content paths, and budget pulse across all platforms
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {loading && (
            <span style={{ fontSize: 11, color: 'var(--text-4)', fontFamily: 'var(--mono)' }}>loading…</span>
          )}
          <div className="seg">
            {['7d', '14d', '30d', '90d'].map(d => (
              <button key={d} className={dr === d ? 'active' : ''} onClick={() => setDr(d)}>{d}</button>
            ))}
          </div>
        </div>
      </div>

      {/* ── 1. TOP KPI ROW ─────────────────────────────────────────────── */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          {
            label: 'Blended ROAS',
            value: roasData.blended_roas != null ? roasData.blended_roas.toFixed(2) + 'x' : '—',
            color: 'var(--accent)',
            sub:   'across all channels',
            seed:  7,
          },
          {
            label: 'Total Spend ' + dr,
            value: scopeFmt(pulseData.total_spend),
            color: 'var(--text-2)',
            sub:   scopeFmt(Math.round(pulseData.avg_daily_spend)) + ' / day avg',
            seed:  8,
          },
          {
            label: 'Weekly Trend',
            value: pulseData.weekly_trend != null
              ? (pulseData.weekly_trend >= 0 ? '+' : '') + Math.round(pulseData.weekly_trend * 100) + '%'
              : '—',
            color: pulseData.weekly_trend != null && pulseData.weekly_trend >= 0
              ? 'var(--emerald)' : 'var(--rose)',
            sub:   'vs prior week',
            seed:  9,
          },
          {
            label: 'Top Channel',
            value: topChannel,
            color: 'var(--cyan)',
            sub:   'by spend share',
            seed:  10,
          },
        ].map((kpi, i) => (
          <div key={i} className="metric" style={{
            background: 'var(--bg-2)', border: '1px solid var(--border)',
            borderRadius: 10, padding: '12px 14px',
          }}>
            <div className="metric-label">{kpi.label}</div>
            <div className="metric-value" style={{ color: kpi.color, fontSize: 22 }}>{kpi.value}</div>
            <div style={{
              fontSize: 11, color: 'var(--text-4)', marginTop: 3,
              fontFamily: 'var(--mono)',
            }}>{kpi.sub}</div>
            <Spark data={MOCK.spark(kpi.seed)} color={kpi.color} w={130} h={28} />
          </div>
        ))}
      </div>

      {/* ── 2 + 3. CHANNEL TABLE (60%) + DONUT (40%) ───────────────────── */}
      <div style={{ display: 'grid', gridTemplateColumns: '3fr 2fr', gap: 14 }}>

        {/* Channel ROAS table */}
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div className="card-header" style={{ padding: '12px 16px' }}>
            <div>
              <div className="card-title">Channel ROAS</div>
              <div className="card-sub">Sorted by return on ad spend · {dr}</div>
            </div>
            <span className="badge cyan" style={{ fontSize: 10 }}>{sortedChannels.length} channels</span>
          </div>

          <div style={{ overflowX: 'auto' }}>
            <table className="data-table">
              <thead>
                <tr>
                  <th>Channel</th>
                  <th style={{ textAlign: 'right' }}>Spend</th>
                  <th style={{ textAlign: 'right' }}>Revenue</th>
                  <th style={{ textAlign: 'right' }}>ROAS</th>
                  <th style={{ textAlign: 'right' }}>Conv.</th>
                  <th>Share</th>
                </tr>
              </thead>
              <tbody>
                {sortedChannels.map((ch, i) => {
                  const cfg = SCOPE_CH[ch.channel] || { color: '#6B7489', label: ch.channel };
                  const sharePct = totalChannelSpend > 0
                    ? Math.round((ch.spend / totalChannelSpend) * 100) : 0;
                  const isOrganic = ch.roas == null;
                  const roasColor = isOrganic ? 'var(--cyan)'
                    : ch.roas >= 3 ? 'var(--emerald)'
                    : ch.roas >= 2 ? 'var(--amber)' : 'var(--rose)';
                  return (
                    <tr key={i}>
                      <td>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <span style={{
                            width: 8, height: 8, borderRadius: 2,
                            background: cfg.color, flexShrink: 0,
                          }} />
                          <span style={{ color: 'var(--text-1)', fontWeight: 500 }}>{cfg.label}</span>
                        </div>
                      </td>
                      <td className="mono" style={{ textAlign: 'right' }}>
                        {ch.spend > 0 ? scopeFmt(ch.spend) : (
                          <span style={{ color: 'var(--text-4)' }}>—</span>
                        )}
                      </td>
                      <td className="mono" style={{ textAlign: 'right', color: 'var(--emerald)' }}>
                        {scopeFmt(ch.revenue)}
                      </td>
                      <td className="mono" style={{ textAlign: 'right', fontWeight: 700, color: roasColor }}>
                        {isOrganic ? '∞' : ch.roas.toFixed(2) + 'x'}
                      </td>
                      <td className="mono" style={{ textAlign: 'right' }}>
                        {ch.conversions.toLocaleString()}
                      </td>
                      <td style={{ width: 110 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                          <div style={{
                            flex: 1, height: 5,
                            background: 'var(--bg-1)', borderRadius: 3, overflow: 'hidden',
                          }}>
                            <div style={{
                              width: sharePct + '%', height: '100%',
                              background: cfg.color, borderRadius: 3,
                            }} />
                          </div>
                          <span className="mono" style={{
                            fontSize: 10, color: 'var(--text-3)',
                            minWidth: 28, textAlign: 'right',
                          }}>
                            {sharePct > 0 ? sharePct + '%' : '—'}
                          </span>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          <div style={{
            padding: '9px 16px',
            borderTop: '1px solid var(--border)',
            background: 'var(--bg-1)',
            fontSize: 10, color: 'var(--text-4)', fontFamily: 'var(--mono)',
          }}>
            Organic ROAS shown as ∞ (zero paid spend) · source: /v1/scope/roas
          </div>
        </div>

        {/* Channel mix donut */}
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Channel Mix</div>
              <div className="card-sub">Spend distribution · {dr}</div>
            </div>
          </div>
          <div style={{ marginTop: 14 }}>
            <ScopeDonut mix={mixData} />
          </div>
        </div>
      </div>

      {/* ── 4. BUDGET PULSE ────────────────────────────────────────────────── */}
      <div className="card">
        <div className="card-header">
          <div>
            <div className="card-title">Budget Pulse</div>
            <div className="card-sub">Daily spend · last {getDays()} days</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 11, color: 'var(--text-3)' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <span style={{
                width: 20, height: 2,
                background: pulseData.weekly_trend == null || pulseData.weekly_trend >= 0
                  ? 'var(--emerald)' : 'var(--amber)',
                display: 'inline-block', borderRadius: 1,
              }} />
              Daily spend
            </span>
            <span>Avg: <strong style={{ color: 'var(--text-1)' }}>
              {scopeFmt(Math.round(pulseData.avg_daily_spend))}
            </strong>/day</span>
          </div>
        </div>

        <div style={{ marginTop: 10 }}>
          <PulseChart
            dailySpend={pulseData.daily_spend}
            weeklyTrend={pulseData.weekly_trend}
          />
        </div>

        {/* Summary bar below chart */}
        <div style={{
          display: 'flex', gap: 28, marginTop: 10,
          paddingTop: 10, borderTop: '1px solid var(--border)',
        }}>
          {[
            {
              label: 'Total Spend',
              value: scopeFmt(pulseData.total_spend),
              color: 'var(--text-1)',
            },
            {
              label: 'Daily Average',
              value: scopeFmt(Math.round(pulseData.avg_daily_spend)),
              color: 'var(--text-1)',
            },
            {
              label: 'WoW Trend',
              value: pulseData.weekly_trend != null
                ? (pulseData.weekly_trend >= 0 ? '+' : '')
                  + Math.round(pulseData.weekly_trend * 100) + '%'
                : '—',
              color: pulseData.weekly_trend != null && pulseData.weekly_trend >= 0
                ? 'var(--emerald)' : 'var(--rose)',
            },
          ].map((s, i) => (
            <div key={i}>
              <div style={{
                fontSize: 10, color: 'var(--text-4)', textTransform: 'uppercase',
                letterSpacing: '0.07em', fontFamily: 'var(--mono)', marginBottom: 3,
              }}>{s.label}</div>
              <div style={{
                fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em',
                color: s.color, fontFamily: 'var(--mono)',
              }}>{s.value}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ── 5. TOP CONTENT PATHS ──────────────────────────────────────────── */}
      <div className="card">
        <div className="card-header">
          <div>
            <div className="card-title">Top Content Paths</div>
            <div className="card-sub">High-converting customer journeys · {dr}</div>
          </div>
          <span className="badge violet" style={{ fontSize: 10 }}>{pathsData.length} paths</span>
        </div>

        <div style={{ overflowX: 'auto', marginTop: 8 }}>
          <table className="data-table">
            <thead>
              <tr>
                <th style={{ width: 34 }}>#</th>
                <th>Path</th>
                <th style={{ textAlign: 'right' }}>Touchpoints</th>
                <th style={{ textAlign: 'right' }}>Conversions</th>
                <th style={{ width: 150 }}>CVR</th>
              </tr>
            </thead>
            <tbody>
              {pathsData.map((p, i) => {
                const path = Array.isArray(p.path) ? p.path : [];
                const cvrColor = p.cvr >= 18 ? 'var(--emerald)'
                  : p.cvr >= 13 ? 'var(--cyan)' : 'var(--amber)';
                return (
                  <tr key={i}>
                    <td className="mono" style={{ color: 'var(--text-4)', fontWeight: 600 }}>
                      #{i + 1}
                    </td>
                    <td>
                      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 4 }}>
                        {path.map((step, j) => (
                          <React.Fragment key={j}>
                            <span style={{
                              padding: '2px 8px',
                              background: 'var(--bg-3)',
                              border: '1px solid var(--border)',
                              borderRadius: 5,
                              fontSize: 11, color: 'var(--text-1)',
                              fontFamily: 'var(--mono)',
                            }}>{step}</span>
                            {j < path.length - 1 && (
                              <span style={{ color: 'var(--text-4)', fontSize: 11 }}>→</span>
                            )}
                          </React.Fragment>
                        ))}
                      </div>
                    </td>
                    <td className="mono" style={{ textAlign: 'right', color: 'var(--text-2)' }}>
                      {p.touchpoints.toLocaleString()}
                    </td>
                    <td className="mono" style={{ textAlign: 'right', color: 'var(--emerald)', fontWeight: 600 }}>
                      {p.conversions.toLocaleString()}
                    </td>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{
                          flex: 1, height: 5,
                          background: 'var(--bg-1)', borderRadius: 3, overflow: 'hidden',
                        }}>
                          <div style={{
                            width: Math.min(100, p.cvr * 4.5) + '%', height: '100%',
                            background: cvrColor, borderRadius: 3,
                          }} />
                        </div>
                        <span className="mono" style={{
                          fontSize: 12, fontWeight: 700, minWidth: 42,
                          textAlign: 'right', color: cvrColor,
                        }}>{p.cvr.toFixed(1)}%</span>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        <div style={{
          marginTop: 10, paddingTop: 8,
          borderTop: '1px dashed var(--border)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 10, color: 'var(--text-4)', fontFamily: 'var(--mono)',
        }}>
          <span>Source: /v1/scope/paths · AstraReach multi-touch attribution model</span>
          <button
            className="btn ghost"
            style={{ fontSize: 10, padding: '2px 8px', color: 'var(--accent)' }}
            onClick={() => { if (window.AR_NAVIGATE) window.AR_NAVIGATE('journey'); else console.warn('AR_NAVIGATE not registered — open from the main app'); }}
          >
            View full journey map →
          </button>
        </div>
      </div>

    </div>
  );
};

window.ScopeScreen = ScopeScreen;