// SCREEN: Live Feed
const LiveFeedScreen = () => {
  const [events, setEvents] = React.useState(MOCK.events);
  const [selected, setSelected] = React.useState(events[0]);
  const [sourceFilter, setSourceFilter] = React.useState('all');

  // Track seen IDs to avoid duplicates when API returns previously-seen events
  const [seenIds] = React.useState(() => new Set(MOCK.events.map(e => e.id)));

  // Live feed: poll API every 5s, fall back to mock generation on error
  React.useEffect(() => {
    const SRCS = ['web', 'app', 'meta_ads', 'google_ads', 'offline'];
    const TYPES = ['page_view', 'add_to_cart', 'search', 'session_start', 'video_play'];
    const ACTORS = ['act_91ae3', 'act_4b02a', 'act_7d1e8', 'act_b19c2', 'act_0e4d7'];

    const mockEvent = () => {
      const now = new Date();
      const pad = n => String(n).padStart(2, '0');
      return {
        id: 'evt_' + Math.random().toString(16).slice(2, 12),
        source: SRCS[Math.floor(Math.random() * SRCS.length)],
        type: TYPES[Math.floor(Math.random() * TYPES.length)],
        actor: ACTORS[Math.floor(Math.random() * ACTORS.length)],
        ts: pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds()),
        status: 'success', q: 0.85 + Math.random() * 0.14, _new: true,
      };
    };

    const controller = { current: null };
    const seenIds_local = seenIds;

    const fetchLive = () => {
      const ac = new AbortController();
      controller.current = ac;
      arFetch('/v1/events?limit=20', { signal: ac.signal })
        .then(data => {
          const raw = Array.isArray(data) ? data : (data.events || []);
          const fresh = raw
            .map(window.mapEvent)
            .filter(e => !seenIds_local.has(e.id))
            .map(e => { seenIds_local.add(e.id); return { ...e, _new: true }; });
          if (fresh.length > 0) {
            setEvents(prev => [...fresh, ...prev].slice(0, 40));
          }
        })
        .catch(err => {
          if (err && err.name === 'AbortError') return;
          // API unavailable — generate a single mock event as fallback
          setEvents(prev => [mockEvent(), ...prev].slice(0, 40));
        });
    };

    const getInterval = () => {
      const speed = window.AR_LIVE_SPEED || 'normal';
      return speed === 'fast' ? 2000 : speed === 'slow' ? 10000 : 5000;
    };

    fetchLive();
    let intv = setInterval(fetchLive, getInterval());

    // Re-schedule when speed tweak changes
    const speedWatcher = setInterval(() => {
      const next = getInterval();
      clearInterval(intv);
      intv = setInterval(fetchLive, next);
    }, 2000);

    return () => {
      clearInterval(intv);
      clearInterval(speedWatcher);
      if (controller.current) controller.current.abort();
    };
  }, []);

  // FIX 7: validate selected event still exists after list truncation
  React.useEffect(() => {
    if (selected && !events.find(e => e.id === selected.id)) {
      setSelected(events[0] || null);
    }
  }, [events]);

  // FIX: reset selected when sourceFilter changes and selected is no longer in the filtered list
  React.useEffect(() => {
    const filteredNow = sourceFilter === 'all' ? events : events.filter(e => e.source === sourceFilter);
    if (selected && !filteredNow.find(e => e.id === selected.id)) {
      setSelected(filteredNow[0] || null);
    }
  }, [sourceFilter]);

  const filtered = sourceFilter === 'all' ? events : events.filter(e => e.source === sourceFilter);

  return (
    <div style={{display: 'flex', gap: 14, height: '100%'}}>
      <div style={{flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0}}>
        <div style={{display: 'flex', gap: 8, alignItems: 'center', marginBottom: 14, flexWrap: 'wrap'}}>
          <span className="dot pulse" />
          <span style={{fontSize: 12, color: 'var(--text-1)'}}>Ingesting live</span>
          <span className="mono" style={{fontSize: 11, color: 'var(--text-3)'}}>· 284 events/min</span>
          <span className="mono" style={{fontSize: 11, color: 'var(--text-3)', marginLeft: 8}}>· 42,184 today</span>

          <div style={{marginLeft: 'auto', display: 'flex', gap: 6}}>
            {['all', 'web', 'app', 'meta_ads', 'google_ads', 'offline'].map(s => (
              <button key={s} className={`filter-chip ${sourceFilter === s ? 'active' : ''}`} onClick={() => setSourceFilter(s)}>
                {s}
              </button>
            ))}
          </div>
        </div>

        <div className="card" style={{padding: 0, flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden'}}>
          <div style={{display: 'grid', gridTemplateColumns: '150px 100px 140px 1fr 110px 70px', gap: 10, padding: '10px 14px', borderBottom: '1px solid var(--border)', fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em'}}>
            <span>Event ID</span>
            <span>Source</span>
            <span>Type</span>
            <span>Actor</span>
            <span>Time</span>
            <span>Status</span>
          </div>
          <div style={{flex: 1, overflow: 'auto'}}>
            {filtered.map(e => (
              <div key={e.id}
                   className={`event-row ${selected && selected.id === e.id ? 'selected' : ''} ${e._new ? 'new' : ''}`}
                   onClick={() => setSelected(e)}>
                <span className="mono" style={{fontSize: 11, color: 'var(--text-2)'}}>{e.id}</span>
                <SourceBadge src={e.source} />
                <span style={{fontSize: 12, color: 'var(--text-1)'}}>{e.type}</span>
                <span className="mono" style={{fontSize: 11, color: 'var(--text-3)'}}>{e.actor}</span>
                <span className="mono" style={{fontSize: 11, color: 'var(--text-3)'}}>{e.ts}</span>
                <StatusBadge status={e.status} />
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="drawer" style={{width: 380, borderLeft: 'none', background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 12, padding: 18}}>
        {selected ? (
          <div>
            <div style={{display: 'flex', gap: 6, alignItems: 'center', marginBottom: 10}}>
              <SourceBadge src={selected.source} />
              <span className="badge">{selected.type}</span>
              <StatusBadge status={selected.status} />
            </div>
            <div className="mono" style={{fontSize: 11, color: 'var(--text-3)', marginBottom: 14, wordBreak: 'break-all'}}>{selected.id}</div>

            <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8}}>Actor</div>
            <div className="mono" style={{fontSize: 12, color: 'var(--text-1)', marginBottom: 4}}>{selected.actor}</div>
            <button className="btn ghost" style={{fontSize: 11, padding: '4px 0'}} onClick={() => { if (window.AR_NAVIGATE) window.AR_NAVIGATE('identity'); }}>View actor profile →</button>

            <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: 18, marginBottom: 8}}>Payload</div>
            <div className="json-view">
              <div>{`{`}</div>
              <div>  <span className="k">"url"</span>: <span className="s">"/products/shoe-7"</span>,</div>
              <div>  <span className="k">"referrer"</span>: <span className="s">"https://google.com"</span>,</div>
              <div>  <span className="k">"session_id"</span>: <span className="s">"sess_9b2f"</span>,</div>
              <div>  <span className="k">"quality_score"</span>: <span className="n">{selected.q.toFixed(2)}</span>,</div>
              <div>  <span className="k">"is_bot"</span>: <span className="b">false</span></div>
              <div>{`}`}</div>
            </div>

            <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: 18, marginBottom: 8}}>Touchpoint</div>
            <div className="json-view">
              <div>{`{`}</div>
              <div>  <span className="k">"channel"</span>: <span className="s">"{selected.source}"</span>,</div>
              <div>  <span className="k">"campaign"</span>: <span className="s">"spring_24_launch"</span>,</div>
              <div>  <span className="k">"medium"</span>: <span className="s">"cpc"</span></div>
              <div>{`}`}</div>
            </div>

            <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: 18, marginBottom: 8}}>Quality flags</div>
            <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
              <span className="badge green">validated</span>
              <span className="badge cyan">enriched</span>
              <span className="badge">score {selected.q.toFixed(2)}</span>
            </div>
          </div>
        ) : <div style={{color: 'var(--text-3)'}}>Select an event</div>}
      </div>
    </div>
  );
};

window.LiveFeedScreen = LiveFeedScreen;