// SCREEN: Anomaly Detection

const AnomaliesScreen = () => {
  const [items, setItems] = React.useState(MOCK.anomalies);
  const [sensitivity, setSensitivity] = React.useState(3.0);
  const [running, setRunning] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const [filter, setFilter] = React.useState('all');
  const [timeRange, setTimeRange] = React.useState(24);
  const [detectionToast, setDetectionToast] = React.useState(null);

  const mapAnomaly = (a, i) => ({
    id: a.anomaly_id || a.id || ('an_' + i),
    type: a.type || 'METRIC_SPIKE',
    sev: a.severity || a.sev || 'MEDIUM',
    title: a.description || a.title || 'Anomaly detected',
    desc: a.details || a.desc || '',
    metric: a.current_value != null ? String(a.current_value) : (a.metric || '—'),
    base: a.baseline_value != null ? String(a.baseline_value) : (a.base || '—'),
    delta: a.delta_pct != null ? (a.delta_pct > 0 ? '+' : '') + a.delta_pct.toFixed(1) + '%' : (a.delta || '—'),
    when: a.detected_at || a.when || 'recently',
  });

  const runDetection = () => {
    setRunning(true);
    arFetch('/v1/insights/anomalies', {
      method: 'POST',
      body: JSON.stringify({ time_range_hours: timeRange, baseline_hours: 168, sensitivity }),
    })
      .then(data => {
        // FIX: unconditionally update — empty array is a valid state (clears stale list)
        setItems((data.anomalies || []).map(mapAnomaly));
      })
      .catch(() => {
        // Demo mode: shuffle mock anomaly data to simulate a fresh detection run
        setItems(prev => {
          const shuffled = [...prev].sort(() => Math.random() - 0.5);
          return shuffled.slice(0, 2 + Math.floor(Math.random() * 3));
        });
        setDetectionToast('Demo mode — detection complete (' + timeRange + 'h window, ' + sensitivity + 'σ)');
        setTimeout(() => setDetectionToast(null), 4000);
      })
      .finally(() => setRunning(false));
  };

  const sevOrder = { CRITICAL: 0, HIGH: 1, MEDIUM: 2, LOW: 3 };
  const sevColor = { CRITICAL: 'var(--rose)', HIGH: 'var(--amber)', MEDIUM: 'var(--cyan)', LOW: 'var(--text-3)' };
  const typeLabel = { METRIC_SPIKE: 'Spike', VOLUME_DROP: 'Volume', CHANNEL_SHIFT: 'Channel', LATENCY: 'Latency', ERROR_RATE: 'Errors' };

  const filtered = items
    .filter(a => filter === 'all' || a.sev === filter)
    .sort((a, b) => (sevOrder[a.sev] ?? 9) - (sevOrder[b.sev] ?? 9));

  const counts = { CRITICAL: 0, HIGH: 0, MEDIUM: 0, LOW: 0 };
  items.forEach(a => { if (counts[a.sev] !== undefined) counts[a.sev]++; });

  return (
    <React.Fragment>
    <div>
      <AICallout>
        <strong>{items.length} anomalies</strong> detected in the last {timeRange}h.
        {counts.CRITICAL > 0 && <span> <strong style={{color: 'var(--rose)'}}>{counts.CRITICAL} CRITICAL</strong> require immediate attention.</span>}
        {counts.HIGH > 0 && <span> <strong style={{color: 'var(--amber)'}}>{counts.HIGH} HIGH</strong> need review.</span>}
        {' '}Detection threshold: {sensitivity}σ above 7-day rolling baseline.
      </AICallout>

      {/* Controls */}
      <div style={{display: 'flex', gap: 10, alignItems: 'center', marginBottom: 14, flexWrap: 'wrap'}}>
        <div className="seg">
          {[['all', 'All'], ['CRITICAL', 'Critical'], ['HIGH', 'High'], ['MEDIUM', 'Medium']].map(([id, label]) => (
            <button key={id} className={filter === id ? 'active' : ''} onClick={() => setFilter(id)}>
              {label}{id !== 'all' && counts[id] > 0 ? ` (${counts[id]})` : ''}
            </button>
          ))}
        </div>
        <div style={{display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto'}}>
          <span style={{fontSize: 11, color: 'var(--text-3)'}}>Window</span>
          <div className="seg">
            {[[4,'4h'],[24,'24h'],[168,'7d']].map(([v,l]) => (
              <button key={v} className={timeRange === v ? 'active' : ''} onClick={() => setTimeRange(v)}>{l}</button>
            ))}
          </div>
          <span style={{fontSize: 11, color: 'var(--text-3)'}}>Sensitivity</span>
          <div className="seg">
            {[[2,'2σ'],[3,'3σ'],[4,'4σ']].map(([v,l]) => (
              <button key={v} className={sensitivity === v ? 'active' : ''} onClick={() => setSensitivity(v)}>{l}</button>
            ))}
          </div>
          <button className="btn primary" onClick={runDetection} disabled={running}>
            <Icon name="refresh" size={12} />{running ? 'Running…' : 'Run detection'}
          </button>
        </div>
      </div>

      {/* Severity summary strip */}
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 14}}>
        {[['CRITICAL', 'var(--rose)'], ['HIGH', 'var(--amber)'], ['MEDIUM', 'var(--cyan)'], ['LOW', 'var(--text-3)']].map(([sev, color]) => (
          <div key={sev} className="card" style={{padding: '14px 16px', borderLeft: `3px solid ${color}`, cursor: 'pointer'}}
               onClick={() => setFilter(filter === sev ? 'all' : sev)}>
            <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: 6}}>{sev}</div>
            <div style={{fontSize: 28, fontWeight: 700, color, letterSpacing: '-0.02em'}}>{counts[sev]}</div>
          </div>
        ))}
      </div>

      {/* List + detail panel */}
      <div style={{display: 'grid', gridTemplateColumns: selected ? '1fr 360px' : '1fr', gap: 14}}>
        <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
          {filtered.length === 0 && (
            <div style={{textAlign: 'center', padding: 60, color: 'var(--text-4)', fontSize: 13}}>
              No anomalies match the current filter.
            </div>
          )}
          {filtered.map(a => {
            const color = sevColor[a.sev] || 'var(--text-3)';
            const sel = selected?.id === a.id;
            return (
              <div key={a.id}
                style={{
                  display: 'grid', gridTemplateColumns: '4px 1fr auto',
                  alignItems: 'center',
                  background: sel ? 'rgba(139,92,246,0.06)' : 'var(--bg-2)',
                  border: `1px solid ${sel ? 'rgba(139,92,246,0.4)' : 'var(--border)'}`,
                  borderRadius: 10, overflow: 'hidden', cursor: 'pointer',
                }}
                onClick={() => setSelected(sel ? null : a)}>
                <div style={{background: color, alignSelf: 'stretch'}} />
                <div style={{padding: '14px 16px'}}>
                  <div style={{display: 'flex', gap: 8, alignItems: 'center', marginBottom: 6}}>
                    <SevBadge sev={a.sev} />
                    <span className="badge plain" style={{fontSize: 9}}>{typeLabel[a.type] || a.type}</span>
                    <span style={{fontSize: 11, color: 'var(--text-4)', marginLeft: 'auto'}}>{a.when}</span>
                  </div>
                  <div style={{fontSize: 14, fontWeight: 600, color: 'var(--text-1)', marginBottom: 4}}>{a.title}</div>
                  <div style={{fontSize: 12, color: 'var(--text-3)', lineHeight: 1.5}}>{a.desc}</div>
                </div>
                <div style={{textAlign: 'right', padding: '14px 16px', minWidth: 110}}>
                  <div style={{fontSize: 22, fontWeight: 700, color: (a.delta || '').startsWith('+') ? 'var(--emerald)' : 'var(--rose)', fontFamily: 'var(--mono)'}}>{a.delta}</div>
                  <div style={{fontSize: 10, color: 'var(--text-4)', marginTop: 2}}>
                    <span className="mono">{a.metric}</span>
                    <span style={{color: 'var(--text-4)'}}> vs </span>
                    <span className="mono">{a.base}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {selected && (
          <div className="card" style={{position: 'sticky', top: 0, alignSelf: 'start', padding: 0, overflow: 'hidden'}}>
            <div style={{padding: '14px 16px', borderBottom: '1px solid var(--border)', background: 'var(--bg-3)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
              <SevBadge sev={selected.sev} />
              <button className="btn ghost" style={{fontSize: 11, padding: '3px 8px'}} onClick={() => setSelected(null)}>✕</button>
            </div>
            <div style={{padding: 16}}>
              <div style={{fontSize: 16, fontWeight: 700, color: 'var(--text-1)', marginBottom: 8, lineHeight: 1.4}}>{selected.title}</div>
              <div style={{fontSize: 12, color: 'var(--text-3)', lineHeight: 1.6, marginBottom: 16}}>{selected.desc}</div>

              {[
                ['Anomaly ID', <span className="mono" style={{fontSize: 11}}>{selected.id}</span>],
                ['Type', <span className="badge plain" style={{fontSize: 10}}>{typeLabel[selected.type] || selected.type}</span>],
                ['Current value', <span className="mono" style={{color: 'var(--rose)'}}>{selected.metric}</span>],
                ['Baseline (7d)', <span className="mono">{selected.base}</span>],
                ['Delta', <span className="mono" style={{color: (selected.delta||'').startsWith('+') ? 'var(--emerald)' : 'var(--rose)', fontWeight: 600}}>{selected.delta}</span>],
                ['Detected', <span style={{color: 'var(--text-2)'}}>{selected.when}</span>],
              ].map(([label, val], i, arr) => (
                <div key={i} style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: i < arr.length - 1 ? '1px solid var(--border)' : 'none', fontSize: 12}}>
                  <span style={{color: 'var(--text-3)'}}>{label}</span>
                  <span>{val}</span>
                </div>
              ))}

              <div style={{marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8}}>
                <button className="btn primary" style={{width: '100%', justifyContent: 'center'}}
                  onClick={() => { if (window.AR_NAVIGATE) window.AR_NAVIGATE('decisions'); }}>
                  <Icon name="brain" size={12} /> Create decision →
                </button>
                <button className="btn ghost" style={{width: '100%', justifyContent: 'center', fontSize: 12}}
                  onClick={() => {
                    setItems(prev => prev.filter(x => x.id !== selected.id));
                    setSelected(null);
                  }}>
                  Acknowledge
                </button>
              </div>

              <div style={{padding: 10, background: 'rgba(139,92,246,0.06)', border: '1px solid rgba(139,92,246,0.2)', borderRadius: 8, marginTop: 14, fontSize: 11, color: 'var(--text-3)', lineHeight: 1.6}}>
                Detected at <strong style={{color: 'var(--text-1)'}}>{sensitivity}σ</strong> above the 7-day rolling baseline using Z-score analysis. Adjust sensitivity in controls above to surface earlier signals.
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
    {detectionToast && (
      <div style={{position:'fixed',bottom:24,right:24,zIndex:2000,padding:'10px 18px',background:'rgba(16,185,129,0.9)',color:'#001',borderRadius:8,fontSize:12,fontWeight:500,boxShadow:'0 4px 20px rgba(0,0,0,0.4)'}}>
        ✅ {detectionToast}
      </div>
    )}
    </React.Fragment>
  );
};

window.AnomaliesScreen = AnomaliesScreen;