import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Shield, Server, ShieldAlert, ShieldCheck, X, Activity, ArrowDownToLine } from "lucide-react"; export default function DdosMitigationShieldOverlayFeedback() { const [isOpen, setIsOpen] = useState(false); const [phase, setPhase] = useState<"idle" | "attack" | "defending" | "secured">("idle"); const [rps, setRps] = useState(45); const [trafficHistory, setTrafficHistory] = useState(Array(12).fill(10)); const PARTICLES = Array.from({ length: 24 }).map((_, i) => i); useEffect(() => { if (!isOpen) { setPhase("idle"); setRps(45); setTrafficHistory(Array(12).fill(10)); return; } setPhase("attack"); const defendTimer = setTimeout(() => { setPhase("defending"); }, 2500); const secureTimer = setTimeout(() => { setPhase("secured"); }, 6000); return () => { clearTimeout(defendTimer); clearTimeout(secureTimer); }; }, [isOpen]); // Traffic & RPS Simulation useEffect(() => { let interval: NodeJS.Timeout; interval = setInterval(() => { setRps((prev) => { let next = prev; if (phase === "attack") { next = prev < 15000 ? prev + Math.floor(Math.random() * 5000) + 2000 : 18500 + Math.floor(Math.random() * 1000); } else if (phase === "defending") { next = prev > 500 ? prev - Math.floor(prev * 0.2) : 400 + Math.floor(Math.random() * 100); } else if (phase === "secured") { next = 45 + Math.floor(Math.random() * 10); } setTrafficHistory((current) => { const newHistory = [...current.slice(1)]; // Normalize height percentage (0-100) const height = phase === "attack" ? 80 + Math.random() * 20 : phase === "defending" ? 30 + Math.random() * 20 : 10 + Math.random() * 10; newHistory.push(height); return newHistory; }); return next; }); }, 200); return () => clearInterval(interval); }, [phase]); const getThemeColor = () => { if (phase === "attack") return "text-red-500"; if (phase === "defending") return "text-blue-500"; if (phase === "secured") return "text-emerald-500"; return "text-neutral-500"; }; const getBgColor = () => { if (phase === "attack") return "bg-red-500"; if (phase === "defending") return "bg-blue-500"; if (phase === "secured") return "bg-emerald-500"; return "bg-neutral-500"; }; return (

{/* Container Background Pattern */}

setIsOpen(true)} className="relative z-10 flex items-center gap-2 px-8 py-4 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-2xl font-bold tracking-wide transition-all shadow-xl hover:shadow-2xl" > Simulate Attack {isOpen && ( {/* Modal Constrained to max-w-[340px] for perfect mobile fit */} {/* Header */}

{phase === "attack" && } {phase === "defending" && } {phase === "secured" && } Firewall Status

{phase === "secured" && ( )}

{/* Radar / Visualizer Area */}

{/* Sonar Rings */}

{/* Central Server Node */}

{phase === "attack" && ( )}

{/* Defending Shield Forcefield */} {(phase === "defending" || phase === "secured") && ( )} {/* Incoming Attack Particles */} {(phase === "attack" || phase === "defending") && (

{PARTICLES.map((i) => { const angle = (i * 360) / PARTICLES.length; // Math for circular positioning const startX = Math.cos((angle * Math.PI) / 180) * 200; const startY = Math.sin((angle * Math.PI) / 180) * 200; // If defending, particles hit the shield (radius ~56px) and stop/bounce const endX = phase === "defending" ? Math.cos((angle * Math.PI) / 180) * 60 : 0; const endY = phase === "defending" ? Math.sin((angle * Math.PI) / 180) * 60 : 0; return ( ); })}

)}

{/* Status and Graph Area */}

{new Intl.NumberFormat('en-US').format(rps)}

Requests / Second

{phase === "attack" ? "Critical" : phase === "defending" ? "Mitigating" : "Stable"}

{/* Realtime Graph */}

{trafficHistory.map((height, idx) => (

))}

{/* Log / Feedback Message */}

{phase === "attack" && ( Layer 7 HTTP Flood Detected )} {phase === "defending" && ( Scrubbing malicious IPs... )} {phase === "secured" && ( Traffic routed to origin safely )}

)}

); }