import { AppSidebar } from '@/components/app-sidebar';
import { DeployModal } from '@/components/dashboard/DeployModal';
import { ServerConsoleModal } from '@/components/dashboard/ServerConsoleModal';
import { ServerInstance } from '@/components/dashboard/ServerList';
import { Head, Link, usePage } from '@inertiajs/react';
import { Check, Copy, Cpu, Gamepad2, Grid, HardDrive, List, Megaphone, Play, Plus, RefreshCw, Search, Server, Square } from 'lucide-react';
import React, { useEffect, useState } from 'react';

export default function Servers() {
    const { auth } = usePage<any>().props;
    const [servers, setServers] = useState<ServerInstance[]>([]);
    const [searchQuery, setSearchQuery] = useState('');
    const [categoryFilter, setCategoryFilter] = useState<'all' | 'game' | 'vps' | 'metal'>('all');
    const [statusFilter, setStatusFilter] = useState<'all' | 'online' | 'offline'>('all');
    const [viewMode, setViewMode] = useState<'grid' | 'table'>('grid');
    const [copiedIp, setCopiedIp] = useState<string | null>(null);

    const [isDeployOpen, setIsDeployOpen] = useState(false);
    const [consoleServer, setConsoleServer] = useState<ServerInstance | null>(null);

    // Fetch real servers from backend API
    useEffect(() => {
        fetch('/api/minecraft/list')
            .then((res) => res.json())
            .then((data) => {
                if (data && data.success && Array.isArray(data.servers)) {
                    const currentUser = auth?.user;
                    const isOwner = currentUser && (currentUser.id === 1 || currentUser.role === 'Superadmin' || currentUser.role === 'admin');

                    let serverList = data.servers;
                    if (!isOwner) {
                        const userNumId = `#${1000 + (currentUser?.id || 1)}`;
                        const rawId = String(currentUser?.id || '');
                        serverList = data.servers.filter((s: any) => {
                            return (
                                s.customerId === userNumId ||
                                s.customer_id === userNumId ||
                                s.customerId === rawId ||
                                s.customer_id === rawId ||
                                s.user_id === rawId ||
                                s.customerName?.toLowerCase() === currentUser?.name?.toLowerCase()
                            );
                        });
                    }

                    const formatted = serverList.map((srv: any) => ({
                        id: srv.id || `srv-mc-${srv.port || 25565}`,
                        name: srv.name || 'Minecraft Server',
                        type: srv.type || 'Gameserver Paper 1.21',
                        ip: srv.ip || `${data?.hostIp || '185.220.101.44'}:${srv.port || 25565}`,
                        location: srv.node || 'Frankfurt (DE)',
                        flag: '🇩🇪',
                        vcpu: srv.cpu || 4,
                        ram: srv.ram || 8,
                        storage: srv.storage || 25,
                        status: srv.status || 'online',
                        port: srv.port || 25565,
                    }));

                    setServers(formatted);
                }
            })
            .catch(() => {});
    }, []);

    const handlePower = (id: string, action: 'start' | 'stop' | 'restart') => {
        fetch('/api/minecraft/power', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '',
            },
            body: JSON.stringify({ id, action }),
        }).catch(() => {});

        setServers((prev) =>
            prev.map((srv) => {
                if (srv.id !== id) return srv;
                if (action === 'stop') {
                    return { ...srv, status: 'offline', cpuUsage: 0, ramUsage: 0 };
                } else if (action === 'start') {
                    return { ...srv, status: 'online', cpuUsage: 14, ramUsage: 2.1 };
                } else {
                    return { ...srv, status: 'starting' };
                }
            })
        );
    };

    const copyToClipboard = (ip: string) => {
        navigator.clipboard.writeText(ip);
        setCopiedIp(ip);
        setTimeout(() => setCopiedIp(null), 2000);
    };

    // Filter Logic
    const filteredServers = servers.filter((srv) => {
        const matchesSearch =
            srv.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
            srv.ip.toLowerCase().includes(searchQuery.toLowerCase()) ||
            srv.location.toLowerCase().includes(searchQuery.toLowerCase());

        const matchesStatus = statusFilter === 'all' || srv.status === statusFilter;

        let matchesCat = true;
        const typeLower = (srv.type || '').toLowerCase();
        if (categoryFilter === 'game') matchesCat = typeLower.includes('game') || typeLower.includes('paper') || typeLower.includes('mc');
        if (categoryFilter === 'vps') matchesCat = typeLower.includes('vps');
        if (categoryFilter === 'metal') matchesCat = typeLower.includes('bare') || typeLower.includes('metal');

        return matchesSearch && matchesStatus && matchesCat;
    });

    const [maintenance, setMaintenance] = useState<{ active: boolean; message: string }>({ active: false, message: '' });

    React.useEffect(() => {
        fetch('/api/admin/maintenance')
            .then((res) => res.json())
            .then((data) => {
                if (data.success && data.active) {
                    setMaintenance({ active: true, message: data.message });
                }
            })
            .catch(() => {});
    }, []);

    return (
        <>
            <Head title="Meine Server - Rose Hosting" />

            {/* Global Maintenance Banner */}
            {maintenance.active && (
                <div className="bg-gradient-to-r from-red-950 via-rose-900 to-red-950 border-b border-red-700/80 px-6 py-2.5 text-center text-xs font-mono font-bold text-white shadow-xl flex items-center justify-center gap-3 animate-pulse z-50">
                    <Megaphone className="h-4 w-4 text-amber-300 flex-shrink-0" />
                    <span>{maintenance.message}</span>
                </div>
            )}

            <div className="flex min-h-screen bg-[#070405] text-slate-100 font-sans selection:bg-rose-600 selection:text-white">
                {/* Left Sidebar */}
                <AppSidebar />

                {/* Main Body */}
                <main className="flex-1 flex flex-col min-w-0 bg-[#070405]">
                    {/* Top Header */}
                    <header className="sticky top-0 z-40 bg-[#070405]/90 backdrop-blur-md border-b border-[#260f14] px-6 py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                        <div>
                            <h1 className="text-xl font-extrabold text-white tracking-tight flex items-center gap-2">
                                <Server className="h-5 w-5 text-rose-400" /> Meine Server & Instanzen
                            </h1>
                            <p className="text-xs text-slate-400 mt-0.5">
                                Verwalte alle deine gebuchten KVM-Root-Server, Spiele-Nodes & Bare-Metal Instanzen.
                            </p>
                        </div>

                        <button
                            onClick={() => setIsDeployOpen(true)}
                            className="flex items-center gap-1.5 bg-red-600 hover:bg-red-700 text-white px-4 py-2.5 rounded-xl text-xs font-bold shadow-lg shadow-red-600/25 active:scale-95 transition-all self-start sm:self-auto"
                        >
                            <Plus className="h-4 w-4 stroke-[3]" />
                            Neuen Server erstellen
                        </button>
                    </header>

                    {/* Page Content Container */}
                    <div className="p-6 sm:p-8 space-y-6 max-w-7xl mx-auto w-full">
                        {/* Search & Filter Toolbar */}
                        <div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-4 bg-[#0c0507] border border-[#260e13] p-4 rounded-2xl">
                            {/* Search Input */}
                            <div className="relative flex-1 max-w-md">
                                <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
                                <input
                                    type="text"
                                    value={searchQuery}
                                    onChange={(e) => setSearchQuery(e.target.value)}
                                    placeholder="Suche nach Server-Name, IP oder Standort..."
                                    className="w-full bg-[#070405] border border-[#36131b] rounded-xl pl-10 pr-4 py-2 text-xs font-medium text-slate-200 placeholder:text-slate-500 outline-none focus:border-red-500 transition-colors"
                                />
                            </div>

                            {/* View Switcher */}
                            <div className="flex items-center gap-1 bg-[#070405] p-1 rounded-xl border border-[#36131b]">
                                <button
                                    onClick={() => setViewMode('grid')}
                                    className={`p-1.5 rounded-lg transition-all ${
                                        viewMode === 'grid' ? 'bg-[#1c0a0e] text-white' : 'text-slate-500 hover:text-white'
                                    }`}
                                    title="Rasteransicht"
                                >
                                    <Grid className="h-4 w-4" />
                                </button>
                                <button
                                    onClick={() => setViewMode('table')}
                                    className={`p-1.5 rounded-lg transition-all ${
                                        viewMode === 'table' ? 'bg-[#1c0a0e] text-white' : 'text-slate-500 hover:text-white'
                                    }`}
                                    title="Listenansicht"
                                >
                                    <List className="h-4 w-4" />
                                </button>
                            </div>
                        </div>

                        {/* EMPTY STATE */}
                        {filteredServers.length === 0 ? (
                            <div className="rounded-3xl border border-[#260e13] bg-[#0c0507] p-12 text-center space-y-4 shadow-xl">
                                <div className="h-16 w-16 rounded-2xl bg-red-600/20 border border-red-500/30 text-rose-400 flex items-center justify-center mx-auto">
                                    <Server className="h-8 w-8" />
                                </div>
                                <h3 className="font-bold text-white text-lg">Keine aktiven Server gefunden</h3>
                                <p className="text-xs text-slate-400 max-w-md mx-auto">
                                    Du hast aktuell noch keine aktiven Server gebucht. Erstelle jetzt deinen ersten Minecraft-Server oder Cloud VPS!
                                </p>
                                <button
                                    onClick={() => setIsDeployOpen(true)}
                                    className="mt-2 px-6 py-3 rounded-xl bg-red-600 hover:bg-red-700 text-white text-xs font-bold shadow-lg shadow-red-600/25 active:scale-95 transition-all inline-flex items-center gap-2"
                                >
                                    <Plus className="h-4 w-4" /> Neuen Server erstellen
                                </button>
                            </div>
                        ) : viewMode === 'grid' ? (
                            /* GRID VIEW MODE */
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                {filteredServers.map((srv) => (
                                    <div
                                        key={srv.id}
                                        className="rounded-2xl border border-[#260e13] bg-[#0c0507] p-5 hover:border-rose-500/60 transition-all shadow-xl space-y-4 flex flex-col justify-between group"
                                    >
                                        <div>
                                            <div className="flex items-start justify-between gap-3">
                                                <div className="flex items-center gap-3">
                                                    <span className="text-2xl">{srv.flag}</span>
                                                    <div>
                                                        <h3 className="font-bold text-white text-sm group-hover:text-rose-400 transition-colors">
                                                            {srv.name}
                                                        </h3>
                                                        <span className="text-[10px] font-mono font-medium px-2 py-0.5 rounded bg-[#1c0a0e] text-slate-300 border border-[#38131d] inline-block mt-0.5">
                                                            {srv.type}
                                                        </span>
                                                    </div>
                                                </div>

                                                <span
                                                    className={`px-2.5 py-1 rounded-full text-[10px] font-mono font-bold uppercase flex items-center gap-1 border ${
                                                        srv.status === 'online'
                                                            ? 'bg-emerald-950 text-emerald-400 border-emerald-800'
                                                            : 'bg-red-950 text-red-400 border-red-800'
                                                    }`}
                                                >
                                                    <span
                                                        className={`h-1.5 w-1.5 rounded-full ${
                                                            srv.status === 'online' ? 'bg-emerald-400 animate-ping' : 'bg-red-400'
                                                        }`}
                                                    />
                                                    {srv.status}
                                                </span>
                                            </div>

                                            {/* IP Address */}
                                            <div className="mt-3 pt-3 border-t border-[#1f0b0f] flex items-center justify-between font-mono text-xs">
                                                <span className="text-rose-400 font-bold flex items-center gap-1.5">
                                                    {srv.ip}
                                                    <button
                                                        onClick={() => copyToClipboard(srv.ip)}
                                                        className="text-slate-500 hover:text-rose-400"
                                                        title="IP Kopieren"
                                                    >
                                                        {copiedIp === srv.ip ? (
                                                            <Check className="h-3 w-3 text-emerald-400" />
                                                        ) : (
                                                            <Copy className="h-3 w-3" />
                                                        )}
                                                    </button>
                                                </span>
                                                <span className="text-[11px] text-slate-500">{srv.location}</span>
                                            </div>
                                        </div>

                                        {/* Specs */}
                                        <div className="space-y-2 pt-2 text-xs font-mono">
                                            <div className="flex justify-between text-slate-400 text-[11px]">
                                                <span>CPU ({srv.vcpu} Cores)</span>
                                                <span className="text-rose-400 font-bold">{srv.cpuUsage}%</span>
                                            </div>
                                            <div className="w-full bg-[#070405] h-1.5 rounded-full overflow-hidden border border-[#210a0f]">
                                                <div className="bg-rose-500 h-full" style={{ width: `${srv.cpuUsage}%` }} />
                                            </div>
                                        </div>

                                        {/* Actions Footer */}
                                        <div className="pt-3 border-t border-[#1f0b0f] flex items-center justify-between gap-2">
                                            <Link
                                                href={`/server/manage?id=${srv.id}`}
                                                className="flex-1 py-2 px-3 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs text-center shadow-md active:scale-95 transition-all"
                                            >
                                                Verwalten
                                            </Link>

                                            <div className="flex items-center gap-1">
                                                {srv.status === 'offline' ? (
                                                    <button
                                                        onClick={() => handlePower(srv.id, 'start')}
                                                        className="p-2 rounded-xl bg-emerald-950 border border-emerald-800 text-emerald-400 hover:bg-emerald-900"
                                                        title="Starten"
                                                    >
                                                        <Play className="h-3.5 w-3.5 fill-emerald-400" />
                                                    </button>
                                                ) : (
                                                    <button
                                                        onClick={() => handlePower(srv.id, 'stop')}
                                                        className="p-2 rounded-xl bg-red-950 border border-red-800 text-red-400 hover:bg-red-900"
                                                        title="Stoppen"
                                                    >
                                                        <Square className="h-3.5 w-3.5 fill-red-400" />
                                                    </button>
                                                )}
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        ) : (
                            /* TABLE VIEW MODE */
                            <div className="rounded-2xl border border-[#260e13] bg-[#0c0507] p-6 shadow-xl overflow-x-auto">
                                <table className="w-full text-left text-xs font-mono">
                                    <thead className="border-b border-[#1f0b0f] text-slate-400 uppercase text-[10px]">
                                        <tr>
                                            <th className="pb-3">Server Name</th>
                                            <th className="pb-3">Typ</th>
                                            <th className="pb-3">IP Adresse</th>
                                            <th className="pb-3">Standort</th>
                                            <th className="pb-3">Specs</th>
                                            <th className="pb-3">Status</th>
                                            <th className="pb-3 text-right">Aktionen</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-[#1f0b0f]">
                                        {filteredServers.map((srv) => (
                                            <tr key={srv.id} className="hover:bg-[#14070a] transition-colors">
                                                <td className="py-4 font-bold text-white font-sans">{srv.name}</td>
                                                <td className="py-4 text-slate-300">{srv.type}</td>
                                                <td className="py-4 text-rose-400 font-bold">{srv.ip}</td>
                                                <td className="py-4 text-slate-300">{srv.location}</td>
                                                <td className="py-4 text-slate-300">
                                                    {srv.vcpu} Cores / {srv.ram} GB RAM / {srv.storage} GB NVMe
                                                </td>
                                                <td className="py-4">
                                                    <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase bg-emerald-950 text-emerald-400 border border-emerald-800">
                                                        {srv.status}
                                                    </span>
                                                </td>
                                                <td className="py-4 text-right">
                                                    <Link
                                                        href={`/server/manage?id=${srv.id}`}
                                                        className="px-3 py-1.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs"
                                                    >
                                                        Verwalten
                                                    </Link>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        )}
                    </div>
                </main>
            </div>

            {/* Console Modal */}
            <ServerConsoleModal server={consoleServer} onClose={() => setConsoleServer(null)} />

            {/* Deploy Modal */}
            <DeployModal isOpen={isDeployOpen} onClose={() => setIsDeployOpen(false)} />
        </>
    );
}