// SCREEN: Command Center
const DashboardScreen = () => {
  const [kpis, setKpis] = React.useState(MOCK.kpis);
  const [anomalies, setAnomalies] = React.useState(MOCK.anomalies);

  React.useEffect(() => {
    // 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();
          setKpis(prev => prev.map(k =>
            k.label === 'Total Events' ? { ...k, value: val } : k
          ));
        }
      })
      .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) {
          setAnomalies(data.anomalies.map(window.mapAnomaly));
        }
      })
      .catch(() => {}); // silently keep MOCK.anomalies
  }, []);

  const [agentInput, setAgentInput] = React.useState('');
  const agentChips = [
    "Why did conversion drop this morning?",
    "Which channel is underperforming vs last week?",
    "Top 5 paths leading to purchase",
    "Show me the biggest anomaly right now",
  ];
  const goAI = (q) => {
    if (window.AR_NAVIGATE) {
      window.AR_NAVIGATE('ai');
      setTimeout(() => window.dispatchEvent(new CustomEvent('ar:prefill', { detail: q || agentInput })), 80);
    }
  };

  return (
    <div>
      {/* ── AI Agent Hero ─────────────────────────────────────────────── */}
      <div style={{
        background:'linear-gradient(135deg,rgba(139,92,246,0.10) 0%,rgba(6,182,212,0.05) 100%)',
        border:'1px solid rgba(139,92,246,0.25)', borderRadius:12,
        padding:'20px 24px', marginBottom:16, position:'relative', overflow:'hidden',
      }}>
        <div style={{position:'absolute',top:-40,right:-40,width:200,height:200,borderRadius:'50%',background:'radial-gradient(circle,rgba(139,92,246,0.12) 0%,transparent 70%)',pointerEvents:'none'}}/>
        <div style={{display:'flex',gap:16,alignItems:'flex-start',position:'relative'}}>
          <div style={{width:42,height:42,borderRadius:12,flexShrink:0,background:'linear-gradient(135deg,#8B5CF6,#06B6D4)',display:'flex',alignItems:'center',justifyContent:'center',boxShadow:'0 0 0 1px rgba(139,92,246,0.4),0 4px 16px rgba(139,92,246,0.25)'}}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 2L3 7l9 5 9-5-9-5z" fill="rgba(255,255,255,0.95)"/>
              <path d="M3 12l9 5 9-5" stroke="rgba(255,255,255,0.6)" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
            </svg>
          </div>
          <div style={{flex:1,minWidth:0}}>
            <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
              <span style={{fontSize:13,fontWeight:600,color:'var(--text-1)'}}>AstraReach AI</span>
              <span style={{fontSize:10,fontWeight:700,color:'#10B981',background:'rgba(16,185,129,0.12)',border:'1px solid rgba(16,185,129,0.25)',borderRadius:20,padding:'2px 8px',letterSpacing:'0.04em'}}>ACTIVE</span>
              <span style={{fontSize:11,color:'var(--text-4)',marginLeft:'auto'}}>⌘K anywhere to ask</span>
            </div>
            <div style={{fontSize:13,color:'var(--text-2)',lineHeight:1.6,marginBottom:14}}>
              Conversion rate is up <strong style={{color:'#10B981'}}>+0.8pp</strong> from the checkout fix shipped Apr 15.
              {' '}Meta Ads impressions dropped <strong style={{color:'#F43F5E'}}>−22%</strong> in the last hour — looks like a budget cap issue.
              {' '}Click a suggestion or ask anything about your data below.
            </div>
            <div style={{display:'flex',flexWrap:'wrap',gap:6,marginBottom:14}}>
              {agentChips.map(c => (
                <button key={c} onClick={() => goAI(c)} style={{fontSize:11,padding:'5px 12px',borderRadius:20,background:'rgba(139,92,246,0.08)',border:'1px solid rgba(139,92,246,0.22)',color:'var(--text-2)',cursor:'pointer',fontFamily:'inherit'}}
                  onMouseEnter={e=>{e.currentTarget.style.background='rgba(139,92,246,0.18)';e.currentTarget.style.color='var(--text-1)';}}
                  onMouseLeave={e=>{e.currentTarget.style.background='rgba(139,92,246,0.08)';e.currentTarget.style.color='var(--text-2)';}}
                >{c}</button>
              ))}
            </div>
            <div style={{display:'flex',gap:8}}>
              <input type="text" placeholder="Ask anything about your marketing data…"
                value={agentInput} onChange={e=>setAgentInput(e.target.value)}
                onKeyDown={e=>e.key==='Enter'&&agentInput.trim()&&goAI()}
                style={{flex:1,padding:'9px 14px',fontSize:12,background:'rgba(0,0,0,0.25)',border:'1px solid rgba(139,92,246,0.3)',borderRadius:8,color:'var(--text-1)',outline:'none',fontFamily:'inherit'}}
              />
              <button onClick={()=>agentInput.trim()&&goAI()} style={{padding:'9px 18px',fontSize:12,fontWeight:600,background:'linear-gradient(135deg,#8B5CF6,#7C3AED)',color:'#fff',border:'none',borderRadius:8,cursor:'pointer',display:'flex',alignItems:'center',gap:6,fontFamily:'inherit',boxShadow:'0 4px 12px rgba(139,92,246,0.35)'}}>
                <Icon name="sparkle" size={12}/>Ask AI
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* ── Quick-nav row ──────────────────────────────────────────────── */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10,marginBottom:16}}>
        {[
          {icon:'map',   label:'Journey Map',  sub:'See where users drop off',  screen:'journey',  color:'#8B5CF6'},
          {icon:'alert', label:'Anomalies',     sub:'3 active · needs review',   screen:'anomalies',color:'#F43F5E'},
          {icon:'radio', label:'Channels',      sub:'Meta · Google · App',       screen:'channels', color:'#06B6D4'},
          {icon:'brain', label:'Decisions',     sub:'Make data-driven choices',  screen:'decisions',color:'#10B981'},
        ].map(n=>(
          <div key={n.screen} onClick={()=>window.AR_NAVIGATE&&window.AR_NAVIGATE(n.screen)}
            style={{padding:'14px 16px',borderRadius:10,cursor:'pointer',background:'var(--bg-2)',border:'1px solid var(--border)',transition:'border-color .15s,background .15s'}}
            onMouseEnter={e=>{e.currentTarget.style.borderColor=n.color;e.currentTarget.style.background='var(--bg-3)';}}
            onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--border)';e.currentTarget.style.background='var(--bg-2)';}}
          >
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:6}}>
              <Icon name={n.icon} size={15}/>
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--text-4)" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </div>
            <div style={{fontSize:12,fontWeight:600,color:'var(--text-1)',marginBottom:2}}>{n.label}</div>
            <div style={{fontSize:11,color:'var(--text-3)'}}>{n.sub}</div>
          </div>
        ))}
      </div>

      <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}}>
            {[
              { 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' },
            ].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>

      <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={() => { if (window.AR_NAVIGATE) window.AR_NAVIGATE('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;