import { Link, usePage } from '@inertiajs/react';
import {
    Award,
    BarChart3,
    Box,
    ChevronRight,
    Cog,
    Droplets,
    Image,
    Layers,
    LayoutDashboard,
    LogOut,
    Menu,
    Moon,
    PanelLeftClose,
    PanelLeftOpen,
    ShieldCheck,
    ShoppingCart,
    Sun,
    Tag,
    Ticket,
    Truck,
    Users,
    X,
} from 'lucide-react';
import { ReactNode, useEffect, useState } from 'react';

import { cn } from '@/lib/utils';
import { type SharedData } from '@/types';

interface NavChild {
    label: string;
    href: string;
}

interface NavItem {
    label: string;
    href: string;
    icon: ReactNode;
    children?: NavChild[];
}

interface NavGroup {
    title?: string;
    items: NavItem[];
}

const NAV_GROUPS: NavGroup[] = [
    {
        items: [{ label: 'Dashboard', href: '/admin/dashboard', icon: <LayoutDashboard size={18} /> }],
    },
    {
        title: 'Commerce',
        items: [
            { label: 'Orders', href: '/admin/orders', icon: <ShoppingCart size={18} /> },
            { label: 'Customers', href: '/admin/customers', icon: <Users size={18} /> },
            { label: 'Coupons', href: '/admin/coupons', icon: <Ticket size={18} /> },
        ],
    },
    {
        title: 'Catalog',
        items: [
            { label: 'Products', href: '/admin/products', icon: <Box size={18} /> },
            { label: 'Fragrances', href: '/admin/fragrances', icon: <Droplets size={18} /> },
            { label: 'Attributes', href: '/admin/attributes', icon: <Tag size={18} /> },
            { label: 'Categories', href: '/admin/categories', icon: <Layers size={18} /> },
            { label: 'Brands', href: '/admin/brands', icon: <Award size={18} /> },
        ],
    },
    {
        title: 'Content',
        items: [{ label: 'Banners', href: '/admin/banners', icon: <Image size={18} /> }],
    },
    {
        title: 'Logistics',
        items: [{ label: 'Couriers', href: '/admin/couriers', icon: <Truck size={18} /> }],
    },
    {
        title: 'Analytics',
        items: [
            {
                label: 'Reports',
                href: '#',
                icon: <BarChart3 size={18} />,
                children: [
                    { label: 'Sales', href: '/admin/reports/sales' },
                    { label: 'Profit / Loss', href: '/admin/reports/profit-loss' },
                    { label: 'Inventory', href: '/admin/reports/inventory' },
                ],
            },
        ],
    },
    {
        title: 'System',
        items: [
            { label: 'Roles', href: '/admin/roles', icon: <ShieldCheck size={18} /> },
            { label: 'Settings', href: '/admin/settings', icon: <Cog size={18} /> },
        ],
    },
];

function SidebarItem({ item, currentUrl, collapsed }: { item: NavItem; currentUrl: string; collapsed: boolean }) {
    const isActive = currentUrl.startsWith(item.href) && item.href !== '#';
    const hasActiveChild = item.children?.some((c) => currentUrl.startsWith(c.href)) ?? false;
    const [open, setOpen] = useState(hasActiveChild);

    if (item.children) {
        return (
            <div>
                <button
                    onClick={() => setOpen((o) => !o)}
                    title={collapsed ? item.label : undefined}
                    className={cn(
                        'flex w-full items-center rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-200 group',
                        collapsed ? 'justify-center px-2.5' : 'gap-3',
                        hasActiveChild || open
                            ? 'bg-indigo-500/15 text-indigo-300'
                            : 'text-slate-400 hover:bg-white/5 hover:text-slate-100',
                    )}
                >
                    <span className="flex-shrink-0 transition-transform duration-200 group-hover:scale-110">{item.icon}</span>
                    {!collapsed && (
                        <>
                            <span className="flex-1 text-left">{item.label}</span>
                            <ChevronRight
                                size={13}
                                className={cn('opacity-60 transition-transform duration-200', open && 'rotate-90')}
                            />
                        </>
                    )}
                </button>
                {!collapsed && open && (
                    <div className="ml-9 mt-0.5 space-y-0.5 border-l border-white/8 pl-3">
                        {item.children.map((child) => (
                            <Link
                                key={child.href}
                                href={child.href}
                                className={cn(
                                    'block rounded-lg px-3 py-2 text-sm transition-all duration-200',
                                    currentUrl.startsWith(child.href)
                                        ? 'font-medium text-indigo-300'
                                        : 'text-slate-400 hover:text-slate-100',
                                )}
                            >
                                {child.label}
                            </Link>
                        ))}
                    </div>
                )}
            </div>
        );
    }

    return (
        <Link
            href={item.href}
            title={collapsed ? item.label : undefined}
            className={cn(
                'group flex items-center rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-200',
                collapsed ? 'justify-center px-2.5' : 'gap-3',
                isActive
                    ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-600/25'
                    : 'text-slate-400 hover:bg-white/5 hover:text-slate-100',
            )}
        >
            <span
                className={cn(
                    'flex-shrink-0 transition-transform duration-200 group-hover:scale-110',
                    isActive && 'drop-shadow-sm',
                )}
            >
                {item.icon}
            </span>
            {!collapsed && <span>{item.label}</span>}
        </Link>
    );
}

