import React, { useState } from 'react';
import { X, Globe, Sliders, AlertTriangle, CheckCircle2, RefreshCw } from 'lucide-react';
import { calculateAnycastSpeedOfLight } from '../../services/forensicApi';

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

const GLOBAL_POPS = [
  { name: 'Frankfurt (FRA)', coords: '50.1109° N, 8.6821° E', distanceKm: 6500 },
  { name: 'Ashburn, VA (IAD)', coords: '39.0438° N, 77.4874° W', distanceKm: 500 },
  { name: 'London (LHR)', coords: '51.5074° N, 0.1278° W', distanceKm: 5900 },
  { name: 'Tokyo (NRT)', coords: '35.6762° N, 139.6503° E', distanceKm: 10800 },
  { name: 'Singapore (SIN)', coords: '1.3521° N, 103.8198° E', distanceKm: 15300 },
  { name: 'Sydney (SYD)', coords: '33.8688° S, 151.2093° E', distanceKm: 16000 },
];

export const AnycastSandboxModal: React.FC<AnycastSandboxModalProps> = ({
  isOpen,
  onClose,
}) => {
  const [distanceKm, setDistanceKm] = useState<number>(6500);
  const [measuredRttMs, setMeasuredRttMs] = useState<number>(14);

  if (!isOpen) return null;

  const result = calculateAnycastSpeedOfLight(distanceKm, measuredRttMs);

  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-cyan-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">
            <Globe className="w-5 h-5 text-cyan-400" />
            <h3 className="text-sm font-bold font-mono text-cyan-300">
              ANYCAST BGP SPEED-OF-LIGHT PROPAGATION SANDBOX
            </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>

        {/* Content */}
        <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-cyan-400">PHYSICAL PRINCIPLE:</div>
            <p className="leading-relaxed">
              Light in optical fiber propagates at approximately <strong className="text-white">⅔ c ≈ 200,000 km/s</strong>. A signal traveling a round-trip distance of <span className="text-amber-300">2 · d</span> cannot physically return in less than <span className="text-amber-300">t ≥ (2d) / (200,000) s = d / 100 ms</span>.
            </p>
          </div>

          {/* Preset Buttons */}
          <div>
            <span className="text-slate-400 block mb-1">Select Reference Target PoP:</span>
            <div className="flex flex-wrap gap-1.5">
              {GLOBAL_POPS.map((pop, i) => (
                <button
                  key={i}
                  onClick={() => setDistanceKm(pop.distanceKm)}
                  className={`px-2.5 py-1 rounded border text-[11px] cursor-pointer transition-all ${
                    distanceKm === pop.distanceKm
                      ? 'bg-cyan-600 text-slate-950 font-bold border-cyan-400'
                      : 'bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700'
                  }`}
                >
                  {pop.name} ({pop.distanceKm} km)
                </button>
              ))}
            </div>
          </div>

          {/* Sliders */}
          <div className="space-y-3 bg-slate-900/80 p-3.5 rounded-lg border border-slate-800">
            <div>
              <div className="flex justify-between text-slate-300 mb-1">
                <span>Fiber Distance (d):</span>
                <span className="text-cyan-400 font-bold">{distanceKm.toLocaleString()} km</span>
              </div>
              <input
                type="range"
                min="100"
                max="20000"
                step="100"
                value={distanceKm}
                onChange={(e) => setDistanceKm(Number(e.target.value))}
                className="w-full accent-cyan-500 cursor-pointer"
              />
            </div>

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

          {/* Output Verdict */}
          <div className="grid grid-cols-2 gap-3">
            <div className="bg-slate-950 p-3 rounded-lg border border-slate-800">
              <span className="text-slate-500 block text-[10px]">THEORETICAL FIBER MINIMUM</span>
              <span className="text-cyan-300 font-bold text-lg">{result.fiberRealisticMinMs} ms</span>
            </div>

            <div className="bg-slate-950 p-3 rounded-lg border border-slate-800">
              <span className="text-slate-500 block text-[10px]">PROPAGATION DELTA (ANOMALY)</span>
              <span className="text-amber-300 font-bold text-lg">{result.deltaMs} ms</span>
            </div>
          </div>

          <div className={`p-3 rounded-lg border flex items-center justify-between ${
            result.isPhysicalViolation
              ? 'bg-rose-950/70 border-rose-600 text-rose-200'
              : 'bg-emerald-950/70 border-emerald-600 text-emerald-200'
          }`}>
            <div className="flex items-center gap-2 font-bold">
              {result.isPhysicalViolation ? (
                <>
                  <AlertTriangle className="w-5 h-5 text-rose-400 shrink-0" />
                  <span>SPEED-OF-LIGHT VIOLATION: Target is spoofing location via Proxy / Anycast overlay.</span>
                </>
              ) : (
                <>
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
                  <span>PHYSICALLY PLAUSIBLE: Round-trip time satisfies optical fiber limits.</span>
                </>
              )}
            </div>
          </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 Sandbox
          </button>
        </div>
      </div>
    </div>
  );
};