import { Link, router, usePage } from '@inertiajs/react';
import { Toaster, toast } from 'sonner';
import {
    LayoutDashboard,
    CreditCard,
    Calendar,
    Users,
    User,
    LogOut,
    Menu,
    X,
} from 'lucide-react';
import { type PropsWithChildren, useEffect, useState } from 'react';

const navLinks = [
    { href: '/portal', label: 'Dashboard', icon: LayoutDashboard },
    { href: '/portal/membership', label: 'My Membership', icon: CreditCard },
    { href: '/portal/events', label: 'Events', icon: Calendar },
    { href: '/portal/directory', label: 'Directory', icon: Users },
    { href: '/portal/profile', label: 'Profile', icon: User },
];

export default function PortalLayout({ children }: PropsWithChildren) {
    const { auth, flash } = usePage().props;
    const user = (auth as { user: { name: string; email: string } }).user;
    const [mobileOpen, setMobileOpen] = useState(false);
    const currentUrl = usePage().url;
    const f = flash as { success?: string; error?: string; warning?: string; info?: string } | undefined;

    useEffect(() => {
        if (f?.success) toast.success(f.success);
        if (f?.error) toast.error(f.error);
        if (f?.warning) toast.warning(f.warning);
        if (f?.info) toast.info(f.info);
    }, [f]);

    useEffect(() => {
        document.body.style.overflow = mobileOpen ? 'hidden' : '';
        return () => { document.body.style.overflow = ''; };
    }, [mobileOpen]);

    const isActive = (href: string) =>
        href === '/portal' ? currentUrl === '/portal' : currentUrl.startsWith(href);

    return (
        <div className="flex min-h-screen flex-col bg-[#F0F5FB]">
            <header className="sticky top-0 z-50 bg-[#0A2647] shadow-sm">
                <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-3">
                    <Link href="/portal" className="flex items-center gap-3">
                        <span className="text-sm font-bold text-white">ABEC Africa</span>
                        <span className="hidden text-xs font-medium text-white/50 sm:block">#MyABEC</span>
                    </Link>

                    <nav className="hidden items-center gap-1 md:flex">
                        {navLinks.map((link) => (
                            <Link
                                key={link.href}
                                href={link.href}
                                className={`flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
                                    isActive(link.href)
                                        ? 'bg-white/20 text-white'
                                        : 'text-white/70 hover:bg-white/10 hover:text-white'
                                }`}
                            >
                                <link.icon className="h-4 w-4" />
                                {link.label}
                            </Link>
                        ))}
                        <button
                            onClick={() => router.post('/logout')}
                            className="ml-2 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white/70 transition-colors hover:bg-white/10 hover:text-white"
                        >
                            <LogOut className="h-4 w-4" />
                            Logout
                        </button>
                    </nav>

                    <button
                        onClick={() => setMobileOpen(!mobileOpen)}
                        className="flex h-10 w-10 items-center justify-center text-white md:hidden"
                    >
                        {mobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
                    </button>
                </div>

                {mobileOpen && (
                    <div className="border-t border-white/10 bg-[#071D35] px-6 py-4 md:hidden">
                        <p className="mb-3 text-xs text-white/50">Signed in as {user?.name}</p>
                        {navLinks.map((link) => (
                            <Link
                                key={link.href}
                                href={link.href}
                                onClick={() => setMobileOpen(false)}
                                className={`flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium ${
                                    isActive(link.href) ? 'bg-white/15 text-white' : 'text-white/70'
                                }`}
                            >
                                <link.icon className="h-4 w-4" />
                                {link.label}
                            </Link>
                        ))}
                        <button
                            onClick={() => router.post('/logout')}
                            className="mt-2 flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-white/70"
                        >
                            <LogOut className="h-4 w-4" />
                            Logout
                        </button>
                    </div>
                )}
            </header>

            <main className="mx-auto w-full max-w-screen-xl flex-1 px-6 py-8 lg:px-12">{children}</main>

            <footer className="border-t border-[#C8D8EC] bg-white px-6 py-6 lg:px-12">
                <p className="text-center text-xs text-[#4A6585]">
                    &copy; {new Date().getFullYear()} African Biomedical Engineering Consortium. All rights reserved.
                </p>
            </footer>

            <Toaster position="top-right" richColors closeButton />
        </div>
    );
}