import React, { useState, useEffect, useRef } from 'react';
import { InvestigationCase, TerminalLogEntry } from '../../types/forensics';
import { 
  Terminal as TerminalIcon, 
  Activity, 
  MonitorSmartphone, 
  ServerOff, 
  Send, 
  Trash2, 
  Cpu, 
  ShieldCheck,
  Zap
} from 'lucide-react';
import { requestAiAnalysis } from '../../services/forensicApi';

interface TerminalTabProps {
  currentCase: InvestigationCase;
  onUpdateStatus: (caseId: string, newStatus: any, note: string) => void;
}

export const TerminalTab: React.FC<TerminalTabProps> = ({
  currentCase,
  onUpdateStatus,
}) => {
  const [logs, setLogs] = useState<TerminalLogEntry[]>([
    {
      id: 'log-0',
      text: `[system] FROI.OS SENTINEL FORENSIC ENCLAVE INITIALIZED v4.2`,
      type: 'system',
      timestamp: '15:00:01',
    },
    {
      id: 'log-1',
      text: `[enclave] Loaded active docket: ${currentCase.id} (${currentCase.title})`,
      type: 'success',
      timestamp: '15:00:02',
    },
    {
      id: 'log-2',
      text: `[pcap] BGP Anycast Triangulator & JA4 DPI filter active on interface en0.`,
      type: 'system',
      timestamp: '15:00:03',
    },
    {
      id: 'log-3',
      text: `Type 'help' or 'commands' for available forensic interrogation tools.\n`,
      type: 'output',
      timestamp: '15:00:04',
    },
  ]);
  const [input, setInput] = useState('');
  const [status, setStatus] = useState({ text: 'ENCLAVE ACTIVE (LOOPBACK:3000)', color: 'text-cyan-400', icon: Activity });
  const [isExecuting, setIsExecuting] = useState(false);
  const outputRef = useRef<HTMLPreElement>(null);

  // Auto-scroll
  useEffect(() => {
    if (outputRef.current) {
      outputRef.current.scrollTop = outputRef.current.scrollHeight;
    }
  }, [logs]);

  const addLog = (text: string, type: TerminalLogEntry['type'] = 'output') => {
    const time = new Date().toTimeString().slice(0, 8);
    setLogs(prev => [...prev, { id: `log-${Date.now()}-${Math.random()}`, text, type, timestamp: time }]);
  };

  const handleExecuteCommand = async (cmdStr: string) => {
    const rawCmd = cmdStr.trim();
    if (!rawCmd) return;

    addLog(`$ ${rawCmd}`, 'command');
    setInput('');
    setIsExecuting(true);

    const parts = rawCmd.split(' ');
    const mainCmd = parts[0].toLowerCase();
    const arg = parts.slice(1).join(' ');

    if (mainCmd === 'help' || mainCmd === 'commands') {
      addLog(`
Available Forensic Commands:
============================
  triangulate [ip]      - Run Anycast BGP speed-of-light t >= 2d/(c*2/3) latency check
  ja4-inspect [hash]    - Inspect TLS ClientHello JA4 / JA3 fingerprint & engine
  webrtc-stun-probe     - Enumerate WebRTC ICE candidates for true physical NIC IP
  crypto-trace [wallet] - Disassemble multi-hop mixer, structuring, and cash-outs
  tco-dispatch          - Execute EU TCO Reg 2021/784 1-Hour mandatory takedown
  freeze-rails          - Freeze linked financial rails & merchant settlement queues
  sar-generate          - Output official FinCEN Part V Suspicious Activity Report
  ai-analyze [prompt]   - Interrogate the Gemini Deep Forensic Intelligence Analyst
  status                - View current docket security posture & trust score
  clear                 - Clear the terminal screen
`, 'output');
    } else if (mainCmd === 'clear') {
      setLogs([]);
    } else if (mainCmd === 'status') {
      addLog(`
[DOCKET STATUS]
ID: ${currentCase.id}
Target: ${currentCase.entityTarget.primaryAlias}
Threat Level: ${currentCase.threatLevel}
Composite Trust Score: ${currentCase.compositeTrustScore}/100
Claimed IP: ${currentCase.networkTelemetry.claimedGeo.ip} (${currentCase.networkTelemetry.claimedGeo.city})
Triangulated Location: ${currentCase.networkTelemetry.bgpAnycast.physicalOriginInference}
Intercepted Volume: $${currentCase.financialLedger.totalVolumeUsd.toLocaleString()} USD
Disposition: ${currentCase.status}
`, 'success');
    } else if (mainCmd === 'triangulate') {
      const targetIp = arg || currentCase.networkTelemetry.claimedGeo.ip;
      addLog(`[bgp-engine] Querying Anycast edge PoPs for IP: ${targetIp}...`, 'system');
      await new Promise(r => setTimeout(r, 600));

      const popLines = currentCase.networkTelemetry.bgpAnycast.popLatencies.map(
        p => `  - PoP ${p.pop} (${p.city}): RTT ${p.measuredRttMs.toFixed(1)}ms | MinPhysical: ${p.expectedPhysicalMinRttMs.toFixed(1)}ms | ${p.anomalous ? '[ANOMALY: PROXY DETECTED]' : '[OK]'}`
      ).join('\n');

      addLog(`
BGP Speed-of-Light Calculation: t >= 2d / (c * 2/3)
---------------------------------------------------
${popLines}

VERDICT: ${currentCase.networkTelemetry.bgpAnycast.speedOfLightViolation ? 'PROVEN PROXY OVERRIDE' : 'PLAUSIBLE PHYSICAL ORIGIN'}
Inferred True Origin: ${currentCase.networkTelemetry.bgpAnycast.physicalOriginInference}
Delta: ${currentCase.networkTelemetry.bgpAnycast.propagationDeltaMs}ms
`, currentCase.networkTelemetry.bgpAnycast.speedOfLightViolation ? 'error' : 'success');
    } else if (mainCmd === 'ja4-inspect') {
      addLog(`
TLS ClientHello Fingerprint Analysis:
-------------------------------------
JA4: ${currentCase.networkTelemetry.tlsFingerprint.ja4}
JA3: ${currentCase.networkTelemetry.tlsFingerprint.ja3}
Detected Client Engine: ${currentCase.networkTelemetry.tlsFingerprint.detectedClientEngine}
Anomaly Note: ${currentCase.networkTelemetry.tlsFingerprint.anomalyReason}
Ciphers Negotiated: ${currentCase.networkTelemetry.tlsFingerprint.cipherSuites.join(', ')}
`, 'output');
    } else if (mainCmd === 'webrtc-stun-probe') {
      addLog(`[stun-probe] Binding to ${currentCase.networkTelemetry.clientProbes.webrtcCandidateLeak.stunServerUsed}...`, 'system');
      await new Promise(r => setTimeout(r, 500));
      addLog(`
WebRTC ICE Candidate Resolution:
--------------------------------
Local RFC1918 Private IP: ${currentCase.networkTelemetry.clientProbes.webrtcCandidateLeak.localPrivateIp}
Unmasked True Public NIC: ${currentCase.networkTelemetry.clientProbes.webrtcCandidateLeak.unmaskedPublicIp}
Leak Status: ${currentCase.networkTelemetry.clientProbes.webrtcCandidateLeak.leakDetected ? 'DIRECT HARDWARE INTERFACE EXPOSED (VPN BYPASS)' : 'Clean'}
Details: ${currentCase.networkTelemetry.clientProbes.webrtcCandidateLeak.leakDetails}
`, currentCase.networkTelemetry.clientProbes.webrtcCandidateLeak.leakDetected ? 'error' : 'success');
    } else if (mainCmd === 'crypto-trace') {
      addLog(`
Financial Multi-Hop Transaction Trace:
--------------------------------------
Total Volume: $${currentCase.financialLedger.totalVolumeUsd.toLocaleString()} USD
Structuring Pattern: ${currentCase.financialLedger.structuringSummary}
Hops Logged:
${currentCase.financialLedger.hops.map((h, i) => `  [Hop ${i+1}] ${h.from} -> ${h.to} | $${h.amountUsd.toLocaleString()} (${h.asset}) | Tag: ${h.riskTag}`).join('\n')}
`, 'output');
    } else if (mainCmd === 'tco-dispatch') {
      addLog(`[tco] Initiating EU TCO Regulation (EU) 2021/784 1-Hour takedown order...`, 'system');
      await new Promise(r => setTimeout(r, 400));
      onUpdateStatus(currentCase.id, 'TCO_DISPATCHED', 'TCO 1-Hour Takedown dispatched from CLI');
      addLog(`[tco] 1-Hour Takedown Order broadcast to global edge network. Ref: TCO-${currentCase.id}`, 'success');
    } else if (mainCmd === 'freeze-rails') {
      addLog(`[aml] Freezing settlement queues and wallet addresses...`, 'system');
      await new Promise(r => setTimeout(r, 400));
      onUpdateStatus(currentCase.id, 'ASSETS_FROZEN', 'Asset Freeze executed via CLI');
      addLog(`[aml] Rails frozen for target ${currentCase.entityTarget.primaryAlias}. Assets locked.`, 'success');
    } else if (mainCmd === 'sar-generate') {
      addLog(`[sar] Generating FinCEN Part V Narrative for Docket ${currentCase.id}...`, 'system');
      addLog(`
FINCEN SAR PART V NARRATIVE:
Subject: ${currentCase.entityTarget.primaryAlias}
Reason: Structured smurfing & material support under 18 U.S.C. § 2339B.
Unmasked IP: ${currentCase.networkTelemetry.clientProbes.webrtcCandidateLeak.unmaskedPublicIp}
Total Intercepted: $${currentCase.financialLedger.totalVolumeUsd.toLocaleString()} USD
Preserved in Evidence Locker. Referral code: SAR-SENTINEL-${currentCase.id}
`, 'output');
    } else if (mainCmd === 'ai-analyze') {
      addLog(`[ai-analyst] Calling Sentinel Deep Forensics AI Agent...`, 'system');
      const aiResult = await requestAiAnalysis(currentCase, 'CUSTOM', arg || 'Provide a technical risk assessment.');
      addLog(aiResult, 'ai');
    } else {
      addLog(`Command not recognized: '${mainCmd}'. Type 'help' for available commands.`, 'error');
    }

    setIsExecuting(false);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleExecuteCommand(input);
    }
  };

  const StatusIcon = status.icon;

  return (
    <div className="flex flex-col h-[650px] bg-[#090d16] text-white p-3 font-sans box-border overflow-hidden rounded-xl border border-slate-800 shadow-2xl">
      {/* Chrome Tab Strip */}
      <div className="flex items-center justify-between bg-[#111827] p-2.5 rounded-lg border border-slate-800 mb-2 shrink-0 shadow-sm">
        <div className="flex items-center gap-2">
          <TerminalIcon className="w-4 h-4 text-cyan-400" />
          <span className="text-xs font-bold text-cyan-400 tracking-wider font-mono">
            FROI.OS ENCLAVE // SENTINEL PTY BRIDGE
          </span>
          <span className="bg-slate-800 text-slate-300 text-[10px] px-2 py-0.5 rounded-full flex items-center gap-1 font-mono">
            <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping"></span>
            Termux / Linux PTY Emulation
          </span>
        </div>

        <div className="flex items-center gap-3 text-xs font-mono">
          <div className={`flex items-center gap-1.5 font-bold ${status.color}`}>
            <StatusIcon className="w-3.5 h-3.5" />
            <span>{status.text}</span>
          </div>

          <button
            onClick={() => setLogs([])}
            className="text-slate-400 hover:text-slate-200 p-1 rounded hover:bg-slate-800 transition-colors cursor-pointer"
            title="Clear terminal"
          >
            <Trash2 className="w-3.5 h-3.5" />
          </button>
        </div>
      </div>

      {/* Active Viewport & Terminal Mount */}
      <div className="flex-1 relative bg-black/90 border border-slate-800 rounded-lg overflow-hidden p-3 flex flex-col shadow-inner">
        {/* Terminal Header Bar */}
        <div className="flex justify-between items-center border-b border-slate-900 pb-2 mb-2 shrink-0">
          <span className="text-[11px] text-slate-500 font-mono tracking-widest">
            ENCLAVE-ACTIVE // CASE: {currentCase.id}
          </span>
          <span className="text-[11px] text-cyan-500 font-mono">
            TARGET: {currentCase.networkTelemetry.claimedGeo.ip}
          </span>
        </div>

        {/* Terminal Output Stream */}
        <pre 
          ref={outputRef}
          className="flex-1 m-0 overflow-y-auto whitespace-pre-wrap break-all text-xs text-slate-200 font-mono leading-relaxed outline-none space-y-1 pr-1"
        >
          {logs.map((entry) => (
            <div 
              key={entry.id} 
              className={`
                ${entry.type === 'command' ? 'text-cyan-300 font-bold' : ''}
                ${entry.type === 'system' ? 'text-slate-400 italic' : ''}
                ${entry.type === 'success' ? 'text-emerald-400' : ''}
                ${entry.type === 'error' ? 'text-rose-400 font-semibold' : ''}
                ${entry.type === 'ai' ? 'text-indigo-300 bg-indigo-950/20 p-2 rounded border border-indigo-900/40 my-1' : ''}
                ${entry.type === 'output' ? 'text-slate-200' : ''}
              `}
            >
              <span className="text-[10px] text-slate-600 select-none mr-2">[{entry.timestamp}]</span>
              {entry.text}
            </div>
          ))}
          {isExecuting && (
            <div className="text-cyan-400 animate-pulse text-xs">
              &gt; Executing forensic routine...
            </div>
          )}
        </pre>

        {/* Terminal Input */}
        <div className="flex gap-2 mt-2 shrink-0 border-t border-slate-900 pt-2">
          <div className="flex-1 relative">
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-cyan-400 font-mono text-sm">
              &gt;
            </span>
            <input
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              disabled={isExecuting}
              placeholder="Enter command (e.g., triangulate, webrtc-stun-probe, crypto-trace, help)..."
              className="w-full bg-[#0d131f] border border-slate-800 text-white py-2 pr-3 pl-8 rounded font-mono text-xs focus:outline-none focus:border-cyan-500 transition-colors placeholder-slate-600 disabled:opacity-50"
              autoComplete="off"
              spellCheck="false"
            />
          </div>

          <button
            onClick={() => handleExecuteCommand(input)}
            disabled={isExecuting || !input.trim()}
            className="bg-cyan-500 hover:bg-cyan-400 disabled:bg-slate-800 disabled:text-slate-600 text-slate-950 px-4 py-2 rounded font-bold cursor-pointer text-xs font-mono transition-colors flex items-center gap-1.5 shadow-md shadow-cyan-500/10"
          >
            <Send className="w-3.5 h-3.5" />
            <span>SEND</span>
          </button>
        </div>
      </div>
    </div>
  );
};