import React, { useState } from 'react';
import { X, Cpu, Layers, RefreshCw, AlertTriangle, CheckCircle2, ShieldCheck } from 'lucide-react';

interface WebRtcLiveProbeModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const WebRtcLiveProbeModal: React.FC<WebRtcLiveProbeModalProps> = ({
  isOpen,
  onClose,
}) => {
  const [isProbing, setIsProbing] = useState<boolean>(false);
  const [candidates, setCandidates] = useState<Array<{ type: string; address: string; port: number; proto: string }>>([]);
  const [errorNote, setErrorNote] = useState<string | null>(null);

  if (!isOpen) return null;

  const startLiveStunProbe = async () => {
    setIsProbing(true);
    setCandidates([]);
    setErrorNote(null);

    try {
      // Create standard RTCPeerConnection with Google Public STUN
      const pc = new RTCPeerConnection({
        iceServers: [
          { urls: 'stun:stun.l.google.com:19302' },
          { urls: 'stun:stun1.l.google.com:19302' },
        ],
      });

      // Create data channel to trigger ICE candidate gathering
      pc.createDataChannel('sentinel-ice-probe');

      pc.onicecandidate = (event) => {
        if (event.candidate) {
          const cand = event.candidate;
          const parts = cand.candidate.split(' ');
          const ip = parts[4] || cand.address || 'unknown';
          const port = parseInt(parts[5] || '0', 10);
          const type = parts[7] || cand.type || 'host';
          const proto = parts[2] || cand.protocol || 'udp';

          setCandidates((prev) => {
            if (prev.some((c) => c.address === ip && c.port === port)) return prev;
            return [...prev, { type, address: ip, port, proto }];
          });
        }
      };

      const offer = await pc.createOffer();
      await pc.setLocalDescription(offer);

      // Stop gathering after 3 seconds
      setTimeout(() => {
        pc.close();
        setIsProbing(false);
      }, 3000);
    } catch (err: any) {
      setErrorNote(err.message || 'Browser WebRTC ICE gathering blocked or restricted.');
      setIsProbing(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
      <div className="bg-[#0e1626] border border-amber-500/50 rounded-xl w-full max-w-2xl text-slate-100 shadow-2xl overflow-hidden animate-fade-in">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-slate-800 bg-slate-900">
          <div className="flex items-center gap-2">
            <Cpu className="w-5 h-5 text-amber-400" />
            <h3 className="text-sm font-bold font-mono text-amber-300">
              WEBRTC ICE CANDIDATE / STUN INTERFACE PROBE
            </h3>
          </div>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-slate-100 p-1 rounded hover:bg-slate-800 transition-colors cursor-pointer"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* Body */}
        <div className="p-4 space-y-4 text-xs font-mono">
          <div className="p-3 rounded-lg bg-slate-950 border border-slate-800 text-slate-300 space-y-1">
            <div className="font-bold text-amber-400">FORENSIC VECTOR:</div>
            <p className="leading-relaxed">
              Standard operating system VPN tunnels often fail to encapsulate peer-to-peer WebRTC UDP socket requests. A STUN server reflection forces the browser network stack to reveal its true physical interface IP.
            </p>
          </div>

          <div className="flex items-center justify-between">
            <button
              onClick={startLiveStunProbe}
              disabled={isProbing}
              className="flex items-center gap-2 bg-amber-500 hover:bg-amber-400 disabled:bg-slate-800 disabled:text-slate-500 text-slate-950 font-bold px-4 py-2 rounded-lg transition-all cursor-pointer shadow-md shadow-amber-500/20"
            >
              {isProbing ? <RefreshCw className="w-4 h-4 animate-spin" /> : <Layers className="w-4 h-4" />}
              <span>{isProbing ? 'GATHERING ICE CANDIDATES...' : 'START LIVE STUN PROBE'}</span>
            </button>

            <span className="text-slate-400 text-[11px]">
              Resolver: stun.l.google.com:19302
            </span>
          </div>

          {/* Candidates Display */}
          <div className="bg-slate-950 p-3 rounded-lg border border-slate-800 min-h-[160px] space-y-2">
            <div className="text-[11px] text-slate-400 font-bold border-b border-slate-800 pb-1 flex justify-between">
              <span>DISCOVERED ICE CANDIDATES ({candidates.length})</span>
              <span className="text-slate-500">RFC 8445 / STUN</span>
            </div>

            {candidates.length === 0 ? (
              <div className="text-slate-500 p-6 text-center">
                {isProbing ? 'Probing STUN servers for local and reflexive interfaces...' : 'Click "Start Live STUN Probe" to test client network interfaces.'}
              </div>
            ) : (
              <div className="space-y-1.5 max-h-48 overflow-y-auto">
                {candidates.map((c, i) => (
                  <div key={i} className="flex items-center justify-between p-2 rounded bg-slate-900 border border-slate-800 text-[11px]">
                    <div className="flex items-center gap-2">
                      <span className={`px-1.5 py-0.5 rounded text-[9px] font-bold ${
                        c.type === 'srflx' ? 'bg-rose-950 text-rose-300 border border-rose-800' : 'bg-slate-800 text-slate-300'
                      }`}>
                        {c.type.toUpperCase()}
                      </span>
                      <span className="text-cyan-300 font-bold">{c.address}:{c.port}</span>
                    </div>
                    <span className="text-slate-400">{c.proto.toUpperCase()}</span>
                  </div>
                ))}
              </div>
            )}
          </div>

          {errorNote && (
            <div className="p-2.5 bg-rose-950/70 border border-rose-800 rounded text-rose-300 text-xs">
              {errorNote}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="p-3 bg-slate-900 border-t border-slate-800 flex justify-end">
          <button
            onClick={onClose}
            className="px-4 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded text-xs font-mono font-bold cursor-pointer transition-colors"
          >
            Close Probe
          </button>
        </div>
      </div>
    </div>
  );
};