// ============================================================
// FUNNEL CONTROL CENTER — shell + tabs 4-7 (Traffic, Content, Analytics, Logs)
// Tabs 1-3 (Overview, Stages, Automations) + buildStages live in funnel-detail.jsx
// ============================================================

// ===================== TRAFFIC TAB =====================
function FunnelTrafficTab({ funnel, onPushToast }) {
  const SOURCES = [
    { id: 'google',   name: 'Google Ads',    spend: 4218, roas: 6.4, cpc: 1.84, ctr: 4.2, conv: 142, cpb: 84,  rev: 28412 },
    { id: 'meta',     name: 'Meta Ads',      spend: 3814, roas: 5.2, cpc: 1.24, ctr: 3.8, conv: 184, cpb: 62,  rev: 24108 },
    { id: 'tiktok',   name: 'TikTok',        spend: 1842, roas: 8.4, cpc: 0.84, ctr: 6.2, conv: 218, cpb: 38,  rev: 18412 },
    { id: 'linkedin', name: 'LinkedIn',      spend: 2812, roas: 3.8, cpc: 4.42, ctr: 1.8, conv: 38,  cpb: 184, rev: 14820 },
    { id: 'organic',  name: 'Organic search', spend: 0,   roas: null, cpc: 0,   ctr: 8.4, conv: 412, cpb: 0,   rev: 84200 },
    { id: 'email',    name: 'Email',          spend: 84,  roas: 22.4, cpc: 0.02, ctr: 14.2, conv: 184, cpb: 4, rev: 18412 },
    { id: 'sms',      name: 'SMS',            spend: 142, roas: 18.4, cpc: 0.04, ctr: 22.4, conv: 84, cpb: 8,  rev: 12814 },
    { id: 'affiliate', name: 'Affiliate',     spend: 412, roas: 4.2, cpc: 0,    ctr: 0,   conv: 41,  cpb: 94,  rev: 8412  },
    { id: 'referral', name: 'Referral',       spend: 0,   roas: null, cpc: 0,   ctr: 0,   conv: 84,  cpb: 0,   rev: 24802 },
    { id: 'direct',   name: 'Direct',         spend: 0,   roas: null, cpc: 0,   ctr: 0,   conv: 142, cpb: 0,   rev: 38412 }
  ];
  const total = SOURCES.reduce((s, x) => ({ spend: s.spend + x.spend, conv: s.conv + x.conv, rev: s.rev + x.rev }), { spend: 0, conv: 0, rev: 0 });

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div className="fcc-alert info">
        <span className="fcc-alert-icon" style={{color: 'var(--cyan)'}}>✦</span>
        <div style={{flex: 1}}>
          <div className="fcc-alert-title">TikTok traffic converting 31% higher than Meta</div>
          <div className="fcc-alert-body">
            At 8.4x ROAS vs Meta 5.2x. Orion recommends shifting <span style={{color: 'var(--good)'}}>£1,200/wk</span> from Meta to TikTok creative variants — projected lift <span style={{color: 'var(--good)'}}>+£18k/mo</span>.
          </div>
        </div>
        <button className="btn primary sm" onClick={() => onPushToast('Spend reallocation queued · Orion will execute on approval')}>
          Apply reallocation
        </button>
      </div>

      <div className="fcc-trf-summary">
        <div className="fcc-trf-stat"><div className="lbl">Total spend · 30d</div><div className="val">£{total.spend.toLocaleString()}</div></div>
        <div className="fcc-trf-stat"><div className="lbl">Total conversions</div><div className="val" style={{color: 'var(--cyan)'}}>{total.conv.toLocaleString()}</div></div>
        <div className="fcc-trf-stat"><div className="lbl">Revenue attributed</div><div className="val" style={{color: 'var(--good)'}}>£{total.rev.toLocaleString()}</div></div>
        <div className="fcc-trf-stat"><div className="lbl">Blended ROAS</div><div className="val" style={{color: 'var(--brass-bright, #e8c98a)'}}>{(total.rev / (total.spend || 1)).toFixed(1)}x</div></div>
      </div>

      <div className="fcc-trf-table">
        <div className="fcc-trf-row hd">
          <div className="c">Source</div>
          <div className="c">Spend</div>
          <div className="c">CPC</div>
          <div className="c">CTR</div>
          <div className="c">Conv</div>
          <div className="c">Cost / booked</div>
          <div className="c">Revenue</div>
          <div className="c">ROAS</div>
          <div className="c">Trend</div>
        </div>
        {SOURCES.map(s => {
          const sparkData = Array.from({length: 14}, (_, i) => 30 + Math.sin(i * 0.7 + s.id.charCodeAt(0)) * 14 + Math.random() * 6);
          return (
            <div key={s.id} className="fcc-trf-row" role="button" onClick={() => onPushToast(`Drilling into ${s.name}`)}>
              <div className="c">
                <span className="fcc-trf-dot" style={{background: SOURCE_COLORS[s.id] || '#8388a8'}}/>
                <span style={{color: 'var(--text)', fontSize: 13}}>{s.name}</span>
              </div>
              <div className="c mono tnum">£{s.spend.toLocaleString()}</div>
              <div className="c mono dim">{s.cpc > 0 ? `£${s.cpc.toFixed(2)}` : '—'}</div>
              <div className="c mono dim">{s.ctr > 0 ? `${s.ctr}%` : '—'}</div>
              <div className="c mono tnum">{s.conv}</div>
              <div className="c mono" style={{color: s.cpb > 100 ? 'var(--warn)' : s.cpb > 0 ? 'var(--text-dim)' : 'var(--good)'}}>
                {s.cpb > 0 ? `£${s.cpb}` : 'free'}
              </div>
              <div className="c mono tnum" style={{color: 'var(--good)'}}>£{s.rev.toLocaleString()}</div>
              <div className="c mono" style={{color: s.roas === null ? 'var(--text-faint)' : s.roas > 6 ? 'var(--good)' : s.roas > 3 ? 'var(--cyan)' : 'var(--warn)'}}>
                {s.roas === null ? '∞' : `${s.roas}x`}
              </div>
              <div className="c" style={{padding: '4px 8px'}}>
                <svg viewBox="0 0 100 30" preserveAspectRatio="none" style={{width: 80, height: 24}}>
                  <polyline points={sparkData.map((v, i) => `${(i / (sparkData.length - 1)) * 100},${30 - (v / 60) * 28}`).join(' ')} fill="none" stroke={SOURCE_COLORS[s.id] || '#8388a8'} strokeWidth="1.2" vectorEffect="non-scaling-stroke"/>
                </svg>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ===================== CONTENT STUDIO TAB =====================
function FunnelContentTab({ funnel, onPushToast }) {
  const [mode, setMode] = React.useState('landing');
  const [industry, setIndustry] = React.useState('saas');
  const [prompt, setPrompt] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [result, setResult] = React.useState(null);

  const modes = [
    ['landing', 'Landing copy'],
    ['ads',     'Ads'],
    ['emails',  'Emails'],
    ['sms',     'SMS'],
    ['vsl',     'VSL scripts'],
    ['headlines', 'Headlines'],
    ['offers',  'Offers'],
    ['sequences', 'Follow-up sequences']
  ];
  const industries = ['saas', 'dental', 'property', 'legal', 'e-commerce', 'agency', 'trades', 'fitness'];

  const generate = async (mode_) => {
    if (!prompt.trim()) return;
    setBusy(true);
    setResult(null);
    try {
      const text = await window.claude.complete({
        messages: [{
          role: 'user',
          content: `You are Calliope, Demiurge's content operator. Generate 3 ${mode_} variants for an ${industry} business in this funnel: "${funnel.name}". Brief: "${prompt}". Output: 3 numbered options, each conversion-optimized with hook → value → CTA. No preamble.`
        }]
      });
      setResult(text);
    } catch {
      setResult(`1. ★ Hook · curiosity\n"While your competitors hire, you deploy."\nDemiurge operators run your ${industry} business 24/7 — for less than one full-time hire.\n→ Deploy your operators\n\n2. ★ Hook · loss aversion\nEvery missed call costs you £840. Every form abandonment costs £312. Stop the leaks.\nDemiurge plugs the gap between human capacity and what the market now demands.\n→ See Demiurge live\n\n3. ★ Hook · social proof\n4,217 ${industry} operators are running Demiurge today.\n+34% MRR · -78% CAC · 87% trial-to-client. Join cohort 014.\n→ Book strategy session`);
    }
    setBusy(false);
  };

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div className="fcc-content-tabs">
        {modes.map(([k, l]) => (
          <button key={k} className={`fcc-content-tab ${mode === k ? 'on' : ''}`} onClick={() => setMode(k)}>
            {l}
          </button>
        ))}
      </div>

      <div className="fcc-content-shell">
        <div className="fcc-content-l">
          <div className="ccc-compose-card">
            <div style={{display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap'}}>
              <span className="mono faint" style={{fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase'}}>Industry</span>
              <select value={industry} onChange={e => setIndustry(e.target.value)} style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text)',
                background: 'rgba(0,0,0,0.4)', border: '1px solid var(--border)',
                padding: '6px 10px', borderRadius: 'var(--radius)', textTransform: 'capitalize'
              }}>
                {industries.map(i => <option key={i} value={i}>{i}</option>)}
              </select>
              <span style={{flex: 1}}/>
              <span className="mono faint" style={{fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase'}}>
                {modes.find(m => m[0] === mode)[1]} · {funnel.name}
              </span>
            </div>
            <textarea
              rows={3}
              value={prompt}
              onChange={e => setPrompt(e.target.value)}
              placeholder={`Brief Calliope for ${modes.find(m => m[0] === mode)[1].toLowerCase()}…`}
              style={{
                width: '100%', fontFamily: 'var(--font-mono)', fontSize: 13,
                lineHeight: 1.5, color: 'var(--text)', background: 'rgba(0,0,0,0.3)',
                border: '1px solid var(--border)', borderRadius: 'var(--radius)',
                padding: 12, resize: 'vertical', minHeight: 80
              }}
            />
            <div style={{display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center'}}>
              <button className="btn primary sm" onClick={() => generate(mode)} disabled={busy}>
                <Icon.Sparkles className="icon"/>{busy ? 'Generating…' : 'Generate'}
              </button>
              <button className="btn sm" onClick={() => generate(mode)} disabled={busy}>Regenerate</button>
              <button className="btn sm" onClick={() => onPushToast('A/B variants queued')}>Build A/B variant</button>
              <button className="btn sm" onClick={() => onPushToast('Conversion-optimised rewrite running')}>Improve conversion</button>
              <button className="btn sm" onClick={() => onPushToast(`Rewriting for ${industry}`)}>Rewrite for industry</button>
            </div>
          </div>

          {result && (
            <div className="ccc-compose-result">
              <div className="ccc-setting-hd" style={{borderBottom: 'none', padding: 0, paddingBottom: 8}}>Variants</div>
              <pre>{result}</pre>
              <div style={{display: 'flex', gap: 8, justifyContent: 'flex-end'}}>
                <button className="btn sm" onClick={() => onPushToast('Sent to copy library')}>Save</button>
                <button className="btn primary sm" onClick={() => onPushToast(`Applied to ${funnel.name} · pending approval`)}>Apply to funnel</button>
              </div>
            </div>
          )}
        </div>

        <div className="fcc-content-r">
          <div className="ccc-setting-hd" style={{margin: 0}}>Recent generations</div>
          <div style={{display: 'flex', flexDirection: 'column'}}>
            {[
              { mode: 'Headline',  txt: 'Run your business while you sleep — 4 sleeping accounts woke up to £18k pipeline',  t: '2m' },
              { mode: 'Ad',        txt: 'Your competitors hire staff. You deploy operators. Cohort 014 closes in 11 days.',   t: '24m' },
              { mode: 'Email · D3', txt: 'Subject: "The 90-day operator audit Belmont Dental just reverse-engineered…"',     t: '1h' },
              { mode: 'SMS',       txt: 'Hi {first} — your strategy slot is held until 4pm Friday. Confirm by replying YES.', t: '2h' },
              { mode: 'Offer',     txt: 'Deploy in 7 days · 30-day cancel · SOC-2 II. Today only: setup fee waived.',         t: '3h' }
            ].map((r, i) => (
              <div key={i} style={{
                padding: '12px 18px',
                borderBottom: '1px solid var(--border)',
                display: 'flex', flexDirection: 'column', gap: 4
              }}>
                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                  <span className="mono" style={{fontSize: 9.5, color: 'var(--brass-bright, #e8c98a)', letterSpacing: '0.16em', textTransform: 'uppercase'}}>{r.mode}</span>
                  <span className="mono faint" style={{fontSize: 9.5}}>{r.t} ago</span>
                </div>
                <span style={{fontSize: 12.5, color: 'var(--text-dim)', lineHeight: 1.45}}>{r.txt}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ===================== ANALYTICS TAB =====================
function FunnelAnalyticsTab({ funnel, stages, onPushToast }) {
  const [period, setPeriod] = React.useState('30d');

  // Synthesize metrics
  const visitors = stages[0].val;
  const leads = stages[2] ? stages[2].val : 0;
  const booked = stages[4] ? stages[4].val : 0;
  const closed = stages[6] ? stages[6].val : 0;
  const showUpRate = booked > 0 ? Math.min(99, 78 + (funnel.id.charCodeAt(3) % 18)) : 0;
  const closeRate  = booked > 0 ? Math.min(60, 28 + (funnel.id.charCodeAt(2) % 22)) : 0;
  const cac = closed > 0 ? Math.round(funnel.revenue * 0.18 / closed) : 0;
  const ltv = closed > 0 ? Math.round(funnel.revenue / closed * 3.4) : 0;
  const roas = funnel.revenue > 0 ? ((funnel.revenue) / (funnel.revenue * 0.18 || 1)).toFixed(1) : '—';

  // Revenue trend
  const revPts = Array.from({length: 30}, (_, i) => Math.max(0, funnel.revenue / 30 + Math.sin(i * 0.4) * funnel.revenue / 80 + Math.random() * funnel.revenue / 100));

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div style={{display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap'}}>
        <div className="segmented">
          {['24h', '7d', '30d', '90d', 'ytd'].map(p => (
            <button key={p} className={period === p ? 'active' : ''} onClick={() => setPeriod(p)}>{p}</button>
          ))}
        </div>
        <span style={{flex: 1}}/>
        <button className="btn sm" onClick={() => onPushToast('Export queued')}>Export CSV</button>
        <button className="btn primary sm" onClick={() => onPushToast('Deep analysis running')}><Icon.Sparkles className="icon"/>Deep analysis</button>
      </div>

      <div className="fcc-analytics-grid">
        {[
          { lbl: 'Visitors',         v: visitors.toLocaleString(),        d: '+18%', dc: 'var(--good)' },
          { lbl: 'Leads',            v: leads.toLocaleString(),           d: '+14%', dc: 'var(--good)' },
          { lbl: 'Booked',           v: booked.toLocaleString(),          d: '+24%', dc: 'var(--good)' },
          { lbl: 'Show-up rate',     v: `${showUpRate}%`,                 d: '+4pp', dc: 'var(--cyan)' },
          { lbl: 'Close rate',       v: `${closeRate}%`,                  d: '+2.4pp', dc: 'var(--cyan)' },
          { lbl: 'CAC',              v: cac > 0 ? `£${cac}` : '—',        d: '-12%', dc: 'var(--good)' },
          { lbl: 'LTV',              v: ltv > 0 ? `£${ltv.toLocaleString()}` : '—', d: '+8%', dc: 'var(--good)' },
          { lbl: 'ROAS',             v: roas === '—' ? '—' : `${roas}x`,  d: '+0.4x', dc: 'var(--brass-bright, #e8c98a)' }
        ].map((m, i) => (
          <div key={i} className="fcc-kpi-mini">
            <div className="lbl">{m.lbl}</div>
            <div className="val">{m.v}</div>
            <div className="d" style={{color: m.dc}}>{m.d}</div>
          </div>
        ))}
      </div>

      {/* Revenue trend chart */}
      <div className="fcc-mini-card">
        <div className="ccc-setting-hd" style={{borderBottom: 'none', padding: '14px 18px', display: 'flex', justifyContent: 'space-between'}}>
          <span>Revenue over time</span>
          <span className="mono faint" style={{fontSize: 10, letterSpacing: '0.12em'}}>£{revPts.reduce((a, b) => a + b, 0).toFixed(0)} total · {period}</span>
        </div>
        <div style={{padding: '0 18px 18px'}}>
          <svg viewBox="0 0 600 140" preserveAspectRatio="none" style={{width: '100%', height: 140}}>
            <defs>
              <linearGradient id="fcc-rev-grad" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stopColor="#e8c98a" stopOpacity="0.4"/>
                <stop offset="100%" stopColor="#e8c98a" stopOpacity="0"/>
              </linearGradient>
            </defs>
            {[0, 0.25, 0.5, 0.75, 1].map((y, i) => (
              <line key={i} x1="0" x2="600" y1={y * 140} y2={y * 140} stroke="rgba(255,255,255,0.05)" strokeWidth="0.5"/>
            ))}
            <polygon
              points={`0,140 ${revPts.map((v, i) => `${(i / (revPts.length - 1)) * 600},${140 - (v / Math.max(...revPts, 1)) * 130}`).join(' ')} 600,140`}
              fill="url(#fcc-rev-grad)"
            />
            <polyline
              points={revPts.map((v, i) => `${(i / (revPts.length - 1)) * 600},${140 - (v / Math.max(...revPts, 1)) * 130}`).join(' ')}
              fill="none"
              stroke="#e8c98a"
              strokeWidth="1.5"
              vectorEffect="non-scaling-stroke"
            />
          </svg>
        </div>
      </div>

      {/* Forecast block */}
      <div className="fcc-alert info">
        <span className="fcc-alert-icon" style={{color: 'var(--brass-bright, #e8c98a)'}}>∞</span>
        <div style={{flex: 1}}>
          <div className="fcc-alert-title">Forecast · projected next 30 days</div>
          <div className="fcc-alert-body">
            Holding current pace: <span style={{color: 'var(--text)'}}>£{Math.round(funnel.revenue * 1.08).toLocaleString()}</span> revenue · <span style={{color: 'var(--text)'}}>{Math.round(booked * 1.12)}</span> booked.
            {' '}If conversion improves <span style={{color: 'var(--good)'}}>+12%</span>: projected revenue <span style={{color: 'var(--good)'}}>£{Math.round(funnel.revenue * 1.21).toLocaleString()}</span>.
          </div>
        </div>
        <button className="btn sm" onClick={() => onPushToast('Forecast saved to reports')}>Save scenario</button>
      </div>
    </div>
  );
}

// ===================== LOGS TAB =====================
function FunnelLogsTab({ funnel, onPushToast }) {
  const [filter, setFilter] = React.useState('all');
  const events = React.useMemo(() => {
    const types = [
      { k: 'edit',       icon: '✎', color: 'var(--cyan)',     label: 'edit',         verbs: ['Stage copy updated for', 'Form fields changed on', 'Routing logic edited on'] },
      { k: 'trigger',    icon: '⚡', color: 'var(--violet)',   label: 'trigger',      verbs: ['Automation fired for', 'Trigger condition met on', 'Webhook fired from'] },
      { k: 'campaign',   icon: '📡', color: 'var(--brass-bright, #e8c98a)', label: 'campaign', verbs: ['Campaign launched on', 'Audience updated for', 'Budget reallocated to'] },
      { k: 'ai',         icon: '✦', color: 'var(--magenta)',  label: 'ai_change',    verbs: ['Calliope rewrote copy on', 'Iris adjusted scoring for', 'Orion shifted spend for'] },
      { k: 'approval',   icon: '✓', color: 'var(--good)',     label: 'approval',     verbs: ['Variant approved by Reza for', 'Change approved on', 'Sign-off received for'] },
      { k: 'failure',    icon: '✕', color: 'var(--danger)',   label: 'failure',      verbs: ['Sync failed for', 'CRM rejected payload from', 'Provider error on'] },
      { k: 'split',      icon: '⇆', color: 'var(--cyan)',     label: 'split_test',   verbs: ['A/B test started on', 'A/B test concluded for', 'Variant promoted on'] },
      { k: 'optimize',   icon: '◐', color: 'var(--warn)',     label: 'optimize',     verbs: ['AI audit completed for', 'Optimization run started on', 'Recommendation applied to'] }
    ];
    const stageNames = ['Landing', 'Form', 'Qualification', 'Booking', 'Nurture', 'Close', 'Upsell'];
    const ev = [];
    const seed = funnel.id.charCodeAt(3);
    for (let i = 0; i < 38; i++) {
      const tIdx = (seed + i * 5) % types.length;
      const type = types[tIdx];
      const stage = stageNames[(i + seed) % stageNames.length];
      const min = (i + seed * 7) % 60;
      const hr = Math.floor((i * 13 + seed) / 6) % 24;
      const verb = type.verbs[i % type.verbs.length];
      ev.push({
        time: `${String(hr).padStart(2, '0')}:${String(min).padStart(2, '0')}:${String((i * 11) % 60).padStart(2, '0')}`,
        type,
        msg: `${verb} ${stage} · ${funnel.name}`,
        actor: ['system', 'Reza', 'Calliope', 'Iris', 'Orion', 'Atlas'][(i + seed) % 6]
      });
    }
    return ev;
  }, [funnel.id, funnel.name]);

  const aiKinds = new Set(['ai', 'optimize']);
  const humanKinds = new Set(['edit', 'approval']);
  const systemKinds = new Set(['trigger', 'campaign']);
  const warningKinds = new Set(['failure']);
  const successKinds = new Set(['approval', 'split']);

  const filtered = filter === 'all' ? events
    : filter === 'success' ? events.filter(e => successKinds.has(e.type.k))
    : filter === 'warning' ? events.filter(e => warningKinds.has(e.type.k))
    : filter === 'failure' ? events.filter(e => e.type.k === 'failure')
    : filter === 'ai'      ? events.filter(e => aiKinds.has(e.type.k))
    : filter === 'human'   ? events.filter(e => humanKinds.has(e.type.k))
    : filter === 'system'  ? events.filter(e => systemKinds.has(e.type.k))
    : events;

  return (
    <div>
      <div style={{display: 'flex', alignItems: 'center', gap: 10, padding: '0 4px 14px', flexWrap: 'wrap'}}>
        {[['all','All'],['system','System'],['human','Human'],['ai','AI'],['success','Success'],['warning','Warning'],['failure','Failure']].map(([k, l]) => (
          <button key={k} onClick={() => setFilter(k)} className={`ccc-pill ${filter === k ? 'on' : ''}`}>{l}</button>
        ))}
        <span style={{flex: 1}}/>
        <span className="mono faint" style={{fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase'}}>
          Streaming · {filtered.length} events
        </span>
      </div>
      <div className="ccc-logs">
        {filtered.map((e, i) => (
          <div key={i} className="ccc-log-row">
            <span className="mono faint" style={{fontSize: 10.5, color: 'var(--text-faint)', minWidth: 64}}>{e.time}</span>
            <span style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 20, height: 20, borderRadius: 3,
              background: `${e.type.color}15`, color: e.type.color,
              fontSize: 11, border: `1px solid ${e.type.color}40`
            }}>{e.type.icon}</span>
            <span className="mono" style={{fontSize: 10, color: e.type.color, letterSpacing: '0.12em', textTransform: 'uppercase', minWidth: 110}}>{e.type.label}</span>
            <span style={{fontSize: 12.5, color: 'var(--text)', flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{e.msg}</span>
            <span className="mono faint" style={{fontSize: 10}}>{e.actor}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ===================== MAIN CONTROL CENTER =====================
function FunnelControlCenter({ funnel: initialFunnel, onBack }) {
  const [tab, setTab] = React.useState('overview');
  const [toast, setToast] = React.useState(null);
  const [funnel, setFunnel] = React.useState(initialFunnel);
  const [activeModal, setActiveModal] = React.useState(null);
  const stages = React.useMemo(() => buildStages(funnel), [funnel]);
  const type = FUNNEL_TYPES[funnel.type];
  const st = FUNNEL_STATUS[funnel.status];

  const pushToast = (msg) => {
    setToast({ msg, id: Date.now() });
    setTimeout(() => setToast(t => (t && t.msg === msg ? null : t)), 2400);
  };

  // Wire the 5 primary action buttons. Pause toggles status. Others open modals.
  const handleAction = (action) => {
    if (action === 'pause') {
      const next = funnel.status === 'live' ? 'paused' : 'live';
      setFunnel(f => ({...f, status: next}));
      pushToast(next === 'paused' ? 'Funnel paused' : 'Funnel resumed');
      return;
    }
    setActiveModal(action);
  };

  const e2e = ((stages[stages.length-1].val / (stages[0].val || 1)) * 100).toFixed(2);

  return (
    <div className="ccc-shell">
      {/* Header */}
      <div className="ccc-hd">
        <button className="ccc-back" onClick={onBack}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
          <span>Funnels</span>
        </button>
        <div className="ccc-hd-glyph" style={{color: type.hue, background: `linear-gradient(135deg, ${type.hue}25, ${type.hue}05)`, borderColor: `${type.hue}30`}}>
          <Icon.Funnel style={{width: 28, height: 28}}/>
        </div>
        <div className="ccc-hd-info">
          <div className="ccc-hd-title">
            <em>{funnel.name}</em>
          </div>
          <div className="ccc-hd-sub">
            {type.label} · {funnel.leads.toLocaleString()} leads · {funnel.booked} booked · £{(funnel.revenue/1000).toFixed(0)}k pipeline
          </div>
        </div>
        <div className="ccc-hd-actions">
          <span style={{display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', color: st.color, background: st.bg, border: `1px solid ${st.border}`, borderRadius: 3}}>
            <span className="pip" style={{width: 5, height: 5, borderRadius: '50%', background: st.color, boxShadow: funnel.status === 'offline' ? 'none' : `0 0 6px ${st.color}`, animation: funnel.status === 'offline' ? 'none' : 'pulse 1.6s infinite'}}/>
            {st.label}
          </span>
          <button className="btn primary sm" onClick={() => pushToast('Funnel cloned as draft')}>Clone</button>
        </div>
      </div>

      {/* Aggregate stat strip */}
      <div className="ccc-stats">
        {[
          { lbl: 'End-to-end CVR', v: `${e2e}%`,                                    color: 'var(--cyan)' },
          { lbl: 'Visitors',       v: stages[0].val.toLocaleString(),               color: 'var(--text)' },
          { lbl: 'Leads',          v: funnel.leads.toLocaleString(),                color: 'var(--text)' },
          { lbl: 'Booked',         v: funnel.booked,                                color: 'var(--violet)' },
          { lbl: 'Closed',         v: stages[6] ? stages[6].val : 0,                color: 'var(--good)' },
          { lbl: 'Revenue',        v: `£${(funnel.revenue/1000).toFixed(0)}k`,      color: 'var(--good)' },
          { lbl: 'Drop-off',       v: `${funnel.dropoff}%`,                         color: funnel.dropoff > 30 ? 'var(--danger)' : 'var(--warn)' },
          { lbl: 'AI status',      v: funnel.ai,                                    color: 'var(--magenta)' },
          { lbl: 'Last updated',   v: funnel.updated,                               color: 'var(--text-dim)' }
        ].map((s, i) => (
          <div key={i} className="ccc-stat">
            <div className="lbl">{s.lbl}</div>
            <div className="val" style={{color: s.color, textTransform: typeof s.v === 'string' && s.v.length < 12 ? 'none' : 'none'}}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      <div className="ccc-tabs">
        {[
          ['overview',    'Overview'],
          ['stages',      'Stages',      `${stages.length}`],
          ['automations', 'Automations'],
          ['traffic',     'Traffic'],
          ['content',     'Content'],
          ['analytics',   'Analytics'],
          ['logs',        'Logs']
        ].map(([k, l, badge]) => (
          <button key={k} className={`ccc-tab ${tab === k ? 'on' : ''}`} onClick={() => setTab(k)}>
            {l} {badge ? <span className="ccc-tab-badge">{badge}</span> : null}
          </button>
        ))}
        <div style={{flex: 1, borderBottom: '1px solid var(--border)'}}/>
      </div>

      {/* Tab body */}
      <div className="ccc-body">
        {tab === 'overview'    && <FunnelOverviewTab    funnel={funnel} stages={stages} onPushToast={pushToast} onAction={handleAction}/>}
        {tab === 'stages'      && <FunnelStagesTab      funnel={funnel} stages={stages} onPushToast={pushToast}/>}
        {tab === 'automations' && <FunnelAutomationsTab funnel={funnel} onPushToast={pushToast}/>}
        {tab === 'traffic'     && <FunnelTrafficTab     funnel={funnel} onPushToast={pushToast}/>}
        {tab === 'content'     && <FunnelContentTab     funnel={funnel} onPushToast={pushToast}/>}
        {tab === 'analytics'   && <FunnelAnalyticsTab   funnel={funnel} stages={stages} onPushToast={pushToast}/>}
        {tab === 'logs'        && <FunnelLogsTab        funnel={funnel} onPushToast={pushToast}/>}
      </div>

      {/* Modals */}
      {activeModal === 'optimize'  && <FunnelOptimizeModal  funnel={funnel} onClose={() => setActiveModal(null)} onPushToast={pushToast}/>}
      {activeModal === 'audit'     && <FunnelAuditDrawer    funnel={funnel} onClose={() => setActiveModal(null)} onPushToast={pushToast}/>}
      {activeModal === 'duplicate' && <FunnelDuplicateModal funnel={funnel} onClose={() => setActiveModal(null)} onPushToast={pushToast}/>}
      {activeModal === 'split'     && <FunnelSplitTestModal funnel={funnel} onClose={() => setActiveModal(null)} onPushToast={pushToast}/>}

      {toast && (
        <div className="ccc-toast" key={toast.id}>
          <span className="pip" style={{background: 'var(--cyan)', boxShadow: '0 0 6px var(--cyan)'}}/>
          {toast.msg}
        </div>
      )}
    </div>
  );
}

window.FunnelControlCenter = FunnelControlCenter;