import { Activity, ArrowRight, Check, Copy, Cpu, Gamepad2, HardDrive, Layers, LayoutGrid, Play, RefreshCw, Server, ShieldCheck, Square, Terminal, Zap } from 'lucide-react';
import React, { useEffect, useState } from 'react';

export const PanelPreview: React.FC = () => {
    const [serverState, setServerState] = useState<'online' | 'starting' | 'stopping' | 'offline'>('online');
    const [logs, setLogs] = useState<string[]>([
        '[09:54:12 INFO]: Starting paper-1.21.jar on 0.0.0.0:25565',
        '[09:54:14 INFO]: Preparing level "world" (Overworld, Nether, End)',
        '[09:54:18 INFO]: Done (4.21s)! Server listening on port 25565.',
        '[09:55:01 JOIN]: Player "JeanLuca" connected from 178.12.99.12',
        '[09:55:40 INFO]: Memory: 3.2 GB / 8.0 GB (Allocated 40%)',
    ]);
    const [cpuUsage, setCpuUsage] = useState<number>(18);
    const [ramUsage, setRamUsage] = useState<number>(3.2);

    useEffect(() => {
        if (serverState !== 'online') return;
        const interval = setInterval(() => {
            setCpuUsage(Math.floor(Math.random() * 12) + 14);
            setRamUsage(parseFloat((Math.random() * 0.3 + 3.1).toFixed(1)));
        }, 3000);
        return () => clearInterval(interval);
    }, [serverState]);

    const handleAction = (action: 'start' | 'stop' | 'restart') => {
        if (action === 'stop') {
            setServerState('stopping');
            setLogs((prev) => [...prev, `[11:58:01 WARN]: Sending SIGTERM to server...`]);
            setTimeout(() => {
                setServerState('offline');
                setCpuUsage(0);
                setRamUsage(0);
                setLogs((prev) => [...prev, `[11:58:02 INFO]: Server stopped.`]);
            }, 1000);
        } else if (action === 'start') {
            setServerState('starting');
            setLogs((prev) => [...prev, `[11:58:05 INFO]: Booting paper-1.21.jar...`]);
            setTimeout(() => {
                setServerState('online');
                setCpuUsage(18);
                setRamUsage(3.2);
                setLogs((prev) => [...prev, `[11:58:08 INFO]: Server is ONLINE on port 25565.`]);
            }, 1000);
        } else if (action === 'restart') {
            setServerState('starting');
            setLogs((prev) => [...prev, `[11:58:10 WARN]: Rebooting process...`]);
            setTimeout(() => {
                setServerState('online');
                setCpuUsage(16);
                setRamUsage(3.2);
                setLogs((prev) => [...prev, `[11:58:12 INFO]: Reboot complete.`]);
            }, 1000);
        }
    };

    return (
        <section id="panel-preview" className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
            <div className="text-center mb-12">
                <div className="inline-flex items-center gap-2 rounded-full border border-rose-500/30 bg-rose-500/10 px-3.5 py-1 text-xs font-semibold text-rose-400 mb-4 backdrop-blur-sm">
                    <Terminal className="h-3.5 w-3.5" />
                    Unser Intuitives Control Panel
                </div>
                <h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
                    So sieht deine Server-Steuerung in Echtzeit aus
                </h2>
                <p className="mt-3 text-slate-400 max-w-2xl mx-auto text-sm sm:text-base">
                    Verwalte deine Instanzen mit unserem modernen Web-Dashboard: KVM-Konsole, Power-Controls, Snapshots und Live-Metriken.
                </p>
            </div>

            {/* Actual Control Panel Replica Window */}
            <div className="rounded-3xl border border-[#311119] bg-[#070405] shadow-2xl shadow-red-950/60 overflow-hidden">
                {/* Browser top window bar */}
                <div className="bg-[#0a0507] px-6 py-3 border-b border-[#1f0d11] flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <div className="flex gap-1.5">
                            <span className="h-3 w-3 rounded-full bg-red-500/80 inline-block" />
                            <span className="h-3 w-3 rounded-full bg-yellow-500/80 inline-block" />
                            <span className="h-3 w-3 rounded-full bg-green-500/80 inline-block" />
                        </div>
                        <span className="text-xs font-mono text-slate-400">https://rosehosting.de/dashboard</span>
                    </div>
                    <span className="text-[11px] font-mono text-rose-400 font-bold bg-[#2b0f15] px-3 py-0.5 rounded-full border border-[#42151e]">
                        ROSE HOST Live Demo
                    </span>
                </div>

                {/* Dashboard Inner Container */}
                <div className="p-6 sm:p-8 space-y-6">
                    {/* Active Server Card */}
                    <div className="rounded-2xl border border-[#311119] bg-[#120709] p-5 space-y-4 shadow-xl">
                        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                            <div className="flex items-center gap-3.5">
                                <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-emerald-600 to-green-700 flex items-center justify-center text-white shadow-md flex-shrink-0">
                                    <Gamepad2 className="h-6 w-6" />
                                </div>
                                <div>
                                    <div className="flex items-center gap-3">
                                        <h3 className="font-bold text-white text-base">Minecraft Community Server #9</h3>
                                        <span
                                            className={`px-2 py-0.5 rounded-full text-[10px] font-mono font-semibold flex items-center gap-1 border ${
                                                serverState === 'online'
                                                    ? 'bg-emerald-950 text-emerald-400 border-emerald-800'
                                                    : serverState === 'offline'
                                                    ? 'bg-red-950 text-red-400 border-red-800'
                                                    : 'bg-yellow-950 text-yellow-400 border-yellow-800 animate-pulse'
                                            }`}
                                        >
                                            <span
                                                className={`h-1.5 w-1.5 rounded-full ${
                                                    serverState === 'online' ? 'bg-emerald-400 animate-ping' : 'bg-red-400'
                                                }`}
                                            />
                                            {serverState.toUpperCase()}
                                        </span>
                                    </div>
                                    <p className="text-xs font-mono text-slate-400 mt-0.5">
                                        185.220.101.44:25565 • Datacenter Frankfurt (DE-FRA-01)
                                    </p>
                                </div>
                            </div>

                            {/* Power Controls */}
                            <div className="flex items-center gap-2">
                                {serverState === 'offline' ? (
                                    <button
                                        onClick={() => handleAction('start')}
                                        className="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs flex items-center gap-1.5 shadow-md"
                                    >
                                        <Play className="h-3.5 w-3.5 fill-white" /> Start
                                    </button>
                                ) : (
                                    <>
                                        <button
                                            onClick={() => handleAction('restart')}
                                            className="px-4 py-2 rounded-xl bg-[#280e14] hover:bg-[#38131d] text-amber-300 border border-[#421721] font-bold text-xs flex items-center gap-1.5"
                                        >
                                            <RefreshCw className="h-3.5 w-3.5" /> Neustart
                                        </button>
                                        <button
                                            onClick={() => handleAction('stop')}
                                            className="px-4 py-2 rounded-xl bg-red-950/80 hover:bg-red-900 text-red-300 border border-red-800/80 font-bold text-xs flex items-center gap-1.5"
                                        >
                                            <Square className="h-3.5 w-3.5 fill-red-400" /> Stoppen
                                        </button>
                                    </>
                                )}
                                <a
                                    href="/server/manage"
                                    className="px-5 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow-md shadow-red-600/25 active:scale-95 transition-all"
                                >
                                    Verwalten →
                                </a>
                            </div>
                        </div>

                        {/* Specs meters */}
                        <div className="pt-3 border-t border-[#260e13] grid grid-cols-1 sm:grid-cols-3 gap-3">
                            <div className="bg-[#0a0406] p-3 rounded-xl border border-[#210a0f] space-y-1">
                                <div className="flex justify-between text-[11px] font-mono">
                                    <span className="text-slate-400">CPU-Auslastung</span>
                                    <span className="text-rose-400 font-bold">{cpuUsage}%</span>
                                </div>
                                <div className="w-full bg-[#050203] h-1.5 rounded-full overflow-hidden">
                                    <div className="bg-rose-500 h-full transition-all duration-500" style={{ width: `${cpuUsage}%` }} />
                                </div>
                            </div>

                            <div className="bg-[#0a0406] p-3 rounded-xl border border-[#210a0f] space-y-1">
                                <div className="flex justify-between text-[11px] font-mono">
                                    <span className="text-slate-400">RAM (DDR5 ECC)</span>
                                    <span className="text-red-400 font-bold">{ramUsage} GB / 8 GB</span>
                                </div>
                                <div className="w-full bg-[#050203] h-1.5 rounded-full overflow-hidden">
                                    <div className="bg-red-500 h-full transition-all duration-500" style={{ width: `${(ramUsage / 8) * 100}%` }} />
                                </div>
                            </div>

                            <div className="bg-[#0a0406] p-3 rounded-xl border border-[#210a0f] space-y-1">
                                <div className="flex justify-between text-[11px] font-mono">
                                    <span className="text-slate-400">NVMe PCIe 4.0 Storage</span>
                                    <span className="text-rose-300 font-bold">28.4 GB / 120 GB</span>
                                </div>
                                <div className="w-full bg-[#050203] h-1.5 rounded-full overflow-hidden">
                                    <div className="bg-rose-600 h-full" style={{ width: '23.6%' }} />
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Console Output Box */}
                    <div className="rounded-2xl border border-[#311119] bg-[#080305] p-4 font-mono text-xs space-y-2 shadow-inner">
                        <div className="flex items-center justify-between pb-2 border-b border-[#260e13] text-slate-400 text-[11px]">
                            <span className="flex items-center gap-2 text-rose-400 font-bold">
                                <Terminal className="h-3.5 w-3.5" /> Web SSH Terminal Console
                            </span>
                            <span className="text-emerald-400 font-semibold">● Live Output</span>
                        </div>
                        <div className="space-y-1 text-slate-300 max-h-[140px] overflow-y-auto">
                            {logs.map((log, i) => (
                                <div key={i}>{log}</div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};