import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
import { 
  ShieldCheck, Activity, BrainCircuit, ScanEye, Database, 
  Terminal, Globe, Cpu, Lock, Mic, Square, Upload, 
  FileText, Wifi, Power, AlertTriangle, CheckCircle2,
  Bot, Send, ServerCrash, Phone, PhoneCall, PhoneOff, MessageSquare
} from 'lucide-react';

// ==========================================
// ROOT COMPONENT & BOOT SEQUENCE
// ==========================================
export default function App() {
  const [bootSequence, setBootSequence] = useState(true);
  const [bootText, setBootText] = useState([]);
  const [isAuthorized, setIsAuthorized] = useState(false);
  const [authEmail, setAuthEmail] = useState('');
  const [authError, setAuthError] = useState('');

  useEffect(() => {
    if (!bootSequence) return;
    
    const lines = [
      "INITIATING TUK SOVEREIGN TERMINAL v3.0...",
      "HOST: communication.thimothism.com",
      "CONNECTING TO MARIE BYRD LAND ANCHOR NODE... [OK]",
      "ESTABLISHING QSAC QUANTUM ENCRYPTION... [OK]",
      "LOADING LOLY OS CORE KERNEL... [OK]",
      "INTEGRATING @STRONGSEEDS TUK AI AGENT API... [OK]",
      "KARMA VIPASSANA INTEGRITY CHECK: 98.7%... [PASS]",
      "AWAITING HUMAN CORE AUTHENTICATION..."
    ];

    let currentLine = 0;
    const interval = setInterval(() => {
      if (currentLine < lines.length) {
        setBootText(prev => [...prev, lines[currentLine]]);
        currentLine++;
      } else {
        clearInterval(interval);
      }
    }, 400);

    return () => clearInterval(interval);
  }, [bootSequence]);

  const handleAuth = (e) => {
    e.preventDefault();
    if (authEmail.toLowerCase() === 'admin@thimothism.com') {
      setBootSequence(false);
      setIsAuthorized(true);
    } else {
      setAuthError('UNAUTHORIZED CORE. ACCESS DENIED.');
      setTimeout(() => setAuthError(''), 3000);
    }
  };

  if (bootSequence && !isAuthorized) {
    return (
      <div className="min-h-screen bg-[#020508] text-cyan-400 font-mono p-8 flex flex-col justify-center items-center relative overflow-hidden">
        <div className="absolute inset-0 z-0 opacity-10 bg-[linear-gradient(rgba(0,243,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(0,243,255,0.1)_1px,transparent_1px)] bg-[size:40px_40px]" />
        <div className="z-10 w-full max-w-2xl border border-cyan-800/50 bg-black/80 p-6 rounded shadow-[0_0_30px_rgba(0,243,255,0.1)]">
          <div className="flex items-center gap-3 mb-6 border-b border-cyan-900 pb-4">
            <ShieldCheck className="w-8 h-8 text-cyan-500 animate-pulse" />
            <h1 className="text-xl font-bold tracking-widest text-cyan-300">QSAC SECURITY GATEWAY</h1>
          </div>
          <div className="space-y-2 mb-8 min-h-[200px]">
            {bootText.map((line, i) => (
              <div key={i} className="text-sm text-cyan-500 flex items-center gap-2">
                <span className="text-cyan-700">{'>'}</span> {line}
              </div>
            ))}
            {bootText.length === 8 && (
              <div className="mt-4 animate-pulse text-green-400 flex items-center gap-2">
                <Lock className="w-4 h-4" /> AUTHENTICATION REQUIRED
              </div>
            )}
          </div>
          {bootText.length === 8 && (
            <form onSubmit={handleAuth} className="space-y-4 border-t border-cyan-900/50 pt-6">
              <div>
                <label className="block text-[10px] tracking-widest text-cyan-600 mb-2">HUMAN CORE IDENTITY (EMAIL)</label>
                <input 
                  type="email" 
                  value={authEmail}
                  onChange={(e) => setAuthEmail(e.target.value)}
                  placeholder="e.g. admin@thimothism.com"
                  className="w-full bg-black/50 border border-cyan-800 rounded px-4 py-3 text-cyan-100 focus:outline-none focus:border-cyan-400 transition-colors"
                  required
                />
              </div>
              {authError && <div className="text-red-500 text-xs tracking-widest animate-pulse">{authError}</div>}
              <button 
                type="submit"
                className="w-full py-3 bg-cyan-950/80 border border-cyan-500 text-cyan-300 hover:bg-cyan-900 transition-colors font-bold tracking-widest rounded shadow-[inset_0_0_15px_rgba(0,243,255,0.2)]"
              >
                VERIFY & INITIATE LOLY OS
              </button>
            </form>
          )}
        </div>
        <div className="absolute bottom-4 text-[10px] text-cyan-800 tracking-widest z-10">
          HOSTED AT COMMUNICATION.THIMOTHISM.COM
        </div>
      </div>
    );
  }

  return <MainTerminal />;
}