export default function AdminLayout({ children, title }: { children: ReactNode; title?: string }) {
    const { url } = usePage();
    const { admin, flash, name: appName } = usePage<SharedData>().props;

    const [mobileOpen, setMobileOpen] = useState(false);
    const [collapsed, setCollapsed] = useState(() => {
        if (typeof window !== 'undefined') {
            return localStorage.getItem('adminSidebarCollapsed') === 'true';
        }
        return false;
    });
    const [dark, setDark] = useState(() => {
        if (typeof window !== 'undefined') {
            return (
                localStorage.getItem('adminTheme') === 'dark' ||
                (!localStorage.getItem('adminTheme') && window.matchMedia('(prefers-color-scheme: dark)').matches)
            );
        }
        return false;
    });
    const [flashVisible, setFlashVisible] = useState(true);

    useEffect(() => {
        const root = document.documentElement;
        if (dark) {
            root.classList.add('dark');
            localStorage.setItem('adminTheme', 'dark');
        } else {
            root.classList.remove('dark');
            localStorage.setItem('adminTheme', 'light');
        }
    }, [dark]);

    useEffect(() => {
        localStorage.setItem('adminSidebarCollapsed', String(collapsed));
    }, [collapsed]);

    useEffect(() => {
        if (flash?.success || flash?.error) {
            setFlashVisible(true);
            const t = setTimeout(() => setFlashVisible(false), 5000);
            return () => clearTimeout(t);
        }
    }, [flash]);

    useEffect(() => {
        setMobileOpen(false);
    }, [url]);

    const adminInitial = admin?.name?.[0]?.toUpperCase() ?? 'A';

    return (
        <div className="flex h-screen overflow-hidden bg-slate-50 dark:bg-slate-900">
            {/* Mobile Backdrop */}
            <div
                className={cn(
                    'fixed inset-0 z-20 bg-black/60 backdrop-blur-sm transition-opacity duration-300 lg:hidden',
                    mobileOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none',
                )}
                onClick={() => setMobileOpen(false)}
            />

            {/* Sidebar */}
            <aside
                className={cn(
                    'fixed inset-y-0 left-0 z-30 flex w-64 flex-col bg-[#0B1222] transition-all duration-300 ease-in-out',
                    'lg:static lg:z-auto lg:translate-x-0',
                    mobileOpen ? 'translate-x-0' : '-translate-x-full',
                    collapsed ? 'lg:w-[4.5rem]' : 'lg:w-64',
                )}
            >
                {/* Logo */}
                <div
                    className={cn(
                        'flex h-16 flex-shrink-0 items-center border-b border-white/5',
                        collapsed ? 'lg:justify-center lg:px-2 px-5' : 'px-5',
                    )}
                >
                    {collapsed ? (
                        <>
                            <Link
                                href="/admin/dashboard"
                                className="hidden lg:flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white font-bold text-xs shadow-lg shadow-indigo-500/30"
                                title={appName}
                            >
                                {appName.slice(0, 2).toUpperCase()}
                            </Link>
                            <Link href="/admin/dashboard" className="flex lg:hidden items-center gap-3">
                                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white font-bold text-xs shadow-lg shadow-indigo-500/30">
                                    {appName.slice(0, 2).toUpperCase()}
                                </div>
                                <div className="min-w-0">
                                    <div className="text-sm font-bold text-white">{appName}</div>
                                    <div className="text-[10px] text-slate-400">Admin Panel</div>
                                </div>
                            </Link>
                        </>
                    ) : (
                        <Link href="/admin/dashboard" className="flex items-center gap-3">
                            <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white font-bold text-xs shadow-lg shadow-indigo-500/30">
                                {appName.slice(0, 2).toUpperCase()}
                            </div>
                            <div className="min-w-0">
                                <div className="text-sm font-bold text-white leading-tight">{appName}</div>
                                <div className="text-[10px] text-slate-400 leading-tight">Admin Panel</div>
                            </div>
                        </Link>
                    )}
                </div>

                {/* Nav */}
                <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 py-3">
                    {NAV_GROUPS.map((group, gi) => (
                        <div key={gi} className={gi > 0 ? 'mt-3' : ''}>
                            {group.title && !collapsed && (
                                <div className="mb-1.5 px-3 text-[10px] font-semibold uppercase tracking-widest text-slate-500">
                                    {group.title}
                                </div>
                            )}
                            {collapsed && group.title && gi > 0 && (
                                <div className="my-2.5 mx-auto h-px w-8 bg-white/8 hidden lg:block" />
                            )}
                            <div className="space-y-0.5">
                                {group.items.map((item) => (
                                    <SidebarItem key={item.label} item={item} currentUrl={url} collapsed={collapsed} />
                                ))}
                            </div>
                        </div>
                    ))}
                </nav>

                {/* Collapse toggle — desktop only */}
                <div className="hidden lg:flex justify-end border-t border-white/5 px-2 py-2">
                    <button
                        onClick={() => setCollapsed((c) => !c)}
                        title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
                        className="flex items-center justify-center rounded-lg p-2 text-slate-500 transition-all duration-200 hover:bg-white/5 hover:text-slate-300"
                    >
                        {collapsed ? <PanelLeftOpen size={15} /> : <PanelLeftClose size={15} />}
                    </button>
                </div>

                {/* User profile */}
                <div className={cn('border-t border-white/5 p-2.5', collapsed ? 'lg:flex lg:justify-center' : '')}>
                    {collapsed ? (
                        <>
                            <div className="hidden lg:flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white shadow-md">
                                {adminInitial}
                            </div>
                            <div className="flex lg:hidden items-center gap-2.5 rounded-xl px-2 py-2">
                                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white">
                                    {adminInitial}
                                </div>
                                <div className="flex-1 min-w-0">
                                    <div className="truncate text-sm font-medium text-white">{admin?.name ?? 'Admin'}</div>
                                    <div className="truncate text-xs text-slate-400">{admin?.role ?? 'Administrator'}</div>
                                </div>
                                <Link
                                    href="/admin/logout"
                                    method="post"
                                    as="button"
                                    className="text-slate-400 transition-colors hover:text-red-400"
                                >
                                    <LogOut size={15} />
                                </Link>
                            </div>
                        </>
                    ) : (
                        <div className="flex items-center gap-2.5 rounded-xl px-2 py-2 transition-colors hover:bg-white/5">
                            <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white shadow-md">
                                {adminInitial}
                            </div>
                            <div className="flex-1 min-w-0">
                                <div className="truncate text-sm font-medium text-white">{admin?.name ?? 'Admin'}</div>
                                <div className="truncate text-xs text-slate-400">{admin?.role ?? 'Administrator'}</div>
                            </div>
                            <Link
                                href="/admin/logout"
                                method="post"
                                as="button"
                                className="text-slate-400 transition-colors hover:text-red-400"
                                title="Logout"
                            >
                                <LogOut size={15} />
                            </Link>
                        </div>
                    )}
                </div>
            </aside>

            {/* Main */}
            <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
                {/* Header */}
                <header className="flex h-16 flex-shrink-0 items-center gap-3 border-b border-slate-200 bg-white px-4 dark:border-slate-700 dark:bg-slate-800 shadow-sm">
                    <button
                        onClick={() => setMobileOpen(true)}
                        className="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-600 transition-colors hover:bg-slate-50 lg:hidden dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700"
                    >
                        <Menu size={18} />
                    </button>

                    <div className="flex-1 min-w-0">
                        <h1 className="truncate text-sm font-semibold text-slate-700 dark:text-slate-100">
                            {title ?? 'Admin'}
                        </h1>
                    </div>

                    <button
                        onClick={() => setDark((d) => !d)}
                        className="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-500 transition-all duration-200 hover:bg-slate-50 hover:text-slate-700 dark:border-slate-600 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-200"
                        title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
                    >
                        {dark ? <Sun size={16} /> : <Moon size={16} />}
                    </button>
                </header>

                {/* Flash messages */}
                <div
                    className={cn(
                        'mx-4 overflow-hidden transition-all duration-500 ease-in-out',
                        (flash?.success || flash?.error) && flashVisible
                            ? 'mt-3 max-h-16 opacity-100'
                            : 'max-h-0 opacity-0',
                    )}
                >
                    {flash?.success && (
                        <div className="flex items-center gap-3 rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-2.5 text-sm font-medium text-emerald-700 dark:border-emerald-800/50 dark:bg-emerald-900/20 dark:text-emerald-300">
                            <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 text-xs dark:bg-emerald-800/50">
                                ✓
                            </span>
                            <span className="flex-1">{flash.success}</span>
                            <button onClick={() => setFlashVisible(false)} className="text-emerald-400 hover:text-emerald-600 transition-colors">
                                <X size={14} />
                            </button>
                        </div>
                    )}
                    {flash?.error && (
                        <div className="flex items-center gap-3 rounded-xl border border-red-100 bg-red-50 px-4 py-2.5 text-sm font-medium text-red-700 dark:border-red-800/50 dark:bg-red-900/20 dark:text-red-300">
                            <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 text-xs dark:bg-red-800/50">
                                ✕
                            </span>
                            <span className="flex-1">{flash.error}</span>
                            <button onClick={() => setFlashVisible(false)} className="text-red-400 hover:text-red-600 transition-colors">
                                <X size={14} />
                            </button>
                        </div>
                    )}
                </div>

                {/* Content */}
                <main className="flex-1 overflow-y-auto p-4 md:p-6 dark:text-slate-100">{children}</main>
            </div>
        </div>
    );
}