import { Link, usePage } from '@inertiajs/react';
import { CreditCard, Headphones, LayoutGrid, LogOut, Plus, Server, Settings, ShieldCheck, ShoppingCart, Users } from 'lucide-react';
import React from 'react';

export function AppSidebar() {
    const page = usePage();
    const currentUrl = page.url;
    const user = (page.props as any)?.auth?.user;
    const isSuperadmin = !user || user.id == 1 || user.id == 2 || (user.email && user.email.toLowerCase().includes('admin')) || user.role === 'Superadmin' || user.role === 'admin';

    const navItems = [
        { title: 'Dashboard', href: '/dashboard', icon: LayoutGrid, active: currentUrl === '/dashboard' },
        { title: 'Meine Server', href: '/servers', icon: Server, active: currentUrl.startsWith('/servers') || currentUrl.startsWith('/server') },
        { title: 'Bestellungen', href: '/#products', icon: ShoppingCart, active: false },
        { title: 'Rechnungen', href: '/dashboard#billing', icon: CreditCard, active: false },
        { title: 'Support', href: '/dashboard#support', icon: Headphones, active: false },
        ...(isSuperadmin ? [{ title: 'Admin Panel', href: '/admin', icon: ShieldCheck, active: currentUrl.startsWith('/admin') }] : []),
    ];

    return (
        <aside className="w-64 bg-[#080506] border-r border-[#1f0d11] min-h-screen flex flex-col justify-between p-4 text-slate-300 select-none">
            {/* Top Brand Logo */}
            <div className="space-y-6">
                <Link href="/dashboard" className="flex items-center gap-3 px-2 py-1 group">
                    <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-red-600 to-rose-700 shadow-md shadow-red-600/25 group-hover:scale-105 transition-transform">
                        <Server className="h-5 w-5 text-white stroke-[2.5]" />
                    </div>
                    <div className="flex flex-col">
                        <span className="text-base font-extrabold tracking-wider text-white flex items-center gap-1 font-mono">
                            ROSE<span className="text-rose-500">HOST</span>
                        </span>
                        <span className="text-[10px] text-rose-400/70 font-mono tracking-widest uppercase">Cloud Control</span>
                    </div>
                </Link>

                {/* Main Nav Links */}
                <nav className="space-y-1.5 font-medium text-xs">
                    {navItems.map((item) => {
                        const IconComp = item.icon;
                        return (
                            <Link
                                key={item.title}
                                href={item.href}
                                className={`flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all ${
                                    item.active
                                        ? 'bg-[#220d12] text-white font-semibold shadow-inner border border-[#3b151e]'
                                        : 'text-slate-400 hover:text-white hover:bg-[#14080b]'
                                }`}
                            >
                                <IconComp className={`h-4 w-4 ${item.active ? 'text-rose-500' : 'text-slate-400'}`} />
                                <span>{item.title}</span>
                            </Link>
                        );
                    })}
                </nav>
            </div>

            {/* Bottom Credit Box & Settings/Logout */}
            <div className="space-y-4 pt-6 border-t border-[#1f0d11]">
                {/* Credit Box */}
                <div className="rounded-2xl border border-[#2b1016] bg-[#120709] p-4 space-y-2">
                    <span className="text-[10px] font-mono uppercase tracking-widest text-rose-400/80 font-bold block">
                        DEIN GUTHABEN
                    </span>
                    <div className="text-xl font-black text-white font-mono">
                        20.015,00 €
                    </div>
                    <button
                        onClick={() => {
                            const event = new CustomEvent('open-topup-modal');
                            window.dispatchEvent(event);
                        }}
                        className="w-full mt-2 py-2 px-3 rounded-xl bg-[#240e13] border border-[#3b151e] text-xs font-semibold text-rose-300 hover:bg-[#33131b] hover:text-white transition-all flex items-center justify-center gap-1.5 shadow-sm"
                    >
                        <Plus className="h-3.5 w-3.5" /> Guthaben aufladen
                    </button>
                </div>

                {/* Bottom options */}
                <div className="space-y-1 text-xs font-medium">
                    <a
                        href="/settings/profile"
                        className="flex items-center gap-3 px-3.5 py-2 rounded-xl text-slate-400 hover:text-white hover:bg-[#14080b] transition-all"
                    >
                        <Settings className="h-4 w-4 text-slate-400" />
                        <span>Einstellungen</span>
                    </a>
                    <Link
                        href="/logout"
                        method="post"
                        as="button"
                        className="w-full flex items-center gap-3 px-3.5 py-2 rounded-xl text-rose-400 hover:bg-rose-950/40 transition-all text-left"
                    >
                        <LogOut className="h-4 w-4 text-rose-400" />
                        <span>Ausloggen</span>
                    </Link>
                </div>
            </div>
        </aside>
    );
}