// Channels screen — paid media connection + unified performance

const ChChannelCard = ({ brand, color, logo, accountId, tokenInfo, lastSync, stats, connected,
                         onSync = () => {}, onDisconnect = () => {}, onConnect = null }) => {
  if (!connected) return (
    <div className="card" style={{border: '2px dashed var(--border-strong)', background: 'var(--bg-1)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 200, gap: 10, padding: 20}}>
      <div style={{width: 40, height: 40, borderRadius: 10, background: color || 'var(--bg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: color ? (logo === 'S' ? '#000' : '#fff') : 'var(--text-4)', fontWeight: 700, fontSize: 16}}>{logo || <Icon name="plus" size={20}/>}</div>
      <div style={{fontSize: 13, color: 'var(--text-2)', fontWeight: 600}}>{brand || 'Connect a Channel'}</div>
      <div style={{fontSize: 11, color: 'var(--text-4)', textAlign: 'center'}}>Connect your channel to start syncing performance data.</div>
      <button className="btn ghost" style={{color: 'var(--accent)', fontSize: 11, marginTop: 4}} onClick={() => onConnect && onConnect(brand)}>Connect →</button>
    </div>
  );
  return (
    <div className="card" style={{padding: 0, overflow: 'hidden'}}>
      <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderBottom: '1px solid var(--border)', background: 'var(--bg-3)'}}>
        <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
          <div style={{width: 28, height: 28, borderRadius: 8, background: color, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 14}}>{logo}</div>
          <div style={{fontSize: 14, fontWeight: 600}}>{brand}</div>
        </div>
        <span className="badge green"><span className="dot" style={{width: 6, height: 6}}></span>Connected</span>
      </div>
      <div style={{padding: 16, display: 'flex', flexDirection: 'column', gap: 10}}>
        <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 12}}>
          <span style={{color: 'var(--text-3)'}}>Account ID</span>
          <span className="mono" style={{color: '#c4b5fd'}}>{accountId}</span>
        </div>
        <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 12}}>
          <span style={{color: 'var(--text-3)'}}>Token</span>
          <span className="mono" style={{color: tokenInfo.expiring ? 'var(--amber)' : 'var(--text-2)', fontSize: 11}}>{tokenInfo.value}</span>
        </div>
        <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 12}}>
          <span style={{color: 'var(--text-3)'}}>Last synced</span>
          <span style={{color: 'var(--text-2)'}}>{lastSync}</span>
        </div>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, paddingTop: 10, borderTop: '1px solid var(--border)', marginTop: 4}}>
          {stats.map(s => (
            <div key={s.label} style={{textAlign: 'center'}}>
              <div style={{fontSize: 16, fontWeight: 600, color: 'var(--text-1)'}}>{s.value}</div>
              <div style={{fontSize: 10, color: 'var(--text-4)', textTransform: 'uppercase', letterSpacing: '0.05em'}}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 16px', borderTop: '1px solid var(--border)', background: 'var(--bg-1)'}}>
        <button className="btn ghost" style={{color: 'var(--emerald)', fontSize: 11, padding: '4px 8px'}} onClick={onSync}><Icon name="refresh" size={11}/>Sync all channels</button>
        <button className="btn ghost" style={{color: 'var(--rose)', fontSize: 11, padding: '4px 8px'}} onClick={onDisconnect}>Disconnect</button>
      </div>
    </div>
  );
};

const ChKpi = ({ label, value, delta, dir, sparkSeed, color }) => (
  <div className="metric">
    <div className="metric-label">{label}</div>
    <div className="metric-value">{value}</div>
    <div className={`metric-delta ${dir}`}>
      <Icon name={dir === 'up' ? 'up' : 'down'} size={10} />
      <span>{delta}</span>
      <span style={{color: 'var(--text-4)', marginLeft: 4}}>vs prior</span>
    </div>
    <Spark data={MOCK.spark(sparkSeed)} color={color || 'var(--accent)'} w={130} h={30} />
  </div>
);

const ChDualChart = ({ channel = 'all' }) => {
  const w = 640, h = 220, pad = 28;
  const n = 30;
  const allRows = MOCK.spark(21).map((v, i) => ({ channel: i % 2 === 0 ? 'meta' : 'google', spend: v * 0.8 + 0.4, conv: MOCK.spark(22)[i] * 0.9 + 0.3 }));
  const visibleRows = channel === 'all' ? allRows : allRows.filter(r => r.channel === channel || r.platform === channel);
  const spend = visibleRows.map(r => r.spend);
  const conv = visibleRows.map(r => r.conv);
  const vn = visibleRows.length || 1;
  const maxS = Math.max(...spend, 0.001), maxC = Math.max(...conv, 0.001);
  const X = i => pad + (i / (vn - 1 || 1)) * (w - pad * 2);
  const Ys = v => h - pad - (v / maxS) * (h - pad * 2);
  const Yc = v => h - pad - (v / maxC) * (h - pad * 2);
  const areaD = spend.length < 2 ? '' : 'M' + X(0) + ' ' + Ys(spend[0]) + spend.slice(1).map((v, i) => ' L' + X(i + 1) + ' ' + Ys(v)).join('') + ` L ${X(vn-1)} ${h-pad} L ${X(0)} ${h-pad} Z`;
  const lineD = conv.length < 2 ? '' : 'M' + X(0) + ' ' + Yc(conv[0]) + conv.slice(1).map((v, i) => ' L' + X(i + 1) + ' ' + Yc(v)).join('');
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      {[0, 0.25, 0.5, 0.75, 1].map(t => <line key={t} x1={pad} x2={w-pad} y1={pad + t*(h-pad*2)} y2={pad + t*(h-pad*2)} stroke="#232A3B" strokeDasharray="2 3" />)}
      <path d={areaD} fill="var(--accent)" fillOpacity="0.2"/>
      <path d={lineD} stroke="var(--cyan)" strokeWidth="1.5" fill="none"/>
      {conv.map((v, i) => <circle key={i} cx={X(i)} cy={Yc(v)} r="2" fill="var(--cyan)"/>)}
      <line x1={pad} x2={w-pad} y1={pad + 0.35*(h-pad*2)} y2={pad + 0.35*(h-pad*2)} stroke="var(--amber)" strokeDasharray="4 3" strokeWidth="1" opacity="0.6"/>
    </svg>
  );
};

