import React, { useState, useEffect, useCallback, useRef } from 'react';
import { 
  Activity, 
  Terminal, 
  Database, 
  ShieldAlert, 
  Cpu, 
  Radio, 
  Zap, 
  Flame, 
  Lock,
  Server,
  Layers,
  ArrowLeft,
  HardDrive,
  Globe,
  Wifi
} from 'lucide-react';
import { Incident, IncidentStatus, ExposurePoint } from '../types';
import { geminiService } from '../services/geminiService';
import { datadog, ConfluentStreamClient } from '../services/externalServices';
import ExposureChart from './ExposureChart';
import Orb from './Orb';

const NORMAL_MEAN = 15000;
const DRIFT_MEAN = 32000;
const STABLE_DEPLOY_URL = "https://silentloss-commander-v2-0-1047953835170.us-west1.run.app";

const generateDataPoint = (mode: 'NORMAL' | 'CHAOS', timeOffset: number = 0): ExposurePoint => {
  const time = new Date(Date.now() - timeOffset).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
  const mean = mode === 'NORMAL' ? NORMAL_MEAN : DRIFT_MEAN;
  
  return {
    time,
    exposure: mean + Math.random() * 2000 - 1000,
    threshold: 25000,
    compliance: mode === 'NORMAL' ? 98 + Math.random() * 2 : 45 + Math.random() * 15,
    reputation: mode === 'NORMAL' ? 95 + Math.random() * 5 : 60 + Math.random() * 10
  };
};

interface DashboardProps {
  onBack: () => void;
}