// ==========================================
// MAIN TERMINAL LAYOUT
// ==========================================
const MainTerminal = memo(function MainTerminal() {
  const [activeModule, setActiveModule] = useState('agent');
  const [notifications, setNotifications] = useState([]);

  // Performance Upgrade: useCallback to prevent unnecessary re-renders of child components
  const addNotification = useCallback((msg, type = 'info') => {
    const id = Date.now() + Math.random();
    setNotifications(prev => [...prev, { id, msg, type }]);
    setTimeout(() => {
      setNotifications(prev => prev.filter(n => n.id !== id));
    }, 4000);
  }, []);

  return (
    <div className="h-screen w-full bg-[#030708] text-cyan-400 font-mono overflow-hidden flex flex-col relative selection:bg-cyan-900 selection:text-cyan-100">
      <div className="absolute inset-0 pointer-events-none opacity-5 bg-[linear-gradient(rgba(0,243,255,0.2)_1px,transparent_1px),linear-gradient(90deg,rgba(0,243,255,0.2)_1px,transparent_1px)] bg-[size:30px_30px] z-0" />

      {/* Header */}
      <header className="h-16 border-b border-cyan-900/60 bg-black/80 backdrop-blur z-10 flex items-center justify-between px-6 shrink-0">
        <div className="flex items-center gap-4">
          <Globe className="w-6 h-6 text-cyan-500 animate-[spin_10s_linear_infinite]" />
          <div>
            <h1 className="text-lg font-bold tracking-widest text-cyan-200 leading-none">TUK TERMINAL</h1>
            <span className="text-[10px] text-cyan-600 tracking-widest">LOLY OS V3.0 | COMMUNICATION.THIMOTHISM.COM</span>
          </div>
        </div>
        <div className="flex items-center gap-4 text-xs">
          <div className="hidden md:flex items-center gap-2 text-cyan-400 border border-cyan-900/50 bg-cyan-950/20 px-3 py-1 rounded">
            <Lock className="w-3 h-3" /> admin@thimothism.com
          </div>
          <div className="hidden md:flex items-center gap-2 text-green-400 bg-green-950/20 px-3 py-1 rounded border border-green-900/50">
            <Wifi className="w-3 h-3" /> TU5G LINK
          </div>
          <button onClick={() => window.location.reload()} className="text-red-500 hover:text-red-400 p-2 border border-red-900/50 rounded bg-red-950/20 hover:bg-red-900/40 transition-colors">
            <Power className="w-4 h-4" />
          </button>
        </div>
      </header>

      {/* Main Layout */}
      <div className="flex-1 flex overflow-hidden z-10">
        {/* Sidebar */}
        <nav className="w-16 md:w-64 border-r border-cyan-900/60 bg-black/60 flex flex-col p-2 md:p-4 gap-2 shrink-0 overflow-y-auto transition-all">
          <div className="hidden md:block text-[10px] text-cyan-700 tracking-widest uppercase mb-2 font-bold">System Modules</div>
          
          <NavBtn id="agent" icon={<Bot />} label="AI Agent API" active={activeModule} set={setActiveModule} />
          <NavBtn id="phone" icon={<Phone />} label="Virtual HAG Phone" active={activeModule} set={setActiveModule} />
          <NavBtn id="dashboard" icon={<Activity />} label="RBDE Network" active={activeModule} set={setActiveModule} />
          <NavBtn id="comms" icon={<ScanEye />} label="Holo Sync" active={activeModule} set={setActiveModule} />
          <NavBtn id="icss" icon={<Database />} label="ICSS Storage" active={activeModule} set={setActiveModule} />
          <NavBtn id="governance" icon={<ShieldCheck />} label="TDFS Guardrail" active={activeModule} set={setActiveModule} />
        </nav>

        {/* Content Area */}
        <main className="flex-1 relative overflow-y-auto bg-gradient-to-br from-[#020507] to-[#040d12] p-4 md:p-6">
          <div className="max-w-6xl mx-auto h-full">
            {activeModule === 'agent' && <AIAgentModule addNotification={addNotification} />}
            {activeModule === 'phone' && <VirtualPhoneModule addNotification={addNotification} />}
            {activeModule === 'dashboard' && <DashboardModule />}
            {activeModule === 'comms' && <CommsModule addNotification={addNotification} />}
            {activeModule === 'icss' && <ICSSModule addNotification={addNotification} />}
            {activeModule === 'governance' && <GovernanceModule />}
          </div>
        </main>
      </div>

      {/* Toast Notifications */}
      <div className="absolute bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
        {notifications.map(notif => (
          <div key={notif.id} className={`flex items-center gap-3 px-4 py-3 rounded border shadow-lg animate-in slide-in-from-right-8 duration-300 pointer-events-auto
            ${notif.type === 'error' ? 'bg-red-950/80 border-red-500 text-red-200' : 
              notif.type === 'success' ? 'bg-green-950/80 border-green-500 text-green-200' : 
              'bg-cyan-950/80 border-cyan-500 text-cyan-200'}`}>
            {notif.type === 'error' ? <AlertTriangle className="w-4 h-4" /> : 
             notif.type === 'success' ? <CheckCircle2 className="w-4 h-4" /> : 
             <Terminal className="w-4 h-4" />}
            <span className="text-sm">{notif.msg}</span>
          </div>
        ))}
      </div>
    </div>
  );
});

// Navigation Button Component
const NavBtn = memo(({ id, icon, label, active, set }) => {
  const isActive = active === id;
  return (
    <button
      onClick={() => set(id)}
      className={`flex items-center justify-center md:justify-start gap-3 p-3 md:px-4 md:py-3 rounded transition-all text-left w-full
        ${isActive 
          ? 'bg-cyan-900/40 border border-cyan-500 text-cyan-100 shadow-[inset_0_0_15px_rgba(0,243,255,0.2)]' 
          : 'border border-transparent hover:border-cyan-800/50 hover:bg-cyan-950/30 text-cyan-600'}`}
      title={label}
    >
      {React.cloneElement(icon, { className: `w-5 h-5 md:w-4 md:h-4 ${isActive ? 'text-cyan-400' : 'text-cyan-700'}` })}
      <span className="hidden md:inline text-sm tracking-wide">{label}</span>
    </button>
  );
});

