// SCREEN: Command Center
const eventTypeColor = (name) => ({
  page_view: '#22D3EE', purchase: '#F43F5E', session_start: '#10B981',
  add_to_cart: '#8B5CF6', checkout_start: '#F59E0B',
}[name] || '#6B7489');

const DashboardScreen = ({ setActive = () => {}, refreshKey = 0 }) => {
  const [kpis, setKpis] = React.useState(MOCK.kpis);
  const [anomalies, setAnomalies] = React.useState(MOCK.anomalies);
  const [calloutMsg, setCalloutMsg] = React.useState(null);
  const [eventTypes, setEventTypes] = React.useState([
    { name: 'page_view',       count: 412800, pct: 92, color: '#22D3EE' },
    { name: 'session_start',   count: 184200, pct: 64, color: '#10B981' },
    { name: 'add_to_cart',     count:  68400, pct: 38, color: '#8B5CF6' },
    { name: 'checkout_start',  count:  28100, pct: 22, color: '#F59E0B' },
    { name: 'purchase',        count:  10940, pct: 9,  color: '#F43F5E' },
    { name: 'form_submit',     count:   4210, pct: 4,  color: '#6B7489' },
  ]);

  // Scope Intelligence mini-cards state
  const [scopeRoas, setScopeRoas] = React.useState('3.4x');
  const [scopeRoasTrend, setScopeRoasTrend] = React.useState(null);
  const [topChannel, setTopChannel] = React.useState('Meta · 42%');
  const [aiVisibility, setAiVisibility] = React.useState('67 / 100');

  React.useEffect(() => {
    let cancelled = false;

    // Wire KPIs — GET /v1/metrics/summary
    arFetch('/v1/metrics/summary')
      .then(data => {
        const totalEvents = (data.buckets || []).reduce((s, b) => s + (b.total_events || 0), 0);
        if (totalEvents > 0) {
          const val = totalEvents >= 1e6
            ? (totalEvents / 1e6).toFixed(2) + 'M'
            : totalEvents.toLocaleString();
          if (cancelled) return;
          setKpis(prev => prev.map(k =>
            k.label === 'Total Events' ? { ...k, value: val } : k
          ));
        }
        if (data.event_types && data.event_types.length > 0) {
          if (cancelled) return;
          setEventTypes(data.event_types.map(t => ({
            name: t.event_type || t.name,
            count: t.count || 0,
            pct: Math.round((t.count / (data.total_events || 1)) * 100),
            color: eventTypeColor(t.event_type || t.name),
          })));
        }
      })
      .catch(() => {}); // silently keep MOCK.kpis

    // Wire anomalies — POST /v1/insights/anomalies
    arFetch('/v1/insights/anomalies', {
      method: 'POST',
      body: JSON.stringify({ time_range_hours: 24, baseline_hours: 168, sensitivity: 3.0 }),
    })
      .then(data => {
        if (data.anomalies && data.anomalies.length > 0) {
          if (cancelled) return;
          setAnomalies(data.anomalies.map(window.mapAnomaly));
        }
      })
      .catch(() => {}); // silently keep MOCK.anomalies

    // Dynamic AICallout — GET /v1/scope/pulse?days=7 + GET /v1/context/summary
    Promise.allSettled([
      arFetch('/v1/scope/pulse?days=7'),
      arFetch('/v1/context/summary'),
    ]).then(function(results) {
      var pulseResult = results[0];
      var contextResult = results[1];
      var pulse = pulseResult.status === 'fulfilled' ? pulseResult.value : null;
      var ctx = contextResult.status === 'fulfilled' ? contextResult.value : null;
      var parts = [];
      if (pulse && typeof pulse.weekly_trend === 'number') {
        var trend = pulse.weekly_trend;
        if (trend > 0) {
          parts.push('Spend trend is up ' + trend.toFixed(1) + '% this week.');
        } else if (trend < 0) {
          parts.push('Spend is down ' + Math.abs(trend).toFixed(1) + '% vs last week — review channel mix.');
        }
      }
      if (ctx && ctx.brand_name) {
        parts.push('Broadcasting ' + ctx.brand_name + ' context to AI assistants.');
      }
      if (parts.length > 0) {
        if (cancelled) return;
        setCalloutMsg(parts.join(' '));
      }
      // else keep null → renders fallback static text
    });

    // Scope Intelligence cards
    arFetch('/v1/scope/roas')
      .then(data => {
        if (data && typeof data.blended_roas === 'number') {
          if (cancelled) return;
          setScopeRoas(data.blended_roas.toFixed(1) + 'x');
          if (typeof data.trend === 'number') {
            setScopeRoasTrend(data.trend);
          }
        }
      })
      .catch(() => {});

    arFetch('/v1/scope/mix')
      .then(data => {
        if (data && Array.isArray(data.channels) && data.channels.length > 0) {
          var top = data.channels[0];
          var name = top.channel || top.name || 'Unknown';
          var share = typeof top.share === 'number'
            ? Math.round(top.share * 100)
            : (typeof top.pct === 'number' ? Math.round(top.pct) : null);
          if (cancelled) return;
          setTopChannel(name + (share !== null ? ' · ' + share + '%' : ''));
        }
      })
      .catch(() => {});

    arFetch('/v1/context/performance')
      .then(data => {
        if (data && typeof data.score === 'number') {
          if (cancelled) return;
          setAiVisibility(data.score + ' / 100');
        } else if (data && typeof data.visibility_score === 'number') {
          if (cancelled) return;
          setAiVisibility(data.visibility_score + ' / 100');
        }
      })
      .catch(() => {});

    return () => { cancelled = true; };
  }, [refreshKey]);

  const staticCallout = "Demo data — connect your API key in Settings to see live insights.";

  return (
    <div>
      <AICallout>
        {calloutMsg ? calloutMsg : staticCallout}
      </AICallout>

      <div className="metric-row">
        {kpis.map((k, i) => <Metric key={i} {...k} sparkSeed={i+1} />)}
      </div>

      <div style={{display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 14, marginTop: 14}}>
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Event volume</div>
              <div className="card-sub">Stacked by source · last 30 days</div>
            </div>
            <div style={{display: 'flex', gap: 12, fontSize: 11, color: 'var(--text-3)'}}>
              <span><span style={{display:'inline-block',width:8,height:8,borderRadius:2,background:'#22D3EE',marginRight:4}}/>web</span>
              <span><span style={{display:'inline-block',width:8,height:8,borderRadius:2,background:'#8B5CF6',marginRight:4}}/>meta</span>
              <span><span style={{display:'inline-block',width:8,height:8,borderRadius:2,background:'#F59E0B',marginRight:4}}/>google</span>
              <span><span style={{display:'inline-block',width:8,height:8,borderRadius:2,background:'#10B981',marginRight:4}}/>app</span>
              <span><span style={{display:'inline-block',width:8,height:8,borderRadius:2,background:'#6B7489',marginRight:4}}/>offline</span>
            </div>
          </div>
          <AreaChart h={220} />
        </div>

        <div className="card">
          <div className="card-header">
            <div className="card-title">Top event types</div>
            <span className="badge">7d</span>
          </div>
          <div style={{display: 'flex', flexDirection: 'column', gap: 10}}>
            {eventTypes.map(r => (
              <div key={r.name} style={{display: 'grid', gridTemplateColumns: '130px 1fr 64px', gap: 10, alignItems: 'center'}}>
                <span className="mono" style={{fontSize: 11, color: 'var(--text-2)'}}>{r.name}</span>
                <div style={{height: 6, background: 'var(--bg-3)', borderRadius: 3, overflow: 'hidden'}}>
                  <div style={{width: r.pct + '%', height: '100%', background: r.color, borderRadius: 3}} />
                </div>
                <span className="mono" style={{fontSize: 11, textAlign: 'right', color: 'var(--text-2)'}}>{(r.count/1000).toFixed(1)}K</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Scope Intelligence mini-cards */}
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 14}}>
        <div className="card" style={{padding: '14px 16px'}}>
          <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'}}>
            <div>
              <div style={{fontSize: 11, color: 'var(--text-4)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6}}>Blended ROAS</div>
              <div style={{fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--accent)'}}>{scopeRoas}</div>
              {scopeRoasTrend !== null && (
                <div style={{fontSize: 11, color: scopeRoasTrend >= 0 ? 'var(--emerald)' : 'var(--rose)', marginTop: 4}}>
                  {scopeRoasTrend >= 0 ? '↑' : '↓'} {Math.abs(scopeRoasTrend).toFixed(1)}% vs prior week
                </div>
              )}
            </div>
            <button className="btn ghost" style={{fontSize: 11, color: 'var(--text-3)'}} onClick={() => setActive('scope')}>→</button>
          </div>
        </div>
        <div className="card" style={{padding: '14px 16px'}}>
          <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'}}>
            <div>
              <div style={{fontSize: 11, color: 'var(--text-4)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6}}>Top Channel</div>
              <div style={{fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--cyan)'}}>{topChannel}</div>
              <div style={{fontSize: 11, color: 'var(--text-4)', marginTop: 4}}>by spend share</div>
            </div>
            <button className="btn ghost" style={{fontSize: 11, color: 'var(--text-3)'}} onClick={() => setActive('channels')}>→</button>
          </div>
        </div>
        <div className="card" style={{padding: '14px 16px'}}>
          <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'}}>
            <div>
              <div style={{fontSize: 11, color: 'var(--text-4)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6}}>AI Visibility Score</div>
              <div style={{fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', color: '#c4b5fd'}}>{aiVisibility}</div>
              <div style={{fontSize: 11, color: 'var(--text-4)', marginTop: 4}}>brand context coverage</div>
            </div>
            <button className="btn ghost" style={{fontSize: 11, color: 'var(--text-3)'}} onClick={() => setActive('context')}>→</button>
          </div>
        </div>
      </div>

      <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 14}}>
        <div className="card">
          <div className="card-header">
            <div className="card-title">Conversion funnel</div>
            <span className="badge">30d</span>
          </div>
          <div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch', gap: 4}}>
            {MOCK.funnel.map((f, i) => {
              const width = 40 + (f.pct / 100) * 60; // 40%..100%
              return (
                <React.Fragment key={f.name}>
                  <div className="funnel-step" style={{width: width + '%'}}>
                    <div className="funnel-step-label">{f.name}</div>
                    <div style={{display: 'flex', alignItems: 'baseline', gap: 10}}>
                      <div className="funnel-step-val">{f.value.toLocaleString()}</div>
                      <div className="mono" style={{fontSize: 11, color: 'var(--text-3)'}}>{f.pct.toFixed(1)}%</div>
                    </div>
                  </div>
                  {f.drop && <div className="drop-label">↓ {f.drop.toFixed(1)}% drop-off</div>}
                </React.Fragment>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="card-title">Active anomalies</div>
            <span className="badge rose">3 live</span>
          </div>
          <div style={{display: 'flex', flexDirection: 'column', gap: 10}}>
            {anomalies.map(a => (
              <div key={a.id} style={{display: 'grid', gridTemplateColumns: '20px 1fr auto', gap: 10, padding: '10px 12px', background: 'var(--bg-3)', border: '1px solid var(--border)', borderRadius: 8, alignItems: 'start'}}>
                <div style={{marginTop: 3}}>
                  <span className={`dot ${a.sev === 'CRITICAL' ? 'rose' : a.sev === 'HIGH' ? 'amber' : 'violet'} pulse`} />
                </div>
                <div>
                  <div style={{display: 'flex', gap: 6, alignItems: 'center', marginBottom: 4}}>
                    <SevBadge sev={a.sev} />
                    <span className="mono" style={{fontSize: 10, color: 'var(--text-4)'}}>{a.type}</span>
                  </div>
                  <div style={{fontSize: 12, fontWeight: 500, color: 'var(--text-1)'}}>{a.title}</div>
                  <div style={{fontSize: 11, color: 'var(--text-3)', marginTop: 4}}>{a.when}</div>
                </div>
                <button className="btn ghost" style={{fontSize: 11}} onClick={() => { window.AR_PENDING_ANOMALY_ID = a.id; if (window.AR_NAVIGATE) window.AR_NAVIGATE('anomalies'); else setActive('anomalies'); }}>View →</button>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{marginTop: 14}} className="card">
        <div className="card-header">
          <div className="card-title">System capabilities</div>
          <span className="card-sub">Live module status</span>
        </div>
        <div style={{display: 'flex', flexWrap: 'wrap', gap: 8}}>
          {[
            { name: 'Ingestion',  s: 'ok' },
            { name: 'Identity',   s: 'ok' },
            { name: 'Journey',    s: 'ok' },
            { name: 'Memory',     s: 'warn' },
            { name: 'Intelligence', s: 'ok' },
            { name: 'Optimization', s: 'off' },
          ].map(m => (
            <div key={m.name} style={{display: 'flex', gap: 6, alignItems: 'center', padding: '5px 10px', background: 'var(--bg-3)', border: '1px solid var(--border)', borderRadius: 20, fontSize: 11}}>
              <span className={`dot ${m.s === 'ok' ? '' : m.s === 'warn' ? 'amber' : 'rose'}`} style={m.s === 'off' ? {background: 'var(--text-4)'} : {}} />
              <span style={{color: m.s === 'off' ? 'var(--text-4)' : 'var(--text-1)'}}>{m.name}</span>
              <span className="mono" style={{fontSize: 10, color: 'var(--text-4)'}}>
                {m.s === 'ok' ? 'operational' : m.s === 'warn' ? 'degraded' : 'not configured'}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.DashboardScreen = DashboardScreen;