import { Activity, Globe, RefreshCw, ShieldCheck, Wifi } from 'lucide-react';
import React, { useState } from 'react';

interface Datacenter {
    id: string;
    city: string;
    country: string;
    flag: string;
    ip: string;
    basePing: number;
    bandwidth: string;
    status: string;
}

const DATACENTERS: Datacenter[] = [
    { id: 'fra', city: 'Frankfurt am Main', country: 'Deutschland', flag: '🇩🇪', ip: '185.220.101.4', basePing: 3, bandwidth: '100 Gbps DE-CIX', status: 'Optimal' },
    { id: 'ams', city: 'Amsterdam', country: 'Niederlande', flag: '🇳🇱', ip: '185.220.102.12', basePing: 9, bandwidth: '40 Gbps AMS-IX', status: 'Optimal' },
    { id: 'lon', city: 'London', country: 'Vereinigtes Königreich', flag: '🇬🇧', ip: '185.220.103.8', basePing: 14, bandwidth: '40 Gbps LINX', status: 'Optimal' },
    { id: 'nyc', city: 'New York City', country: 'USA', flag: '🇺🇸', ip: '198.51.100.45', basePing: 78, bandwidth: '100 Gbps NYIIX', status: 'Optimal' },
    { id: 'sgp', city: 'Singapur', country: 'Singapur', flag: '🇸🇬', ip: '203.0.113.88', basePing: 162, bandwidth: '40 Gbps SGIX', status: 'Optimal' },
    { id: 'tyo', city: 'Tokio', country: 'Japan', flag: '🇯🇵', ip: '198.51.100.99', basePing: 210, bandwidth: '40 Gbps JPNAP', status: 'Optimal' },
];

export const PingTester: React.FC = () => {
    const [pings, setPings] = useState<{ [key: string]: number | null }>({
        fra: 3,
        ams: 9,
        lon: 14,
        nyc: 78,
        sgp: 162,
        tyo: 210,
    });
    const [isTesting, setIsTesting] = useState(false);

    const runPingTest = () => {
        setIsTesting(true);
        // Reset state
        const testingState: { [key: string]: number | null } = {};
        DATACENTERS.forEach((dc) => (testingState[dc.id] = null));
        setPings(testingState);

        DATACENTERS.forEach((dc, index) => {
            setTimeout(() => {
                const jitter = Math.floor(Math.random() * 4) - 2;
                const result = Math.max(1, dc.basePing + jitter);
                setPings((prev) => ({ ...prev, [dc.id]: result }));

                if (index === DATACENTERS.length - 1) {
                    setIsTesting(false);
                }
            }, (index + 1) * 350);
        });
    };

    return (
        <section id="network" className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
            <div className="rounded-3xl border border-[#311119] bg-gradient-to-b from-[#120608] to-[#070405] p-8 sm:p-12 relative overflow-hidden backdrop-blur-xl shadow-2xl">
                {/* Decorative background grid */}
                <div className="absolute inset-0 bg-[linear-gradient(to_right,#2a0e14_1px,transparent_1px),linear-gradient(to_bottom,#2a0e14_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-25 pointer-events-none" />

                <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10 relative z-10">
                    <div>
                        <div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400 mb-3">
                            <Globe className="h-3.5 w-3.5" />
                            Tier-1 Backbone Network & DE-CIX Peering
                        </div>
                        <h2 className="text-3xl font-extrabold text-white tracking-tight">
                            Weltweite Rechenzentren & Latenz-Tester
                        </h2>
                        <p className="mt-2 text-slate-400 text-sm max-w-xl">
                            Unsere Server stehen in nach ISO-27001 zertifizierten Hochsicherheits-Rechenzentren mit direkter Anbindung an Telia, Deutsche Telekom und Lumen.
                        </p>
                    </div>

                    <button
                        onClick={runPingTest}
                        disabled={isTesting}
                        className="inline-flex items-center gap-2 rounded-xl bg-[#1c0a0e] border border-[#38131d] hover:border-rose-500/50 hover:bg-[#280e14] px-5 py-3 text-sm font-semibold text-white transition-all disabled:opacity-50 shadow-md"
                    >
                        <RefreshCw className={`h-4 w-4 text-rose-500 ${isTesting ? 'animate-spin' : ''}`} />
                        {isTesting ? 'Messe Latenzen...' : 'Live-Ping Test Starten'}
                    </button>
                </div>

                {/* Datacenter Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 relative z-10">
                    {DATACENTERS.map((dc) => {
                        const pingVal = pings[dc.id];
                        return (
                            <div
                                key={dc.id}
                                className="group rounded-2xl border border-[#260e13] bg-[#0c0507] p-5 hover:border-rose-500/40 hover:bg-[#14070a] transition-all shadow-lg"
                            >
                                <div className="flex items-center justify-between">
                                    <div className="flex items-center gap-3">
                                        <span className="text-2xl">{dc.flag}</span>
                                        <div>
                                            <h3 className="font-bold text-white text-sm group-hover:text-rose-400 transition-colors">
                                                {dc.city}
                                            </h3>
                                            <p className="text-xs text-slate-400">{dc.country}</p>
                                        </div>
                                    </div>
                                    <span className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-400 bg-emerald-950/60 border border-emerald-800/40 px-2 py-0.5 rounded">
                                        <Activity className="h-3 w-3" />
                                        {dc.status}
                                    </span>
                                </div>

                                <div className="mt-4 pt-3 border-t border-[#1f0b0f] flex items-center justify-between font-mono text-xs">
                                    <span className="text-slate-500">{dc.ip}</span>
                                    <div className="flex items-center gap-1.5 font-bold">
                                        <Wifi className="h-3.5 w-3.5 text-rose-500" />
                                        {pingVal === null ? (
                                            <span className="text-slate-500 animate-pulse">...</span>
                                        ) : (
                                            <span className={pingVal < 50 ? 'text-emerald-400' : pingVal < 120 ? 'text-yellow-400' : 'text-slate-300'}>
                                                {pingVal} ms
                                            </span>
                                        )}
                                    </div>
                                </div>

                                <div className="mt-2 text-[10px] text-slate-500 flex justify-between">
                                    <span>Anbindung: {dc.bandwidth}</span>
                                    <span>0% Paketverlust</span>
                                </div>
                            </div>
                        );
                    })}
                </div>

                {/* DDoS Banner footer */}
                <div className="mt-8 pt-6 border-t border-[#260e13] flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-400 relative z-10">
                    <div className="flex items-center gap-2">
                        <ShieldCheck className="h-5 w-5 text-rose-500" />
                        <span>Inklusive automatischer 2.4 Tbps Arbor & Voxility Hardware-DDoS Filterung</span>
                    </div>
                    <span className="text-slate-500 font-mono">BGP Anycast Routing Aktiv</span>
                </div>
            </div>
        </section>
    );
};