import React from 'react';
import { InvestigationCase } from '../../types/forensics';
import { 
  Cpu, 
  Wifi, 
  Radio, 
  Clock, 
  Keyboard, 
  AlertTriangle, 
  CheckCircle2, 
  Layers, 
  Activity,
  MapPin,
  ShieldAlert
} from 'lucide-react';

interface ClientLeakageTabProps {
  currentCase: InvestigationCase;
}

export const ClientLeakageTab: React.FC<ClientLeakageTabProps> = ({
  currentCase,
}) => {
  const probes = currentCase.networkTelemetry.clientProbes;

  return (
    <div className="space-y-4 p-4 text-slate-100">
      {/* Top Banner: Client-Side Hardware Probing Overview */}
      <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 shadow-md space-y-2">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Cpu className="w-5 h-5 text-amber-400" />
            <h3 className="text-sm font-bold uppercase tracking-wider font-mono">
              Client-Side Telemetry & Hardware Leakage Probing
            </h3>
          </div>
          <span className="text-[11px] font-mono px-2 py-0.5 rounded bg-amber-950 text-amber-300 border border-amber-800/80 font-bold">
            MULTI-LAYER CLIENT PROBES ACTIVE
          </span>
        </div>

        <p className="text-xs text-slate-300 leading-relaxed font-mono">
          Standard transport-layer VPNs leave client hardware and peer-to-peer interfaces exposed. The Sentinel Probing Engine extracts WebRTC ICE candidates via STUN, queries ambient Wi-Fi BSSID identifiers, measures clock skew desynchronization, and profiles keyboard layout telemetry to unmask physical origin.
        </p>
      </div>

      {/* Grid of 4 Client Probing Vectors */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {/* 1. WebRTC ICE Candidate & STUN Leakage */}
        <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">
              <Layers className="w-4 h-4 text-cyan-400" />
              <span>WEBRTC ICE CANDIDATE & STUN INTERFACE LEAK</span>
            </div>
            {probes.webrtcCandidateLeak.leakDetected ? (
              <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">
                PHYSICAL NIC LEAK DETECTED
              </span>
            ) : (
              <span className="text-[10px] font-mono bg-emerald-950 text-emerald-300 px-1.5 py-0.5 rounded">
                NO STUN LEAK
              </span>
            )}
          </div>

          <div className="space-y-2.5 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]">LOCAL PRIVATE IP (RFC 1918)</span>
                <span className="text-slate-300 font-bold">{probes.webrtcCandidateLeak.localPrivateIp}</span>
              </div>
              <div className="bg-slate-950 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">UNMASKED PUBLIC PHYSICAL IP</span>
                <span className="text-rose-400 font-bold">{probes.webrtcCandidateLeak.unmaskedPublicIp}</span>
              </div>
            </div>

            <div className="bg-slate-950 p-2.5 rounded border border-slate-800">
              <span className="text-slate-500 block text-[10px]">STUN RESOLVER USED</span>
              <span className="text-cyan-300 text-[11px]">{probes.webrtcCandidateLeak.stunServerUsed}</span>
            </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">LEAKAGE ASSESSMENT:</div>
              <p className="text-slate-300 text-[11px] leading-relaxed">
                {probes.webrtcCandidateLeak.leakDetails}
              </p>
            </div>
          </div>
        </div>

        {/* 2. Ambient Wi-Fi BSSID & RF Triangulation */}
        <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">
              <Wifi className="w-4 h-4 text-emerald-400" />
              <span>AMBIENT RF & WI-FI BSSID TRIANGULATION</span>
            </div>
            <span className="text-[10px] font-mono bg-indigo-950 text-indigo-300 border border-indigo-800 px-1.5 py-0.5 rounded font-bold">
              ±{probes.ambientRfTriangulation.accuracyMeters}m ACCURACY
            </span>
          </div>

          <div className="space-y-2.5 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]">NEARBY ROUTER BSSID (MAC)</span>
                <span className="text-cyan-300 font-bold">{probes.ambientRfTriangulation.bssidMac}</span>
                <span className="text-slate-400 text-[10px] block mt-0.5">SSID: {probes.ambientRfTriangulation.ssid}</span>
              </div>
              <div className="bg-slate-950 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">CELL TOWER CGI / ENODEB</span>
                <span className="text-amber-300 font-bold text-[11px]">{probes.ambientRfTriangulation.cellTowerCgi}</span>
                <span className="text-slate-400 text-[10px] block mt-0.5">RSSI: {probes.ambientRfTriangulation.rssiDb} dBm</span>
              </div>
            </div>

            <div className="bg-slate-950 p-3 rounded border border-slate-800 space-y-1">
              <div className="flex items-center gap-1.5 text-[10px] text-slate-400 font-bold">
                <MapPin className="w-3.5 h-3.5 text-rose-400" />
                <span>TRIANGULATED PHYSICAL LOCATION:</span>
              </div>
              <p className="text-rose-400 font-bold text-xs">
                {probes.ambientRfTriangulation.triangulatedLocation}
              </p>
              <div className="text-[10px] text-slate-500">
                Ambient RF positioning overrides operating-system level IP VPN tunnels by cross-referencing physical radio beacons.
              </div>
            </div>
          </div>
        </div>

        {/* 3. System Clock & NTP Skew Desynchronization */}
        <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">
              <Clock className="w-4 h-4 text-indigo-400" />
              <span>SYSTEM CLOCK & NTP TIMEZONE SKEW</span>
            </div>
            <span className="text-[10px] font-mono text-slate-400">
              Δ {probes.ntpClockSkew.skewDeltaSeconds}s
            </span>
          </div>

          <div className="space-y-2.5 text-xs font-mono">
            <div className="bg-slate-950 p-2.5 rounded border border-slate-800">
              <span className="text-slate-500 block text-[10px]">CLIENT REPORTED TIMEZONE</span>
              <span className="text-amber-300 font-bold">{probes.ntpClockSkew.clientReportedTz}</span>
            </div>

            <div className="grid grid-cols-2 gap-2 text-[11px]">
              <div className="bg-slate-950 p-2 rounded border border-slate-800">
                <span className="text-slate-500 block text-[9px]">DEVICE CLOCK ISO</span>
                <span className="text-slate-300 truncate block">{probes.ntpClockSkew.deviceClockIso}</span>
              </div>
              <div className="bg-slate-950 p-2 rounded border border-slate-800">
                <span className="text-slate-500 block text-[9px]">SERVER NTP ISO</span>
                <span className="text-cyan-300 truncate block">{probes.ntpClockSkew.serverNtpTimestampIso}</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">DESYNCHRONIZATION VERDICT:</div>
              <p className="text-slate-300 text-[11px] leading-relaxed">
                {probes.ntpClockSkew.verdict}
              </p>
            </div>
          </div>
        </div>

        {/* 4. Linguistic, Keyboard & UI Cadence */}
        <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">
              <Keyboard className="w-4 h-4 text-purple-400" />
              <span>LINGUISTIC & KEYBOARD TELEMETRY</span>
            </div>
            {probes.linguisticTelemetry.anomalyFlag && (
              <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">
                BEHAVIOR ANOMALY
              </span>
            )}
          </div>

          <div className="space-y-2.5 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]">ACTIVE KEYBOARD LAYOUT</span>
                <span className="text-cyan-300 font-bold">{probes.linguisticTelemetry.activeKeyboardLayout}</span>
              </div>
              <div className="bg-slate-950 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">TYPING CADENCE (INTERVAL)</span>
                <span className="text-purple-300 font-bold">
                  {probes.linguisticTelemetry.typingCadenceMs} ms / stroke
                </span>
                <span className="text-[9px] text-slate-500 block">
                  {probes.linguisticTelemetry.typingCadenceMs < 20 ? '(Mechanical Bot / Script)' : '(Human Velocity)'}
                </span>
              </div>
            </div>

            <div className="bg-slate-950 p-2.5 rounded border border-slate-800">
              <span className="text-slate-500 block text-[10px]">HTTP ACCEPT-LANGUAGE HEADER</span>
              <span className="text-slate-300">{probes.linguisticTelemetry.acceptLanguage}</span>
            </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">LINGUISTIC & BEHAVIOR OBSERVATION:</div>
              <p className="text-slate-300 text-[11px] leading-relaxed">
                {probes.linguisticTelemetry.anomalyNote}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};