const ChDonut = () => {
  const cx = 90, cy = 90, r = 60, sw = 18;
  const segs = [
    { pct: 62, color: 'var(--accent)', label: 'Meta' },
    { pct: 38, color: 'var(--cyan)', label: 'Google' },
  ];
  let off = 0;
  const circ = 2 * Math.PI * r;
  return (
    <svg width="180" height="180" viewBox="0 0 180 180">
      {segs.map(s => {
        const len = (s.pct / 100) * circ;
        const el = <circle key={s.label} cx={cx} cy={cy} r={r} fill="none" stroke={s.color} strokeWidth={sw}
          strokeDasharray={`${len} ${circ - len}`} strokeDashoffset={-off} transform={`rotate(-90 ${cx} ${cy})`}/>;
        off += len;
        return el;
      })}
      <text x={cx} y={cy - 4} textAnchor="middle" fill="var(--text-3)" fontSize="10" fontFamily="var(--mono)">CONVERSIONS</text>
      <text x={cx} y={cy + 16} textAnchor="middle" fill="var(--text-1)" fontSize="22" fontWeight="600">1,247</text>
    </svg>
  );
};

const ChCampaignsTable = ({ statusFilter = 'all' }) => {
  const rows = [
    ['Q2 Prospecting — US', 'active', 'CONVERSIONS', 8420, 892000, 18400, 2.06, 412, 20.44, 4.2],
    ['Spring Retarget (meta)', 'active', 'CONVERSIONS', 5124, 412000, 11240, 2.73, 318, 16.11, 5.8],
    ['Lookalike 1% · Cart', 'active', 'CONVERSIONS', 4218, 389000, 7420, 1.91, 214, 19.71, 3.3],
    ['Brand Awareness — APAC', 'paused', 'REACH', 2980, 1240000, 4210, 0.34, 18, 165.55, 0.4],
    ['Holiday creative test', 'active', 'TRAFFIC', 1890, 184000, 5120, 2.78, 94, 20.11, 2.1],
    ['Cold audiences · Mobile', 'active', 'CONVERSIONS', 1215, 98000, 1840, 1.88, 52, 23.37, 2.8],
  ];
  const visibleRows = statusFilter === 'all' ? rows : rows.filter(r => (r[1] || '').toLowerCase() === statusFilter);
  const ctrColor = v => v >= 2 ? 'var(--emerald)' : v >= 1 ? 'var(--amber)' : 'var(--rose)';
  const roasColor = v => v >= 3 ? '#c4b5fd' : v >= 1 ? 'var(--amber)' : 'var(--rose)';
  return (
    <div style={{overflow: 'auto'}}>
    <table className="data-table">
      <thead><tr>
        <th>Campaign</th><th>Status</th><th>Objective</th>
        <th style={{textAlign:'right'}}>Spend</th><th style={{textAlign:'right'}}>Impr.</th>
        <th style={{textAlign:'right'}}>Clicks</th><th style={{textAlign:'right'}}>CTR</th>
        <th style={{textAlign:'right'}}>Conv.</th><th style={{textAlign:'right'}}>CPA</th>
        <th style={{textAlign:'right'}}>ROAS</th><th></th>
      </tr></thead>
      <tbody>
        {visibleRows.map((r, i) => (
          <tr key={i}>
            <td style={{color: 'var(--text-1)', fontWeight: 500}}>{r[0]}</td>
            <td><span className={`badge ${r[1] === 'active' ? 'green' : r[1] === 'paused' ? 'amber' : 'plain'}`}>{r[1]}</span></td>
            <td><span className="badge cyan">{r[2]}</span></td>
            <td className="mono" style={{textAlign: 'right'}}>${r[3].toLocaleString()}</td>
            <td className="mono" style={{textAlign: 'right'}}>{(r[4]/1000).toFixed(0)}k</td>
            <td className="mono" style={{textAlign: 'right'}}>{r[5].toLocaleString()}</td>
            <td className="mono" style={{textAlign: 'right', color: ctrColor(r[6])}}>{r[6].toFixed(2)}%</td>
            <td className="mono" style={{textAlign: 'right', color: 'var(--emerald)', fontWeight: 600}}>{r[7]}</td>
            <td className="mono" style={{textAlign: 'right'}}>${r[8].toFixed(2)}</td>
            <td className="mono" style={{textAlign: 'right', color: roasColor(r[9]), fontWeight: 600}}>{r[9].toFixed(1)}x</td>
            <td style={{textAlign: 'right', color: 'var(--text-4)'}}>•••</td>
          </tr>
        ))}
      </tbody>
    </table>
    </div>
  );
};

