import React, { useState } from 'react';
import { InvestigationCase } from '../../types/forensics';
import { 
  Globe, 
  Cpu, 
  Server, 
  Activity, 
  AlertTriangle, 
  CheckCircle2, 
  Layers, 
  ArrowRight, 
  Info,
  Sliders,
  ShieldCheck,
  Hash
} from 'lucide-react';

interface NetworkForensicsTabProps {
  currentCase: InvestigationCase;
}

export const NetworkForensicsTab: React.FC<NetworkForensicsTabProps> = ({
  currentCase,
}) => {
  const telemetry = currentCase.networkTelemetry;
  const bgp = telemetry.bgpAnycast;
  const tls = telemetry.tlsFingerprint;
  const tcp = telemetry.tcpStack;

  const [testDistanceKm, setTestDistanceKm] = useState<number>(3500);
  const [testRttMs, setTestRttMs] = useState<number>(14);

  // Speed of light in fiber is c * 2/3 ≈ 200,000 km/s.
  // t_min = (2 * d) / 200,000 km/s * 1000 ms/s = (2 * d) / 200 ms = d / 100 ms.
  const theoreticalFiberMinMs = (2 * testDistanceKm) / 200;
  const isCustomViolation = testRttMs < theoreticalFiberMinMs;

  return (
    <div className="space-y-4 p-4 text-slate-100">
      {/* Top Banner: Anycast Triangulation Physics Verdict */}
      <div className={`p-4 rounded-xl border shadow-md space-y-2 ${
        bgp.speedOfLightViolation
          ? 'bg-rose-950/40 border-rose-600/60 text-rose-100'
          : 'bg-emerald-950/40 border-emerald-600/60 text-emerald-100'
      }`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Globe className={`w-5 h-5 ${bgp.speedOfLightViolation ? 'text-rose-400 animate-pulse' : 'text-emerald-400'}`} />
            <h3 className="text-sm font-bold uppercase tracking-wider font-mono">
              Anycast BGP Speed-of-Light Triangulation Engine
            </h3>
          </div>
          <span className={`text-[11px] font-mono px-2 py-0.5 rounded font-bold ${
            bgp.speedOfLightViolation ? 'bg-rose-900/80 text-rose-200 border border-rose-500' : 'bg-emerald-900/80 text-emerald-200'
          }`}>
            {bgp.speedOfLightViolation ? 'SPEED-OF-LIGHT VIOLATION DETECTED' : 'NOMINAL LATENCY CURVE'}
          </span>
        </div>

        <p className="text-xs leading-relaxed text-slate-200 font-mono">
          {bgp.formulaExplanation}
        </p>

        <div className="bg-slate-950/80 p-3 rounded-lg border border-slate-800 flex flex-wrap items-center justify-between gap-2 text-xs font-mono">
          <div>
            <span className="text-slate-400 block text-[10px]">CLAIMED EGRESS IP</span>
            <span className="text-amber-300 font-bold">{telemetry.claimedGeo.ip} ({telemetry.claimedGeo.city}, {telemetry.claimedGeo.country})</span>
          </div>
          <div>
            <span className="text-slate-400 block text-[10px]">PHYSICALLY TRIANGULATED LOCATION</span>
            <span className="text-rose-400 font-bold">{bgp.physicalOriginInference}</span>
          </div>
          <div>
            <span className="text-slate-400 block text-[10px]">MAX LATENCY DELTA</span>
            <span className="text-cyan-300 font-bold">{bgp.propagationDeltaMs} ms anomaly</span>
          </div>
        </div>
      </div>

      {/* Global PoP Latency Measurement Matrix */}
      <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 shadow-md space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 text-xs font-bold text-slate-200">
            <Activity className="w-4 h-4 text-cyan-400" />
            <span>GLOBAL ANYCAST EDGE POP RTT LATENCY MATRIX</span>
          </div>
          <span className="text-[11px] text-slate-400 font-mono">Formula: t ≥ (2d) / (c · ⅔)</span>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs font-mono border-collapse">
            <thead>
              <tr className="bg-slate-950/80 text-slate-400 border-b border-slate-800">
                <th className="p-2.5">PoP Node</th>
                <th className="p-2.5">Location</th>
                <th className="p-2.5">Distance from Claimed IP</th>
                <th className="p-2.5">Measured TCP RTT</th>
                <th className="p-2.5">Physical Fiber Min RTT</th>
                <th className="p-2.5">Physics Verdict</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-800/60">
              {bgp.popLatencies.map((pop, idx) => (
                <tr key={idx} className={pop.anomalous ? 'bg-rose-950/20 text-rose-200' : 'hover:bg-slate-800/40 text-slate-300'}>
                  <td className="p-2.5 font-bold text-cyan-300">{pop.pop}</td>
                  <td className="p-2.5">{pop.city}, {pop.country}</td>
                  <td className="p-2.5">{pop.physicalDistanceKm.toLocaleString()} km</td>
                  <td className="p-2.5 font-bold">{pop.measuredRttMs.toFixed(1)} ms</td>
                  <td className="p-2.5 text-slate-400">{pop.expectedPhysicalMinRttMs.toFixed(1)} ms</td>
                  <td className="p-2.5">
                    {pop.anomalous ? (
                      <span className="inline-flex items-center gap-1 text-rose-400 font-bold bg-rose-950/80 px-2 py-0.5 rounded border border-rose-800/80">
                        <AlertTriangle className="w-3 h-3" /> Impossibility / Proxy
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1 text-emerald-400 bg-emerald-950/60 px-2 py-0.5 rounded">
                        <CheckCircle2 className="w-3 h-3" /> Speed-of-Light Compliant
                      </span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Interactive Speed-of-Light Fiber Propagation Calculator */}
      <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-4 shadow-md space-y-3">
        <div className="flex items-center gap-2 text-xs font-bold text-slate-200">
          <Sliders className="w-4 h-4 text-indigo-400" />
          <span>INTERACTIVE PROPAGATION FORMULA SANDBOX: t ≥ (2d) / (c · ⅔)</span>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs font-mono">
          <div className="space-y-3">
            <div>
              <div className="flex justify-between text-slate-400 mb-1">
                <span>Distance Between Nodes (d):</span>
                <span className="text-cyan-300 font-bold">{testDistanceKm} km</span>
              </div>
              <input
                type="range"
                min="10"
                max="20000"
                step="50"
                value={testDistanceKm}
                onChange={(e) => setTestDistanceKm(Number(e.target.value))}
                className="w-full accent-cyan-500 cursor-pointer"
              />
            </div>

            <div>
              <div className="flex justify-between text-slate-400 mb-1">
                <span>Measured Round-Trip Time (RTT):</span>
                <span className="text-amber-300 font-bold">{testRttMs} ms</span>
              </div>
              <input
                type="range"
                min="1"
                max="300"
                step="1"
                value={testRttMs}
                onChange={(e) => setTestRttMs(Number(e.target.value))}
                className="w-full accent-amber-500 cursor-pointer"
              />
            </div>
          </div>

          <div className="bg-slate-950 p-3.5 rounded-lg border border-slate-800 space-y-2">
            <div className="flex justify-between">
              <span className="text-slate-400">Theoretical Fiber Min RTT:</span>
              <span className="text-slate-200 font-bold">{theoreticalFiberMinMs.toFixed(2)} ms</span>
            </div>
            <div className="flex justify-between">
              <span className="text-slate-400">Measured Input RTT:</span>
              <span className="text-slate-200 font-bold">{testRttMs} ms</span>
            </div>
            <div className="border-t border-slate-800 pt-2 flex items-center justify-between">
              <span className="text-slate-400">Propagation Verdict:</span>
              {isCustomViolation ? (
                <span className="text-rose-400 font-bold bg-rose-950/80 px-2 py-0.5 rounded border border-rose-800">
                  PHYSICALLY IMPOSSIBLE (Proxy Evasion)
                </span>
              ) : (
                <span className="text-emerald-400 font-bold bg-emerald-950/80 px-2 py-0.5 rounded border border-emerald-800">
                  PHYSICALLY PLAUSIBLE
                </span>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Layer 1.2 & 1.3: TLS JA4/JA3 Fingerprinting & TCP/IP Stack */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {/* TLS Fingerprint Card */}
        <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 shadow-md space-y-3">
          <div className="flex items-center justify-between border-b border-slate-800 pb-2">
            <div className="flex items-center gap-2 text-xs font-bold text-slate-200">
              <Hash className="w-4 h-4 text-cyan-400" />
              <span>TLS CLIENTHELLO (JA3 / JA4) DISASSEMBLER</span>
            </div>
            {tls.isKnownEvasionStack && (
              <span className="text-[10px] font-mono bg-rose-950 text-rose-300 border border-rose-800 px-1.5 py-0.5 rounded font-bold">
                EVASION ENGINE MATCH
              </span>
            )}
          </div>

          <div className="space-y-2 text-xs font-mono">
            <div>
              <span className="text-slate-500 block text-[10px]">JA4 SIGNATURE HASH</span>
              <span className="text-cyan-300 bg-slate-950 p-1.5 rounded block border border-slate-800/80 break-all select-all">
                {tls.ja4}
              </span>
            </div>

            <div>
              <span className="text-slate-500 block text-[10px]">JA3 HASH</span>
              <span className="text-slate-300 bg-slate-950 p-1.5 rounded block border border-slate-800/80 break-all text-[11px] select-all">
                {tls.ja3}
              </span>
            </div>

            <div className="bg-slate-950 p-2.5 rounded border border-slate-800/80 space-y-1">
              <div className="text-[10px] text-slate-400 font-bold">DETECTED CLIENT RUNTIME:</div>
              <div className="text-rose-400 font-bold text-xs">{tls.detectedClientEngine}</div>
              <div className="text-slate-400 text-[11px]">{tls.anomalyReason}</div>
            </div>

            <div className="text-[11px] text-slate-400">
              <span className="text-slate-500 block text-[10px]">CIPHER SUITES NEGOTIATED:</span>
              <div className="flex flex-wrap gap-1 mt-1">
                {tls.cipherSuites.map((c, i) => (
                  <span key={i} className="bg-slate-950 px-1.5 py-0.5 rounded border border-slate-800 text-[10px] text-slate-300">
                    {c}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* TCP/IP Stack & OS Fingerprint Card */}
        <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 shadow-md space-y-3">
          <div className="flex items-center justify-between border-b border-slate-800 pb-2">
            <div className="flex items-center gap-2 text-xs font-bold text-slate-200">
              <Server className="w-4 h-4 text-indigo-400" />
              <span>TCP/IP STACK & OS DISCREPANCY DETECTOR</span>
            </div>
            {tcp.osMismatchDetected && (
              <span className="text-[10px] font-mono bg-rose-950 text-rose-300 border border-rose-800 px-1.5 py-0.5 rounded font-bold">
                OS MISMATCH DETECTED
              </span>
            )}
          </div>

          <div className="space-y-3 text-xs font-mono">
            <div className="grid grid-cols-2 gap-2">
              <div className="bg-slate-950 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">INITIAL TCP TTL</span>
                <span className="text-cyan-300 font-bold text-sm">{tcp.initialTtl}</span>
                <span className="text-[10px] text-slate-400 block">(Linux=64, Win=128)</span>
              </div>
              <div className="bg-slate-950 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">CLAIMED OS TTL</span>
                <span className="text-amber-300 font-bold text-sm">{tcp.claimedOsTtl}</span>
                <span className="text-[10px] text-slate-400 block">(from User-Agent)</span>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-2">
              <div className="bg-slate-950 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">TCP WINDOW SIZE</span>
                <span className="text-slate-200 font-bold text-sm">{tcp.windowSize}</span>
              </div>
              <div className="bg-slate-950 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">MAX SEGMENT SIZE (MSS)</span>
                <span className="text-slate-200 font-bold text-sm">{tcp.mss} bytes</span>
              </div>
            </div>

            <div className="bg-slate-950 p-3 rounded border border-slate-800 space-y-1">
              <div className="text-[10px] text-slate-400 font-bold">OS PROFILE ANALYSIS:</div>
              <div className="text-slate-300 text-[11px] leading-relaxed">
                {tcp.osMismatchDetails}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};