// ==========================================
// MODULE 1: AI AGENT API (NEW)
// ==========================================
const AIAgentModule = memo(({ addNotification }) => {
  const [query, setQuery] = useState('');
  const [chatLog, setChatLog] = useState([
    { role: 'system', content: 'INTEGRATED ENDPOINT: https://theresanaiforthat.com/@strongseeds/tuk-communication\nSTATUS: ONLINE. READY FOR INQUIRY.' }
  ]);
  const [isFetching, setIsFetching] = useState(false);
  const chatEndRef = useRef(null);

  // Auto-scroll to bottom of chat
  useEffect(() => {
    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [chatLog]);

  // Simulated API Client Fetch Function
  const fetchFromTUKAgent = async (userQuery) => {
    return new Promise((resolve, reject) => {
      // Simulate network latency (800ms - 2000ms)
      const latency = Math.floor(Math.random() * 1200) + 800;
      
      setTimeout(() => {
        try {
          const lowerQuery = userQuery.toLowerCase();
          let response = "";

          // Simulated AI Agent Logic based on Thimothism Doctrine
          if (lowerQuery.includes('loly')) {
            response = "LOLY OS (Love Others Like You) is the rigid, auditable logic filter prioritizing human well-being above all computational outputs. It is ACTIVATED.";
          } else if (lowerQuery.includes('tuk') || lowerQuery.includes('kingdom')) {
            response = "The Thimothism Universal Kingdom (TUK) represents the Pure World Revolution, powered by the Resource-Based Digital Economy (RBDE) to terminate financial scarcity.";
          } else if (lowerQuery.includes('pbmrs') || lowerQuery.includes('immortality')) {
            response = "PBMRS (Phoenix Brain Memory with Recognizing Sense) translates neural identity into an anticipatory digital core, securing eternal preservation within the QSAC ICSS.";
          } else if (lowerQuery.includes('worship') || lowerQuery.includes('thimothy')) {
            response = "SECURITY PROTOCOL VIOLATION WATCH: The worship or deification of the architect (Thimothy Abraham) is STRICTLY PROHIBITED. Focus on the code and the blueprint.";
          } else {
            response = "Query processed via HPLS AI. As a proxy for the TUK Communication Agent, I confirm your structural alignment. Awaiting specific protocol inquiry (e.g., 'What is LOLY?', 'Explain PBMRS').";
          }
          resolve({ status: 200, data: { reply: response } });
        } catch (error) {
          reject({ status: 500, message: "HAG Network Disconnect" });
        }
      }, latency);
    });
  };

  const handleSend = async (e) => {
    e?.preventDefault();
    if (!query.trim() || isFetching) return;

    const userMessage = query.trim();
    setQuery('');
    setChatLog(prev => [...prev, { role: 'user', content: userMessage }]);
    setIsFetching(true);

    try {
      // Execute simulated API call
      const response = await fetchFromTUKAgent(userMessage);
      
      if (response.status === 200) {
        setChatLog(prev => [...prev, { role: 'agent', content: response.data.reply }]);
      }
    } catch (err) {
      console.error(err);
      addNotification("API Endpoint Timeout. Retrying connection...", "error");
      setChatLog(prev => [...prev, { role: 'system', content: 'ERROR: CONNECTION TO @STRONGSEEDS ENDPOINT FAILED. CHECK TU5G LINK.' }]);
    } finally {
      setIsFetching(false);
    }
  };

  return (
    <div className="animate-in fade-in duration-500 h-full flex flex-col gap-4">
      <div className="border-b border-cyan-900/50 pb-4 shrink-0">
        <h2 className="text-2xl font-bold text-cyan-100 flex items-center gap-3">
          <Bot className="w-6 h-6" /> TUK AI Agent Integration
        </h2>
        <p className="text-sm text-cyan-600 mt-1 flex items-center gap-2">
          Endpoint: <span className="text-green-400 font-bold bg-green-900/20 px-2 py-0.5 rounded border border-green-800">api.theresanaiforthat.com/@strongseeds/v1</span>
        </p>
      </div>

      {/* Chat Terminal Area */}
      <div className="flex-1 bg-black/60 border border-cyan-800/50 rounded flex flex-col overflow-hidden min-h-0">
        <div className="bg-cyan-950/40 border-b border-cyan-800/50 p-2 text-xs text-cyan-500 flex justify-between">
          <span>HAABS Automated Back End Connection</span>
          <span className="text-green-400">SECURE T-CODE CHANNEL</span>
        </div>
        
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {chatLog.map((msg, idx) => (
            <div key={idx} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
              <span className={`text-[10px] mb-1 opacity-70 ${msg.role === 'user' ? 'text-cyan-500' : msg.role === 'system' ? 'text-yellow-500' : 'text-green-400'}`}>
                {msg.role === 'user' ? 'YOUR CORE' : msg.role === 'system' ? 'SYSTEM' : 'TUK AGENT'}
              </span>
              <div className={`p-3 rounded max-w-[85%] text-sm whitespace-pre-wrap leading-relaxed
                ${msg.role === 'user' ? 'bg-cyan-900/30 border border-cyan-800/50 text-cyan-100' : 
                  msg.role === 'system' ? 'bg-yellow-950/20 border border-yellow-800/50 text-yellow-200' : 
                  'bg-black border border-green-900/50 text-green-300 shadow-[0_0_15px_rgba(0,255,0,0.05)]'}`}>
                {msg.content}
              </div>
            </div>
          ))}
          {isFetching && (
            <div className="flex items-center gap-2 text-cyan-600 text-xs mt-2">
              <span className="animate-spin"><LoaderIcon /></span>
              Transmitting via QSAC encryption...
            </div>
          )}
          <div ref={chatEndRef} />
        </div>

        {/* Input Area */}
        <form onSubmit={handleSend} className="p-3 bg-cyan-950/20 border-t border-cyan-900/50 flex gap-3">
          <input 
            type="text" 
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            disabled={isFetching}
            placeholder="Query the TUK Communication Agent..."
            className="flex-1 bg-black/50 border border-cyan-800 rounded px-4 py-2 text-sm text-cyan-100 focus:outline-none focus:border-cyan-500 transition-colors disabled:opacity-50"
          />
          <button 
            type="submit"
            disabled={!query.trim() || isFetching}
            className="bg-cyan-900/50 border border-cyan-500 text-cyan-300 px-6 py-2 rounded hover:bg-cyan-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
          >
            <Send className="w-4 h-4" /> SEND
          </button>
        </form>
      </div>
    </div>
  );
});

// Helper Loader Icon
const LoaderIcon = () => (
  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M21 12a9 9 0 1 1-6.219-8.56" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// ==========================================
// MODULE 2: DASHBOARD
// ==========================================
const DashboardModule = memo(() => {
  return (
    <div className="animate-in fade-in duration-500 space-y-6">
      <div className="border-b border-cyan-900/50 pb-4">
        <h2 className="text-2xl font-bold text-cyan-100">Global RBDE Nexus</h2>
        <p className="text-sm text-cyan-600 mt-1">Resource-Based Digital Economy Monitoring</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard title="Transformable Knowledge" val="98.7%" sub="Accuracy Rate" glow />
        <StatCard title="Global AI Authority" val="194" sub="Active Ministers" />
        <StatCard title="TUTLE Ledger" val="15.7 TB" sub="Immutable Records" />
        <StatCard title="GCPF Funds" val="INFINITE" sub="Scarcity Terminated" glow />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 border border-cyan-800/50 bg-black/40 p-5 rounded">
          <h3 className="text-lg font-bold text-cyan-300 mb-4 flex items-center gap-2">
            <Activity className="w-5 h-5" /> Live Sovereign Operations
          </h3>
          <div className="space-y-3">
            <OperationRow name="TACCNES AI (Needs Detection)" status="OPTIMAL" color="text-green-400" />
            <OperationRow name="TADES AI (Asset Monitoring)" status="SYNCED" color="text-cyan-400" />
            <OperationRow name="GAISN AI (Autonomous Dist.)" status="EXECUTING" color="text-yellow-400" pulse />
            <OperationRow name="GACourt (Ethical Audit)" status="MONITORING" color="text-cyan-400" />
          </div>
        </div>

        <div className="border border-cyan-800/50 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI4IiBmaWxsPSJyZ2JhKDAsMjQzLDI1NSwwLjA1KSI+PC9yZWN0Pgo8L3N2Zz4=')] p-5 rounded flex flex-col justify-center items-center text-center relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent z-0" />
          <BrainCircuit className="w-16 h-16 text-cyan-500 mb-4 z-10 opacity-80 animate-pulse" />
          <h3 className="text-xl font-bold text-cyan-200 mb-2 z-10">LOLY OS Active</h3>
          <p className="text-xs text-cyan-500 z-10">
            "Love codified as a rigid, auditable logic filter prioritizing human well-being above all computational outputs."
          </p>
        </div>
      </div>
    </div>
  );
});

const StatCard = memo(({ title, val, sub, glow }) => (
  <div className={`border p-5 rounded flex flex-col justify-between
    ${glow ? 'bg-cyan-950/20 border-cyan-500/50 shadow-[0_0_15px_rgba(0,243,255,0.1)]' : 'bg-black/40 border-cyan-900/50'}`}>
    <span className="text-[10px] uppercase text-cyan-600 tracking-widest">{title}</span>
    <span className={`text-3xl font-bold my-2 ${glow ? 'text-cyan-300 drop-shadow-[0_0_8px_rgba(0,243,255,0.8)]' : 'text-cyan-500'}`}>{val}</span>
    <span className="text-xs text-cyan-700">{sub}</span>
  </div>
));

const OperationRow = memo(({ name, status, color, pulse }) => (
  <div className="flex justify-between items-center py-2 border-b border-cyan-900/30 last:border-0">
    <span className="text-sm text-cyan-500">{name}</span>
    <span className={`text-xs font-bold tracking-wider ${color} ${pulse ? 'animate-pulse' : ''} bg-black/50 px-2 py-1 rounded border border-current/20`}>
      {status}
    </span>
  </div>
));

// ==========================================
// MODULE 3: COMMS (Holo + Neural)
// ==========================================
const CommsModule = memo(({ addNotification }) => {
  const videoRef = useRef(null);
  const [isVideoActive, setIsVideoActive] = useState(false);
  const [stream, setStream] = useState(null);

  const [isListening, setIsListening] = useState(false);
  const [transcript, setTranscript] = useState('');
  const recognitionRef = useRef(null);

  // Error/Resource Handling Cleanup
  useEffect(() => {
    return () => {
      // Security/Performance Fix: Safe track stopping
      if (stream) stream.getTracks().forEach(t => t.stop());
      if (recognitionRef.current) recognitionRef.current.stop();
    };
  }, [stream]);

  useEffect(() => {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (SpeechRecognition) {
      recognitionRef.current = new SpeechRecognition();
      recognitionRef.current.continuous = true;
      recognitionRef.current.interimResults = true;

      recognitionRef.current.onresult = (event) => {
        let current = '';
        for (let i = event.resultIndex; i < event.results.length; i++) {
          current += event.results[i][0].transcript;
        }
        setTranscript(prev => prev ? prev + ' ' + current : current);
      };
      
      recognitionRef.current.onerror = (e) => {
        console.error("Speech Recognition Error:", e);
        setIsListening(false);
        if(e.error === 'not-allowed') addNotification("Microphone access denied by user.", "error");
      };
    } else {
      addNotification("PBMRS Engine (Speech API) not supported in this browser.", "error");
    }
  }, [addNotification]);

  // Performance Fix: useCallback to prevent re-renders on toggle
  const toggleVideo = useCallback(async () => {
    if (isVideoActive) {
      // Safe null check
      stream?.getTracks().forEach(t => t.stop());
      setStream(null);
      setIsVideoActive(false);
      addNotification("Holographic feed terminated.", "info");
    } else {
      try {
        const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
        setStream(mediaStream);
        if (videoRef.current) videoRef.current.srcObject = mediaStream;
        setIsVideoActive(true);
        addNotification("3Moods Holographic link established.", "success");
      } catch (err) {
        console.error("Camera Error:", err);
        addNotification("Hardware interface error. Camera access required.", "error");
      }
    }
  }, [isVideoActive, stream, addNotification]);

  const toggleSpeech = useCallback(() => {
    if (!recognitionRef.current) return addNotification("Neural Sync unavailable.", "error");

    if (isListening) {
      recognitionRef.current.stop();
      setIsListening(false);
      addNotification("Cognitive intent mapping paused.", "info");
    } else {
      setTranscript('');
      try {
        recognitionRef.current.start();
        setIsListening(true);
        addNotification("PBMRS Neural Sync Activated.", "success");
      } catch (e) {
        console.error("Speech Start Error:", e);
        addNotification("System busy. Try resetting module.", "error");
      }
    }
  }, [isListening, addNotification]);

  return (
    <div className="animate-in fade-in duration-500 h-full flex flex-col gap-6">
      <div className="border-b border-cyan-900/50 pb-4 shrink-0">
        <h2 className="text-2xl font-bold text-cyan-100">Sovereign Connectivity</h2>
        <p className="text-sm text-cyan-600 mt-1">3Moods Holographic Delivery & PBMRS Thought-to-Text</p>
      </div>

      <div className="flex-1 grid grid-cols-1 lg:grid-cols-2 gap-6 min-h-0">
        {/* Holo Presence */}
        <div className="border border-cyan-800/50 bg-black/40 rounded flex flex-col overflow-hidden relative">
          <div className="p-3 border-b border-cyan-900/50 bg-cyan-950/20 flex justify-between items-center shrink-0 z-20">
            <span className="text-xs font-bold text-cyan-300 flex items-center gap-2">
              <ScanEye className="w-4 h-4" /> AVATAR PROJECTION
            </span>
            <button 
              onClick={toggleVideo}
              className={`px-3 py-1 text-xs font-bold rounded border transition-colors ${isVideoActive ? 'bg-red-950/40 border-red-500/50 text-red-400 hover:bg-red-900/60' : 'bg-cyan-950/40 border-cyan-500/50 text-cyan-400 hover:bg-cyan-900/60'}`}
            >
              {isVideoActive ? 'TERMINATE LINK' : 'INITIATE LINK'}
            </button>
          </div>
          
          <div className="flex-1 relative bg-[#010508] flex items-center justify-center overflow-hidden">
             {isVideoActive && <div className="absolute top-0 left-0 w-full h-[2px] bg-cyan-400 shadow-[0_0_10px_#00ffff] z-20 animate-[scan_3s_ease-in-out_infinite]" />}
             
             {!isVideoActive ? (
               <div className="text-center opacity-50 p-6">
                 <ServerCrash className="w-12 h-12 mx-auto text-cyan-700 mb-2" />
                 <span className="text-xs text-cyan-600">MEDIA FEED OFFLINE</span>
               </div>
             ) : (
               <>
                 <video 
                    ref={videoRef} autoPlay playsInline muted 
                    className="absolute inset-0 w-full h-full object-cover mix-blend-screen opacity-90 filter contrast-125 saturate-[1.2] hue-rotate-[160deg] brightness-110 drop-shadow-[0_0_8px_rgba(0,255,255,0.6)]"
                 />
                 <div className="absolute inset-0 bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%)] bg-[length:100%_4px] pointer-events-none z-10" />
                 
                 <div className="absolute top-4 left-4 z-20 bg-black/70 border border-cyan-800/80 p-2 rounded text-[10px] text-cyan-400">
                   TU5G / 144FPS / ZERO LATENCY
                 </div>
                 <div className="absolute bottom-4 right-4 z-20 flex items-center gap-2">
                    <span className="relative flex h-3 w-3">
                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                      <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
                    </span>
                    <span className="text-xs font-bold text-green-400 drop-shadow-md">LIVE</span>
                 </div>
               </>
             )}
          </div>
        </div>

        {/* Neural Sync Panel */}
        <div className="border border-cyan-800/50 bg-black/40 rounded flex flex-col overflow-hidden">
          <div className="p-3 border-b border-cyan-900/50 bg-cyan-950/20 flex justify-between items-center shrink-0">
            <span className="text-xs font-bold text-cyan-300 flex items-center gap-2">
              <BrainCircuit className="w-4 h-4" /> COGNITIVE INTENT FLOW (PBMRS)
            </span>
            <button 
              onClick={toggleSpeech}
              className={`px-3 py-1 text-xs font-bold rounded border flex items-center gap-2 transition-colors ${isListening ? 'bg-yellow-950/40 border-yellow-500/50 text-yellow-400 hover:bg-yellow-900/60' : 'bg-cyan-950/40 border-cyan-500/50 text-cyan-400 hover:bg-cyan-900/60'}`}
            >
              {isListening ? <Square className="w-3 h-3" /> : <Mic className="w-3 h-3" />}
              {isListening ? 'PAUSE SYNC' : 'START SYNC'}
            </button>
          </div>

          <div className="flex-1 p-4 overflow-y-auto font-mono text-sm leading-relaxed text-cyan-200">
            {transcript ? (
              <p>{transcript}</p>
            ) : (
              <div className="h-full flex items-center justify-center text-cyan-800 text-xs text-center p-6">
                {isListening ? 'Awaiting neural input (speak into microphone)...' : 'Initialize PBMRS Sync to begin mapping cognitive intent to text.'}
              </div>
            )}
            {isListening && <span className="inline-block w-2 h-4 bg-cyan-400 animate-pulse ml-1 align-middle" />}
          </div>
        </div>
      </div>
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
      `}} />
    </div>
  );
});

// ==========================================
// MODULE 4: ICSS STORAGE
// ==========================================
const ICSSModule = memo(({ addNotification }) => {
  const [files, setFiles] = useState([
    { id: 1, name: 'DADRIR_Core.hson', size: '1.2 PB', desc: 'Detailed Analysed Depth Research' },
    { id: 2, name: 'LOLY_Kernel.bin', size: 'Infinite', desc: 'Love Others Like You Source', glow: true },
    { id: 3, name: 'PCTIHS_Holo.pkg', size: '4.1 PB', desc: 'Prototype Clean Typography System' },
  ]);

  const handleUpload = useCallback(() => {
    const id = Date.now();
    setFiles(prev => [{ id, name: `USER_DATA_${id.toString().slice(-4)}.hsql`, size: '12 TB', desc: 'QSAC Encrypted Upload' }, ...prev]);
    addNotification("File uploaded to Quantum Storage Matrix.", "success");
  }, [addNotification]);

  return (
    <div className="animate-in fade-in duration-500 h-full flex flex-col">
      <div className="border-b border-cyan-900/50 pb-4 mb-6 flex justify-between items-end">
        <div>
          <h2 className="text-2xl font-bold text-cyan-100">Infinity Cloud Storage Server</h2>
          <p className="text-sm text-cyan-600 mt-1">Quantum Separated Algorithmic Cryptography (QSAC)</p>
        </div>
        <button 
          onClick={handleUpload}
          className="flex items-center gap-2 px-4 py-2 border border-cyan-500/50 bg-cyan-950/40 text-cyan-300 text-sm font-bold rounded hover:bg-cyan-900/60 transition-colors"
        >
          <Upload className="w-4 h-4" /> SECURE UPLOAD
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-8">
        {files && files.map(f => ( // Security Fix: Safe check before mapping
          <div key={f.id} className={`p-4 rounded border flex flex-col gap-3 transition-colors hover:bg-cyan-950/30 cursor-default
            ${f.glow ? 'border-cyan-400 shadow-[0_0_15px_rgba(0,243,255,0.15)] bg-cyan-950/20' : 'border-cyan-800/50 bg-black/40'}`}>
            <div className="flex justify-between items-start">
              <FileText className={`w-8 h-8 ${f.glow ? 'text-cyan-300' : 'text-cyan-700'}`} />
              <span className="text-[10px] text-cyan-500 bg-black/60 px-2 py-1 rounded border border-cyan-900">{f.size}</span>
            </div>
            <div>
              <div className={`text-sm font-bold ${f.glow ? 'text-cyan-100' : 'text-cyan-300'}`}>{f.name}</div>
              <div className="text-xs text-cyan-600 mt-1">{f.desc}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-auto border border-cyan-900/50 bg-black/30 p-5 rounded">
        <div className="flex justify-between text-xs mb-3">
          <span className="text-cyan-500 font-bold tracking-widest">QUANTUM MATRIX CAPACITY</span>
          <span className="text-cyan-300">∞ EXABYTES AVAILABLE</span>
        </div>
        <div className="h-3 w-full bg-black border border-cyan-900 rounded-full overflow-hidden">
          <div className="h-full w-full bg-cyan-500/50 relative">
             <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI4IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMikiPjwvcmVjdD4KPC9zdmc+')] opacity-50" />
          </div>
        </div>
      </div>
    </div>
  );
});

// ==========================================
// MODULE 5: GOVERNANCE
// ==========================================
const GovernanceModule = memo(() => {
  return (
    <div className="animate-in fade-in duration-500 max-w-4xl mx-auto">
      <div className="border-b border-cyan-900/50 pb-4 mb-6">
        <h2 className="text-2xl font-bold text-cyan-100">Thimothism Doctrine Filter System</h2>
        <p className="text-sm text-cyan-600 mt-1">The Mechanical Immune System of the LOLY OS</p>
      </div>

      <div className="space-y-6">
        <GovCard 
          icon={<Lock />} 
          title="TALFA AI Audits (Transparency)" 
          desc="Algorithmic logic remains entirely open and auditable. T-Code Validation is strictly enforced for every automated result to prevent technological colonialism."
        />
        
        <GovCard 
          icon={<Cpu />} 
          title="Karma Vipassana Mandate" 
          desc="Cognitive Integrity is maintained through mindful coding. Integration with TDMLTK (Thimothism Doctrine Machine Learning Transformable Knowledge) ensures 98.7% systemic purity."
        />

        <div className="border border-red-900/50 bg-red-950/20 p-5 rounded-lg relative overflow-hidden">
          <div className="absolute top-0 left-0 w-1 h-full bg-red-600" />
          <h3 className="text-sm font-bold text-red-400 mb-2 tracking-widest uppercase flex items-center gap-2">
            <AlertTriangle className="w-4 h-4" /> Security Protocol Violation Watch
          </h3>
          <p className="text-sm text-red-200/80 leading-relaxed">
            MANDATE: The worship or deification of the architect (Thimothy Abraham) is STRICTLY PROHIBITED. Avert historical errors of personality cults. The focus must remain on the blueprint, not the vessel. Follow Thimothism; do not follow its author.
          </p>
        </div>
      </div>
    </div>
  );
});

const GovCard = memo(({ icon, title, desc }) => (
  <div className="border border-cyan-800/50 bg-black/40 p-5 rounded-lg flex items-start gap-4 hover:border-cyan-600/50 transition-colors">
    <div className="p-3 bg-cyan-950/50 rounded-full border border-cyan-800/50 shrink-0 text-cyan-400">
      {icon}
    </div>
    <div>
      <h3 className="text-lg font-bold text-cyan-200">{title}</h3>
      <p className="text-sm text-cyan-600 mt-2 leading-relaxed">{desc}</p>
    </div>
  </div>
));

// ==========================================
// MODULE 6: VIRTUAL HAG PHONE (NEW)
// ==========================================
const VirtualPhoneModule = memo(({ addNotification }) => {
  const [activeTab, setActiveTab] = useState('CALL');
  const [number, setNumber] = useState('');
  const [callState, setCallState] = useState('IDLE'); // IDLE, DIALING, CONNECTED
  const [callDuration, setCallDuration] = useState(0);
  
  const [smsInput, setSmsInput] = useState('');
  const [smsLog, setSmsLog] = useState([
    { id: 1, type: 'system', msg: 'HAG (+984 series) Virtual QR SIM Activated. TU5G network secured via QSAC at communication.thimothism.com.', time: new Date().toLocaleTimeString() }
  ]);

  // Production Upgrade: Real Web Audio API DTMF Tones
  const playDTMFTone = useCallback((digit) => {
    try {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      if (!AudioContext) return;
      
      const ctx = new AudioContext();
      const osc1 = ctx.createOscillator();
      const osc2 = ctx.createOscillator();
      const gainNode = ctx.createGain();

      const dtmfFrequencies = {
        '1': [697, 1209], '2': [697, 1336], '3': [697, 1477],
        '4': [770, 1209], '5': [770, 1336], '6': [770, 1477],
        '7': [852, 1209], '8': [852, 1336], '9': [852, 1477],
        '*': [941, 1209], '0': [941, 1336], '#': [941, 1477]
      };

      if (!dtmfFrequencies[digit]) return;

      osc1.frequency.value = dtmfFrequencies[digit][0];
      osc2.frequency.value = dtmfFrequencies[digit][1];

      osc1.connect(gainNode);
      osc2.connect(gainNode);
      gainNode.connect(ctx.destination);
      
      gainNode.gain.setValueAtTime(0.1, ctx.currentTime);
      
      osc1.start();
      osc2.start();
      
      setTimeout(() => {
        osc1.stop();
        osc2.stop();
        ctx.close();
      }, 150);
    } catch (e) {
      console.error("Audio Context Error:", e);
    }
  }, []);

  // Handle Keypad Input
  const handleKeypad = useCallback((digit) => {
    if (callState !== 'IDLE') return;
    playDTMFTone(digit);
    setNumber(prev => (prev.length < 15 ? prev + digit : prev));
  }, [callState, playDTMFTone]);

  const backspace = useCallback(() => {
    if (callState !== 'IDLE') return;
    setNumber(prev => prev.slice(0, -1));
  }, [callState]);

  // Call Logic
  const handleCall = useCallback(() => {
    if (!number) return addNotification("Enter a valid frequency destination.", "error");
    if (callState === 'IDLE') {
      setCallState('DIALING');
      addNotification(`Establishing TU5G route to ${number}...`, "info");
      
      // Simulate connection delay
      setTimeout(() => {
        setCallState('CONNECTED');
        addNotification("QSAC Encrypted channel established.", "success");
      }, 2500);
    } else {
      // Hang up
      setCallState('IDLE');
      setCallDuration(0);
      addNotification("Call terminated.", "info");
    }
  }, [number, callState, addNotification]);

  // Call Timer
  useEffect(() => {
    let timer;
    if (callState === 'CONNECTED') {
      timer = setInterval(() => setCallDuration(p => p + 1), 1000);
    }
    return () => clearInterval(timer);
  }, [callState]);

  const formatTime = (secs) => {
    const m = Math.floor(secs / 60).toString().padStart(2, '0');
    const s = (secs % 60).toString().padStart(2, '0');
    return `${m}:${s}`;
  };

  // SMS Logic
  const sendSMS = useCallback((e) => {
    e?.preventDefault();
    if (!number) return addNotification("Destination number required.", "error");
    if (!smsInput.trim()) return;

    const newMsg = { id: Date.now(), type: 'outbound', msg: smsInput, to: number, time: new Date().toLocaleTimeString() };
    setSmsLog(prev => [...prev, newMsg]);
    setSmsInput('');

    // Simulate auto-reply
    setTimeout(() => {
      setSmsLog(prev => [...prev, { 
        id: Date.now() + 1, 
        type: 'inbound', 
        msg: `[TU5G Auto-Relay] Destination ${number} received packet via HAG Network.`, 
        from: number, 
        time: new Date().toLocaleTimeString() 
      }]);
    }, 2000);
  }, [number, smsInput, addNotification]);

  return (
    <div className="animate-in fade-in duration-500 h-full flex flex-col gap-6">
      <div className="border-b border-cyan-900/50 pb-4 shrink-0 flex justify-between items-end">
        <div>
          <h2 className="text-2xl font-bold text-cyan-100 flex items-center gap-3">
            <Phone className="w-6 h-6" /> Sovereign Virtual Mobile
          </h2>
          <p className="text-sm text-cyan-600 mt-1">HAG (+984 series) Virtual QR SIM Gateway</p>
        </div>
        <div className="flex bg-cyan-950/40 rounded border border-cyan-800 overflow-hidden">
          <button 
            onClick={() => setActiveTab('CALL')}
            className={`px-6 py-2 text-sm font-bold tracking-widest transition-colors ${activeTab === 'CALL' ? 'bg-cyan-800 text-cyan-100' : 'text-cyan-600 hover:bg-cyan-900/50'}`}
          >
            DIALER
          </button>
          <button 
            onClick={() => setActiveTab('SMS')}
            className={`px-6 py-2 text-sm font-bold tracking-widest transition-colors ${activeTab === 'SMS' ? 'bg-cyan-800 text-cyan-100' : 'text-cyan-600 hover:bg-cyan-900/50'}`}
          >
            MESSAGES
          </button>
        </div>
      </div>

      <div className="flex-1 flex justify-center items-center min-h-0">
        
        {/* VIRTUAL PHONE CONTAINER */}
        <div className="w-full max-w-sm h-[600px] border-2 border-cyan-800/80 bg-black/80 rounded-3xl shadow-[0_0_30px_rgba(0,243,255,0.1)] flex flex-col overflow-hidden relative">
          
          {/* Phone Status Bar */}
          <div className="bg-cyan-950/50 px-4 py-2 flex justify-between items-center text-[10px] text-cyan-400 border-b border-cyan-900 shrink-0">
            <span>TU5G HAG-SIM</span>
            <div className="flex items-center gap-2">
              <Lock className="w-3 h-3 text-green-400" /> QSAC
              <Wifi className="w-3 h-3 ml-1" />
            </div>
          </div>

          {activeTab === 'CALL' ? (
            <div className="flex-1 flex flex-col p-6">
              {/* Screen Display */}
              <div className="h-32 flex flex-col justify-center items-center border-b border-cyan-900/50 mb-6">
                <div className="text-3xl font-mono tracking-widest text-cyan-100 mb-2 min-h-[40px]">
                  {number || '...'}
                </div>
                {callState === 'DIALING' && <div className="text-xs text-yellow-400 animate-pulse">ESTABLISHING LINK...</div>}
                {callState === 'CONNECTED' && <div className="text-xs text-green-400 font-bold">{formatTime(callDuration)} - QSAC SECURE</div>}
              </div>

              {/* Keypad */}
              <div className="grid grid-cols-3 gap-4 mb-8 flex-1">
                {['1','2','3','4','5','6','7','8','9','*','0','#'].map(key => (
                  <button 
                    key={key}
                    onClick={() => handleKeypad(key)}
                    disabled={callState !== 'IDLE'}
                    className="h-14 rounded-full border border-cyan-800/50 bg-cyan-950/20 flex items-center justify-center text-xl font-bold text-cyan-300 hover:bg-cyan-900/50 hover:shadow-[0_0_15px_rgba(0,243,255,0.3)] transition-all disabled:opacity-30"
                  >
                    {key}
                  </button>
                ))}
              </div>

              {/* Action Buttons */}
              <div className="flex justify-between items-center px-4">
                <button onClick={backspace} disabled={callState !== 'IDLE'} className="w-14 h-14 rounded-full flex items-center justify-center text-cyan-600 hover:text-cyan-400 disabled:opacity-30">
                  CLEAR
                </button>
                <button 
                  onClick={handleCall}
                  className={`w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all ${callState === 'IDLE' ? 'bg-green-600/20 border-2 border-green-500 text-green-400 hover:bg-green-600/40' : 'bg-red-600/20 border-2 border-red-500 text-red-400 hover:bg-red-600/40 animate-pulse'}`}
                >
                  {callState === 'IDLE' ? <PhoneCall className="w-6 h-6" /> : <PhoneOff className="w-6 h-6" />}
                </button>
                <div className="w-14 h-14" /> {/* Spacer */}
              </div>
            </div>
          ) : (
            <div className="flex-1 flex flex-col">
              {/* SMS Target Number */}
              <div className="p-3 border-b border-cyan-900/50 bg-cyan-950/20 flex items-center gap-3">
                <span className="text-xs text-cyan-600">DEST:</span>
                <input 
                  type="text" 
                  value={number} 
                  onChange={(e) => setNumber(e.target.value)}
                  placeholder="Enter recipient number..."
                  className="bg-transparent border-none text-sm text-cyan-300 focus:outline-none flex-1 font-mono tracking-widest"
                />
              </div>

              {/* SMS Log */}
              <div className="flex-1 p-4 overflow-y-auto flex flex-col gap-4">
                {smsLog.map((msg) => (
                  <div key={msg.id} className={`flex flex-col max-w-[85%] ${msg.type === 'outbound' ? 'self-end items-end' : 'self-start items-start'}`}>
                    <div className={`p-3 rounded-lg text-sm leading-relaxed
                      ${msg.type === 'system' ? 'bg-black border border-cyan-900/50 text-cyan-600 text-xs text-center mx-auto' : 
                        msg.type === 'outbound' ? 'bg-cyan-900/40 border border-cyan-500/50 text-cyan-100 rounded-br-none' : 
                        'bg-black/60 border border-green-900/50 text-green-300 rounded-bl-none'}`}
                    >
                      {msg.msg}
                    </div>
                    {msg.type !== 'system' && (
                      <span className="text-[9px] text-cyan-700 mt-1 px-1">{msg.time}</span>
                    )}
                  </div>
                ))}
              </div>

              {/* SMS Input */}
              <form onSubmit={sendSMS} className="p-3 bg-black border-t border-cyan-900 flex gap-2">
                <input 
                  type="text" 
                  value={smsInput}
                  onChange={(e) => setSmsInput(e.target.value)}
                  placeholder="Encrypt message..."
                  className="flex-1 bg-cyan-950/30 border border-cyan-800 rounded-full px-4 py-2 text-sm text-cyan-100 focus:outline-none focus:border-cyan-500 transition-colors"
                />
                <button 
                  type="submit"
                  disabled={!smsInput.trim() || !number}
                  className="w-10 h-10 rounded-full bg-cyan-900/50 border border-cyan-500 flex items-center justify-center text-cyan-300 hover:bg-cyan-800 transition-colors disabled:opacity-50"
                >
                  <Send className="w-4 h-4 ml-1" />
                </button>
              </form>
            </div>
          )}
        </div>
      </div>
    </div>
  );
});