const ChannelsScreen = ({ refreshKey = 0 }) => {
  const [tab, setTab] = React.useState('meta');
  const [sub, setSub] = React.useState('campaigns');
  const [dr, setDr] = React.useState('30d');
  const [ch, setCh] = React.useState('all');
  const [campaignStatus, setCampaignStatus] = React.useState('all');
  const [syncing, setSyncing] = React.useState(false);
  const [channelStatus, setChannelStatus] = React.useState(null);
  const [lastSync, setLastSync] = React.useState('2 hours ago');
  const [syncError, setSyncError] = React.useState(null);
  const [syncToast, setSyncToast] = React.useState(null);
  const [performanceData, setPerformanceData] = React.useState(null);
  const [aiDismissed, setAiDismissed] = React.useState(false);
  const [connectModal, setConnectModal] = React.useState(null);
  const [disconnectModal, setDisconnectModal] = React.useState(null);
  const [disconnectedChannels, setDisconnectedChannels] = React.useState(new Set());

  // Live channel data from API (keyed by channel name)
  const [liveChannels, setLiveChannels] = React.useState({});

  React.useEffect(() => {
    arFetch('/v1/channels/status')
      .then(d => { if (d && typeof d === 'object') setChannelStatus(d); })
      .catch(() => {});
  }, []);

  React.useEffect(() => {
    const days = dr === '7d' ? 7 : dr === '90d' ? 90 : 30; // 'Custom' → 30d fallback
    const end = new Date();
    const start = new Date(end.getTime() - days * 86400000);
    const fmt = d => d.toISOString().slice(0, 10); // YYYY-MM-DD
    arFetch('/v1/channels/performance?start_date=' + fmt(start) + '&end_date=' + fmt(end))
      .then(d => {
        // API may return array of records OR { channels: { meta: {...}, google: {...} } }
        if (Array.isArray(d) && d.length) {
          setPerformanceData(d);
        } else if (d && d.channels && typeof d.channels === 'object') {
          setLiveChannels(d.channels);
          setPerformanceData(d);
        }
      })
      .catch(() => {});
  }, [dr, refreshKey]);

  const handleSyncAll = () => {
    setSyncing(true);
    setSyncError(null);
    setSyncToast(null);
    arFetch('/v1/channels/sync', { method: 'POST', body: JSON.stringify({}) })
      .then(result => {
        setLastSync('just now');
        const msg = (result && result.message) ? result.message : 'Sync complete — all channels updated.';
        setSyncToast(msg);
        setTimeout(() => setSyncToast(null), 4000);
        return arFetch('/v1/channels/status');
      })
      .then(d => {
        if (d) setChannelStatus(prev => ({ ...d, last_sync: d.last_sync || (prev && prev.last_sync) || 'just now' }));
        setSyncing(false);
      })
      .catch(err => {
        console.error('Channel sync failed:', err);
        setSyncError('Channel sync failed. Check API connection and try again.');
        setSyncing(false);
      });
  };

  // Build Meta stats from live data if available
  const metaLive = liveChannels.meta || liveChannels['meta_ads'] || null;
  const googleLive = liveChannels.google || liveChannels['google_ads'] || null;

  const metaStats = metaLive
    ? [
        {label: 'Spend', value: '$' + (metaLive.spend || 0).toLocaleString()},
        {label: 'Impressions', value: ((metaLive.impressions || 0) / 1000).toFixed(0) + 'k'},
        {label: 'ROAS', value: (metaLive.roas || 0).toFixed(1) + 'x'},
      ]
    : [{label: 'Campaigns', value: 12}, {label: 'Ad Sets', value: 47}, {label: 'Ads', value: 183}];

  const googleStats = googleLive
    ? [
        {label: 'Spend', value: '$' + (googleLive.spend || 0).toLocaleString()},
        {label: 'Impressions', value: ((googleLive.impressions || 0) / 1000).toFixed(0) + 'k'},
        {label: 'ROAS', value: (googleLive.roas || 0).toFixed(1) + 'x'},
      ]
    : [{label: 'Campaigns', value: 8}, {label: 'Groups', value: 34}, {label: 'Keywords', value: 892}];

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 20}}>
      {/* Header row */}
      <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: 6}}>Platform / Channels</div>
          <div style={{fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em'}}>Channels</div>
          <div style={{fontSize: 13, color: 'var(--text-3)', marginTop: 2}}>Manage paid media connections and AI-attributed performance</div>
        </div>
        <div style={{display: 'flex', gap: 8}}>
          <button className="btn" style={{color: 'var(--emerald)', borderColor: 'rgba(16,185,129,0.3)'}} onClick={handleSyncAll} disabled={syncing}><Icon name="refresh" size={12}/>{syncing ? 'Syncing…' : 'Sync All'}</button>
          <button className="btn primary" onClick={() => { window.AR_SETTINGS_SECTION = 'channels'; if (window.AR_NAVIGATE) window.AR_NAVIGATE('settings'); }}><Icon name="plus" size={12}/>Add Channel</button>
        </div>
      </div>

      {syncToast && (
        <div style={{padding: '10px 14px', background: 'rgba(16,185,129,0.1)', border: '1px solid rgba(16,185,129,0.3)', borderRadius: 8, fontSize: 12, color: 'var(--emerald)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
          <span>✓ {syncToast}</span>
          <span style={{cursor: 'pointer', color: 'var(--text-4)'}} onClick={() => setSyncToast(null)}>✕</span>
        </div>
      )}

      {syncError && (
        <div style={{padding: '10px 14px', background: 'rgba(244,63,94,0.1)', border: '1px solid rgba(244,63,94,0.3)', borderRadius: 8, fontSize: 12, color: 'var(--rose)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
          <span>⚠ {syncError}</span>
          <span style={{cursor: 'pointer', color: 'var(--text-4)'}} onClick={() => setSyncError(null)}>✕</span>
        </div>
      )}

      {/* Status strip */}
      <div style={{display: 'flex', alignItems: 'center', gap: 16, padding: '10px 16px', background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 10, fontSize: 12}}>
        <span style={{color: 'var(--text-3)'}}>Last sync: {channelStatus?.last_sync || lastSync}</span>
        <div style={{flex: 1, display: 'flex', justifyContent: 'center', gap: 8}}>
          <span className="badge green"><span className="dot" style={{width: 6, height: 6}}></span>Meta Ads</span>
          <span className="badge green"><span className="dot" style={{width: 6, height: 6}}></span>Google Ads</span>
          <span className="badge plain"><span className="dot" style={{width: 6, height: 6, background: 'var(--text-4)'}}></span>TikTok Ads</span>
        </div>
        <span style={{color: 'var(--text-3)'}}>Next auto-sync: Tonight 02:00 UTC</span>
      </div>

      {/* Connection cards — 2 connected + 5 disconnected */}
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14}}>
        <ChChannelCard connected={!disconnectedChannels.has('Meta Ads')} brand="Meta Ads" color="#1877F2" logo="f"
          accountId="act_123456789"
          tokenInfo={{value: '●●●● expires Jun 12', expiring: false}}
          lastSync={metaLive ? 'just now' : '2h ago'}
          stats={metaStats}
          onSync={handleSyncAll}
          onDisconnect={() => setDisconnectModal('Meta Ads')} />
        <ChChannelCard connected={!disconnectedChannels.has('Google Ads')} brand="Google Ads" color="#4285F4" logo="G"
          accountId="123-456-7890"
          tokenInfo={{value: '●●●●●●●●', expiring: false}}
          lastSync={googleLive ? 'just now' : '4h ago'}
          stats={googleStats}
          onSync={handleSyncAll}
          onDisconnect={() => setDisconnectModal('Google Ads')} />
        <ChChannelCard connected={false} brand="TikTok Ads" color="#FF0050" logo="T" onConnect={(b) => setConnectModal(b)} />
        <ChChannelCard connected={false} brand="LinkedIn Ads" color="#0A66C2" logo="in" onConnect={(b) => setConnectModal(b)} />
      </div>
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14}}>
        <ChChannelCard connected={false} brand="Pinterest Ads" color="#E60023" logo="P" onConnect={(b) => setConnectModal(b)} />
        <ChChannelCard connected={false} brand="Snapchat Ads" color="#FFFC00" logo="S" onConnect={(b) => setConnectModal(b)} />
        <ChChannelCard connected={false} brand="Reddit Ads" color="#FF4500" logo="R" onConnect={(b) => setConnectModal(b)} />
      </div>

      {/* Performance overview */}
      <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10}}>
        <div style={{fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em'}}>Performance Overview</div>
        <div style={{display: 'flex', gap: 10, alignItems: 'center'}}>
          <div className="seg">
            {['7d','30d','90d'].map(d => <button key={d} className={dr===d?'active':''} onClick={() => setDr(d)}>{d}</button>)}
            <button key="Custom" disabled title="Custom date ranges not yet supported — use 7d, 30d, or 90d">Custom</button>
          </div>
          <span style={{fontSize: 11, color: 'var(--text-3)'}}>vs prior period</span>
          <div className="toggle on"></div>
        </div>
      </div>

      {/* KPI row */}
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12}}>
        <ChKpi label="Total Spend" value="$24,847" delta="2.1%" dir="down" sparkSeed={11} color="var(--text-3)"/>
        <ChKpi label="Impressions" value="4.2M" delta="8.7%" dir="up" sparkSeed={12} color="var(--cyan)"/>
        <ChKpi label="Clicks" value="87,432" delta="5.3%" dir="up" sparkSeed={13} color="var(--cyan)"/>
        <ChKpi label="Avg CTR" value="2.08%" delta="0.3pp" dir="up" sparkSeed={14} color="var(--cyan)"/>
        <ChKpi label="Conversions" value="1,247" delta="18.2%" dir="up" sparkSeed={15} color="var(--emerald)"/>
        <ChKpi label="Blended ROAS" value="3.8x" delta="0.4x" dir="up" sparkSeed={16} color="var(--accent)"/>
      </div>

      {!aiDismissed && (
      <AICallout>
        <b>Meta Ads contributed to 62% of conversions</b> via multi-touch attribution — however, <b>Google Search drove 3.1x higher-intent actors</b> into your journey graph (avg 2.3 touchpoints before conversion). Consider reallocating 15% of Meta budget to Google Search.
        <div style={{marginTop: 10, display: 'flex', gap: 8}}>
          <button className="btn" style={{background: 'var(--cyan)', color: '#001', borderColor: 'var(--cyan)', fontSize: 11}} onClick={() => { if (window.AR_NAVIGATE) window.AR_NAVIGATE('decisions'); }}>Create Budget Decision →</button>
          <button className="btn ghost" style={{fontSize: 11}} onClick={() => setAiDismissed(true)}>Dismiss</button>
        </div>
      </AICallout>
      )}

      {/* Charts */}
      <div style={{display: 'grid', gridTemplateColumns: '3fr 2fr', gap: 14}}>
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Spend vs Conversions</div>
              <div className="card-sub">Last {dr === '7d' ? 7 : dr === '90d' ? 90 : 30} days · daily</div>
            </div>
            <div style={{display: 'flex', gap: 14, alignItems: 'center', fontSize: 11, color: 'var(--text-3)'}}>
              <span><span style={{display:'inline-block',width:8,height:8,background:'var(--accent)',borderRadius:2,marginRight:6}}></span>Spend</span>
              <span><span style={{display:'inline-block',width:8,height:8,background:'var(--cyan)',borderRadius:'50%',marginRight:6}}></span>Conv.</span>
              <span><span style={{display:'inline-block',width:12,height:1,background:'var(--amber)',marginRight:6,verticalAlign:'middle'}}></span>ROAS target</span>
            </div>
          </div>
          <div style={{display: 'flex', gap: 6, marginBottom: 10}}>
            <button className={`filter-chip ${ch === 'all' ? 'active' : ''}`} onClick={() => setCh('all')}>All</button>
            <button className={`filter-chip ${ch === 'meta' ? 'active' : ''}`} onClick={() => setCh('meta')}>Meta Ads</button>
            <button className={`filter-chip ${ch === 'google' ? 'active' : ''}`} onClick={() => setCh('google')}>Google Ads</button>
          </div>
          <ChDualChart channel={ch} />
        </div>
        <div className="card">
          <div className="card-header">
            <div className="card-title">Channel Mix</div>
            <div className="card-sub">Last 30 days</div>
          </div>
          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}><ChDonut /></div>
          <div style={{marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10}}>
            <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 12}}>
              <span style={{display:'flex',alignItems:'center',gap:6}}><span style={{width:8,height:8,borderRadius:2,background:'var(--accent)'}}></span>Meta Ads</span>
              <span className="mono" style={{color: 'var(--text-2)'}}>62% · 773 · 3.9x</span>
            </div>
            <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 12}}>
              <span style={{display:'flex',alignItems:'center',gap:6}}><span style={{width:8,height:8,borderRadius:2,background:'var(--cyan)'}}></span>Google Ads</span>
              <span className="mono" style={{color: 'var(--text-2)'}}>38% · 474 · 3.6x</span>
            </div>
          </div>
          <div style={{marginTop: 14, paddingTop: 10, borderTop: '1px dashed var(--border)', fontSize: 10, color: 'var(--text-4)'}}>Based on last-touch + AstraReach multi-touch model</div>
        </div>
      </div>

      {/* Deep dive tabs */}
      <div className="card" style={{padding: 0}}>
        <div style={{display: 'flex', borderBottom: '1px solid var(--border)', padding: '0 16px'}}>
          {['meta','google'].map(t => (
            <button key={t} onClick={() => setTab(t)} style={{padding: '14px 16px', fontSize: 13, fontWeight: 500, color: tab===t?'var(--text-1)':'var(--text-3)', borderBottom: tab===t?'2px solid var(--accent)':'2px solid transparent', marginBottom: -1}}>
              {t === 'meta' ? 'Meta Ads' : 'Google Ads'}
            </button>
          ))}
        </div>
        <div style={{padding: 16}}>
          <div style={{display: 'flex', gap: 6, marginBottom: 14}}>
            {(tab==='meta' ? ['campaigns','adsets','ads','audiences'] : ['campaigns','keywords','search','extensions']).map(s => (
              <button key={s} onClick={() => setSub(s)} className={`filter-chip ${sub===s?'active':''}`}>{s}</button>
            ))}
          </div>
          <div style={{display: 'flex', gap: 10, marginBottom: 12, alignItems: 'center'}}>
            <div style={{flex: 1, display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px', background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 8, maxWidth: 320}}>
              <Icon name="search" size={12} style={{color: 'var(--text-3)'}}/>
              <input placeholder="Search campaigns..." style={{flex: 1, background: 'transparent', border: 'none', color: 'var(--text-1)', fontSize: 12, outline: 'none'}}/>
            </div>
            <div style={{display: 'flex', gap: 6}}>
              <button className={`filter-chip ${campaignStatus === 'all' ? 'active' : ''}`} onClick={() => setCampaignStatus('all')}>All</button>
              <button className={`filter-chip ${campaignStatus === 'active' ? 'active' : ''}`} onClick={() => setCampaignStatus('active')}>Active</button>
              <button className={`filter-chip ${campaignStatus === 'paused' ? 'active' : ''}`} onClick={() => setCampaignStatus('paused')}>Paused</button>
            </div>
          </div>
          {sub === 'campaigns'
            ? <ChCampaignsTable statusFilter={campaignStatus} />
            : <div style={{padding:'32px 20px',textAlign:'center',color:'var(--text-3)'}}>
                <div style={{fontSize:13,marginBottom:6}}>{sub.charAt(0).toUpperCase()+sub.slice(1)} view</div>
                <div style={{fontSize:11,fontFamily:'var(--mono)'}}>Coming soon · Use the {tab === 'meta' ? 'Meta Ads' : 'Google Ads'} dashboard for now</div>
              </div>
          }
        </div>
      </div>
      {connectModal && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.7)',zIndex:999,
          display:'flex',alignItems:'center',justifyContent:'center'}}
          onClick={()=>setConnectModal(null)}>
          <div className="card" style={{width:440,padding:24,maxWidth:'90vw'}}
            onClick={e=>e.stopPropagation()}>
            <div className="card-header" style={{marginBottom:16}}>
              <div className="card-title">Connect {connectModal}</div>
              <button className="btn ghost" onClick={()=>setConnectModal(null)}>✕</button>
            </div>
            <div style={{fontSize:13,color:'var(--text-2)',marginBottom:14,lineHeight:1.65}}>
              To activate {connectModal}, add these environment variables to your API server and restart:
            </div>
            <div style={{background:'var(--bg-0)',border:'1px solid var(--border)',borderRadius:8,
              padding:'12px 14px',fontFamily:'var(--mono)',fontSize:11,color:'#86efac',
              marginBottom:14,whiteSpace:'pre-line'}}>
              {connectModal==='TikTok Ads'    && 'TIKTOK_CLIENT_KEY=your_key\nTIKTOK_CLIENT_SECRET=your_secret'}
              {connectModal==='LinkedIn Ads'  && 'LINKEDIN_CLIENT_ID=your_id\nLINKEDIN_CLIENT_SECRET=your_secret'}
              {connectModal==='Pinterest Ads' && 'PINTEREST_APP_ID=your_id\nPINTEREST_APP_SECRET=your_secret'}
              {connectModal==='Snapchat Ads'  && 'SNAPCHAT_CLIENT_ID=your_id\nSNAPCHAT_CLIENT_SECRET=your_secret'}
              {connectModal==='Reddit Ads'    && 'REDDIT_CLIENT_ID=your_id\nREDDIT_CLIENT_SECRET=your_secret'}
              {!['TikTok Ads','LinkedIn Ads','Pinterest Ads','Snapchat Ads','Reddit Ads'].includes(connectModal) &&
                'Contact support@astrareach.com for setup instructions for this platform.'}
            </div>
            <div style={{fontSize:11,color:'var(--text-3)',marginBottom:16}}>
              After restarting the API server, return here and click Connect to complete OAuth authorization.
            </div>
            <div style={{display:'flex',gap:8}}>
              <button className="btn" onClick={()=>setConnectModal(null)}>Close</button>
            </div>
          </div>
        </div>
      )}

      {disconnectModal && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.7)',zIndex:999,
          display:'flex',alignItems:'center',justifyContent:'center'}}
          onClick={()=>setDisconnectModal(null)}>
          <div className="card" style={{width:360,padding:24}} onClick={e=>e.stopPropagation()}>
            <div style={{fontSize:16,fontWeight:600,marginBottom:10}}>
              Disconnect {disconnectModal}?
            </div>
            <div style={{fontSize:13,color:'var(--text-2)',lineHeight:1.6,marginBottom:20}}>
              Performance data synced so far will be retained. No new data will be pulled until reconnected.
            </div>
            <div style={{display:'flex',gap:8}}>
              <button className="btn" onClick={()=>setDisconnectModal(null)}>Cancel</button>
              <button className="btn"
                style={{background:'var(--rose)',color:'#fff',borderColor:'var(--rose)'}}
                onClick={() => {
                  setDisconnectedChannels(prev => new Set([...prev, disconnectModal]));
                  arFetch('/v1/channels/' + (disconnectModal || '').toLowerCase().replace(/ /g, '-') + '/disconnect',
                    { method: 'DELETE' }).catch(() => {});
                  setDisconnectModal(null);
                }}>
                Disconnect
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.ChannelsScreen = ChannelsScreen;