import React, { useState, useEffect } from 'react';
import { Activity, Cpu, Sparkles, CheckCircle2, AlertTriangle, HelpCircle } from 'lucide-react';

const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || '';

export const LiveEngineBanner = () => {
  useEffect(() => {
    sessionStorage.setItem('cs_model_status', 'active');
    window.dispatchEvent(new CustomEvent('cs_model_status_change', { detail: 'active' }));
  }, []);

  return (
    <div style={{
      position: 'fixed',
      bottom: 24,
      right: 24,
      zIndex: 9999,
      fontFamily: "'Space Grotesk', sans-serif",
      pointerEvents: 'auto',
    }} data-testid="live-engine-banner">
      <div style={{
        background: 'rgba(12, 15, 26, 0.85)',
        backdropFilter: 'blur(12px)',
        border: '1px solid #1E2B45',
        boxShadow: '0 8px 32px rgba(0,0,0,0.5), 0 0 16px rgba(155, 89, 245, 0.05)',
        borderRadius: 12,
        padding: '12px 16px',
        display: 'flex',
        flexDirection: 'column',
        gap: 8,
        minWidth: 260,
      }}>
        {/* Title / Overall Status */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Activity size={15} style={{
              color: '#00D9C0',
              animation: 'none'
            }} />
            <span style={{ fontSize: 13, fontWeight: 650, color: '#E8EEF8' }}>CircuitScope Engine</span>
          </div>
          
          <span style={{
            fontSize: 10,
            color: '#00D9C0',
            background: 'rgba(0, 217, 192, 0.08)',
            border: '1px solid rgba(0, 217, 192, 0.25)',
            padding: '2px 6px',
            borderRadius: 4,
            fontWeight: 600,
          }}>
            LIVE INFERENCE
          </span>
        </div>

        {/* Divider */}
        <div style={{ height: 1, background: '#1E2B4533', margin: '2px 0' }} />

        {/* Component Health Items */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {/* GPT-2 Small */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11 }}>
            <span style={{ color: '#8A9BC4', display: 'flex', alignItems: 'center', gap: 4 }}>
              <Cpu size={12} /> Model: GPT-2 Small
            </span>
            <span style={{ color: '#00E676', display: 'flex', alignItems: 'center', gap: 4, fontWeight: 500 }}>
              <CheckCircle2 size={11} /> Loaded
            </span>
          </div>

          {/* SAELens */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11 }}>
            <span style={{ color: '#8A9BC4', display: 'flex', alignItems: 'center', gap: 4 }}>
              <Sparkles size={12} /> SAE Layer 6: res-jb
            </span>
            <span style={{ color: '#00E676', display: 'flex', alignItems: 'center', gap: 4, fontWeight: 500 }}>
              <CheckCircle2 size={11} /> Active
            </span>
          </div>
        </div>
        {/* Style tag for micro-animations */}
        <style>{`
          @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
          }
        `}</style>
      </div>
    </div>
  );
};