const Dashboard: React.FC<DashboardProps> = ({ onBack }) => {
  const [isChaosMode, setIsChaosMode] = useState(false);
  const [incident, setIncident] = useState<Incident | null>(null);
  const [exposureData, setExposureData] = useState<ExposurePoint[]>([]);
  const [isSpeaking, setIsSpeaking] = useState(false);
  const [auditLog, setAuditLog] = useState<{time: string, msg: string, type: 'info' | 'warn' | 'error', service: string}[]>([]);
  const [savedLoss, setSavedLoss] = useState(124800);
  
  const audioContextRef = useRef<AudioContext | null>(null);
  const activeSourceRef = useRef<AudioBufferSourceNode | null>(null);
  const consoleRef = useRef<HTMLDivElement>(null);

  const stopAudio = useCallback(() => {
    if (activeSourceRef.current) {
      try {
        activeSourceRef.current.stop();
      } catch (e) {}
      activeSourceRef.current = null;
    }
    setIsSpeaking(false);
  }, []);

  const addLog = useCallback((msg: string, type: 'info' | 'warn' | 'error' = 'info', service: string = 'system') => {
    const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
    setAuditLog(prev => [{ time, msg, type, service }, ...prev].slice(0, 30));
    datadog.log(`[${service}] ${msg}`, type);
  }, []);

  useEffect(() => {
    datadog.init();
    const stream = new ConfluentStreamClient();
    const sub = stream.subscribe("lending.decisions.v1", (msg) => {
      if (!isChaosMode) addLog(`Kafka Packet Received (P:${msg.partition} O:${msg.offset})`, 'info', 'confluent');
    });
    
    const initial = Array.from({ length: 20 }).map((_, i) => generateDataPoint('NORMAL', (19 - i) * 5000));
    setExposureData(initial);

    return () => {
      clearInterval(sub);
      stopAudio(); 
    };
  }, [isChaosMode, addLog, stopAudio]);

  const decodeAndPlay = async (base64Audio: string) => {
    if (!isChaosMode) return; 
    stopAudio(); 
    
    if (!audioContextRef.current) audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 24000 });
    if (audioContextRef.current.state === 'suspended') await audioContextRef.current.resume();
    
    setIsSpeaking(true);
    const bytes = Uint8Array.from(atob(base64Audio), c => c.charCodeAt(0));
    const dataInt16 = new Int16Array(bytes.buffer);
    const buffer = audioContextRef.current.createBuffer(1, dataInt16.length, 24000);
    const channelData = buffer.getChannelData(0);
    for (let i = 0; i < dataInt16.length; i++) channelData[i] = dataInt16[i] / 32768.0;

    const source = audioContextRef.current.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContextRef.current.destination);
    source.onended = () => { setIsSpeaking(false); activeSourceRef.current = null; };
    activeSourceRef.current = source;
    source.start();
  };

  const triggerDriftAlert = useCallback(async () => {
    const newIncident: Incident = {
      id: `INC-${Math.floor(Math.random() * 10000)}`,
      timestamp: new Date().toISOString(),
      type: 'Compliance Variance Drift',
      severity: 'CRITICAL',
      status: IncidentStatus.ACTIVE,
      segment: 'TX-CLUSTER / FAIR_LENDING',
      summary_text: 'Analyzing multi-vector risk...',
      exposure_delta: 14250.88,
      impact_vectors: { economic: 88, regulatory: 92, reputation: 65 }
    };
    setIncident(newIncident);
    addLog("CRITICAL: High-risk variance detected in lending logic", 'error', 'ai-judge');
    
    const analysis = await geminiService.analyzeIncident(`${newIncident.type}. Predicted regulatory fine: $4.2M.`);
    if (analysis && isChaosMode) {
      setIncident(prev => prev ? { ...prev, summary_text: analysis } : null);
      addLog(`Judge Recommendation Rendered`, 'warn', 'gemini-3');
      const audioData = await geminiService.speakAnalysis(analysis);
      if (audioData) await decodeAndPlay(audioData);
    }
  }, [addLog, isChaosMode]);

  useEffect(() => {
    const interval = setInterval(() => {
      const mode = isChaosMode ? 'CHAOS' : 'NORMAL';
      const newPoint = generateDataPoint(mode);
      setExposureData(prev => [...prev.slice(1), newPoint]);
      if (isChaosMode) {
        setSavedLoss(prev => prev + 450); 
        if (newPoint.exposure > 25000 && !incident) triggerDriftAlert();
      }
    }, 3000);
    return () => clearInterval(interval);
  }, [isChaosMode, incident, triggerDriftAlert]);

  return (
    <div className={`min-h-screen transition-all duration-1000 p-6 ${isChaosMode ? 'bg-red-950/20' : 'bg-[#0f172a]'}`}>
      <header className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6 border-b border-slate-800 pb-6">
        <div className="flex items-start gap-4">
          <button onClick={() => { stopAudio(); onBack(); }} className="p-2 rounded-lg bg-slate-800 border border-slate-700 text-slate-400 hover:text-white"><ArrowLeft size={20} /></button>
          <div>
            <h1 className={`text-2xl font-black flex items-center gap-3 tracking-tight ${isChaosMode ? 'text-red-500' : 'text-cyan-400'}`}>
              <Radio className={isChaosMode ? 'animate-ping' : 'animate-pulse'} /> SILENTLOSS COMMANDER <span className="text-slate-600 font-light ml-2">v2.0</span>
            </h1>
          </div>
        </div>
        <button onClick={() => { stopAudio(); setIsChaosMode(!isChaosMode); if (incident) setIncident(null); }} 
          className={`px-4 py-2 rounded-lg border font-mono text-[10px] font-black transition-all flex items-center gap-2 uppercase tracking-widest ${isChaosMode ? 'bg-red-600 border-red-500 text-white shadow-lg' : 'bg-slate-800 border-slate-700 text-slate-400'}`}>
          {isChaosMode ? <Flame size={14} /> : <Zap size={14} />} {isChaosMode ? 'STOP_DRIFT' : 'SIMULATE_DRIFT'}
        </button>
      </header>

      <main className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <div className="lg:col-span-9 space-y-6">
          <section className="bg-slate-800/30 rounded-2xl p-6 border border-slate-700/50">
            <h2 className="text-xs font-black uppercase tracking-widest flex items-center gap-2 text-slate-400 mb-6">
              <Activity size={14} className="text-cyan-400" /> Economic Integrity Monitor
            </h2>
            <ExposureChart data={exposureData} />
          </section>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-slate-950 border border-slate-800 rounded-xl overflow-hidden flex flex-col h-64">
              <div className="bg-slate-900 px-4 py-2 border-b border-slate-800 flex items-center gap-2">
                 <Terminal size={12} className="text-cyan-400" /> <span className="text-[10px] font-black text-slate-400">TACTICAL AUDIT LOG</span>
              </div>
              <div ref={consoleRef} className="p-4 overflow-y-auto font-mono text-[10px] space-y-1">
                {auditLog.map((log, i) => (
                  <div key={i} className={`flex gap-2 ${log.type === 'error' ? 'text-red-400' : 'text-slate-400'}`}>
                    <span className="text-slate-600">[{log.time}]</span>
                    <span className="font-bold">[{log.service.toUpperCase()}]</span>
                    <span>{log.msg}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="bg-slate-800/20 border border-slate-800 rounded-xl p-5 flex flex-col h-64">
               <h3 className="text-[10px] font-black text-slate-500 uppercase mb-4 tracking-widest flex items-center gap-2"><Server size={12} /> INFRASTRUCTURE MESH</h3>
               <div className="space-y-4">
                 {["Kafka Stream", "Datadog Agent", "Gemini Node", "Policy Engine"].map((n, i) => (
                   <div key={i} className="flex items-center justify-between border-b border-slate-800/50 pb-3">
                     <div className="flex items-center gap-3">
                        <div className={`w-1.5 h-1.5 rounded-full ${isChaosMode && i===0 ? 'bg-orange-500 animate-pulse' : 'bg-emerald-500'}`} />
                        <span className="text-[10px] font-bold text-slate-200">{n}</span>
                     </div>
                     <span className="text-[9px] text-slate-500 font-mono">STABLE</span>
                   </div>
                 ))}
               </div>
            </div>
          </div>
        </div>

        <div className="lg:col-span-3">
          <section className="bg-slate-800 border-2 border-slate-700/50 rounded-2xl flex flex-col items-center justify-center p-8 h-full min-h-[500px] relative shadow-2xl">
            <Orb active={!!incident} color={incident ? "#ef4444" : "#10b981"} isSpeaking={isSpeaking} />
            <div className="mt-12 text-center w-full">
              {incident ? (
                <div className="space-y-6">
                  <div className="bg-black/40 p-5 rounded-xl border border-red-500/20">
                    <p className="text-red-400 font-mono text-[11px] italic">"{incident.summary_text}"</p>
                  </div>
                  <button onClick={() => { stopAudio(); setIncident(null); setIsChaosMode(false); }} className="w-full py-4 bg-red-600 text-white font-black rounded-xl uppercase tracking-widest text-[10px]">
                    <Lock size={14} className="inline mr-2" /> Authorize Lockdown
                  </button>
                </div>
              ) : (
                <div className="opacity-40 flex flex-col items-center gap-4">
                  <Terminal size={32} className="text-cyan-400" />
                  <p className="text-[10px] italic uppercase text-slate-500">Awaiting Variance Signal...</p>
                </div>
              )}
            </div>
          </section>
        </div>
      </main>
    </div>
  );
};

export default Dashboard;