'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Menu, LogOut, Calendar, Package, X, User as UserIcon } from 'lucide-react';
import { signOut, useSession } from 'next-auth/react';
import { ThemeToggle } from '@/components/ThemeToggle';
import { LanguageToggle } from '@/components/LanguageToggle';
import { useI18n } from '@/contexts/I18nContext';
import { Logo } from '@/components/Logo';
import { ModuleGuard } from '@/components/ModuleGuard';

export default function InventoryLayout({ children }: { children: React.ReactNode }) {
    const { data: session, status } = useSession();
    const pathname = usePathname();
    const router = useRouter();
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
    const { t } = useI18n();

    useEffect(() => {
        if (status === 'unauthenticated') {
            router.push('/login');
        }
    }, [status, router]);

    if (status === 'loading') {
        return <div className='flex h-screen items-center justify-center'>Loading...</div>;
    }

    if (!session) return null;

    const user = session.user as any;

    const navItems = [
        { href: '/module-inventory/inventory', label: 'Inventário', icon: Package },
        { href: '/module-inventory/events', label: 'Eventos', icon: Calendar },
    ];

    return (
        <ModuleGuard module='inventory_events'>
            <div className='min-h-screen bg-gray-50 dark:bg-gray-900'>
                <nav className='bg-white dark:bg-gray-800 border-b dark:border-gray-700 relative z-50'>
                    <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
                        <div className='flex justify-between h-16'>
                            <div className='flex'>
                                <div className='flex-shrink-0 flex items-center gap-3'>
                                    <Link
                                        href='/modules'
                                        className='flex items-center gap-2'
                                    >
                                        <Logo size='medium' />
                                        <span className='text-xl font-bold dark:text-white'>Módulos</span>
                                    </Link>
                                    <span className='hidden lg:inline text-sm text-gray-500 dark:text-gray-400 truncate max-w-[220px]'>
                                        / {t('modules.inventory.title') || 'Inventário'}
                                    </span>
                                </div>
                                <div className='hidden sm:ml-6 sm:flex sm:space-x-8'>
                                    {navItems.map((item) => (
                                        <Link
                                            key={item.href}
                                            href={item.href}
                                            className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
                                                pathname.startsWith(item.href)
                                                    ? 'border-blue-500 text-gray-900 dark:text-white'
                                                    : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-200'
                                            }`}
                                        >
                                            {item.label}
                                        </Link>
                                    ))}
                                </div>
                            </div>

                            <div className='flex items-center gap-2 sm:gap-3'>
                                <ThemeToggle />
                                <LanguageToggle />

                                <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                        <Button
                                            variant='ghost'
                                            size='icon'
                                            className='rounded-full border border-gray-300 dark:border-gray-700'
                                        >
                                            {user.name ? (
                                                <span className='text-xs font-semibold uppercase'>
                                                    {user.name
                                                        .split(' ')
                                                        .map((n: string) => n[0])
                                                        .join('')
                                                        .slice(0, 2)}
                                                </span>
                                            ) : (
                                                <UserIcon className='h-4 w-4' />
                                            )}
                                        </Button>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent
                                        align='end'
                                        className='w-56'
                                    >
                                        <div className='px-2 py-1.5 text-xs text-gray-500 dark:text-gray-400'>
                                            <div className='font-medium text-gray-900 dark:text-gray-100 truncate'>
                                                {user.name || user.email}
                                            </div>
                                            {user.email && user.name && <div className='truncate'>{user.email}</div>}
                                        </div>
                                        <DropdownMenuSeparator />
                                        <DropdownMenuItem asChild>
                                            <Link href='/account/profile'>{t('nav.profile') || 'Perfil'}</Link>
                                        </DropdownMenuItem>
                                        {(user.role === 'ADMIN' || user.role === 'SUPER_ADMIN') && (
                                            <>
                                                <DropdownMenuItem asChild>
                                                    <Link href='/admin/users'>{t('nav.users') || 'Utilizadores'}</Link>
                                                </DropdownMenuItem>
                                                <DropdownMenuItem asChild>
                                                    <Link href='/admin/audit'>{t('nav.audit') || 'Auditoria'}</Link>
                                                </DropdownMenuItem>
                                            </>
                                        )}
                                        <DropdownMenuSeparator />
                                        <DropdownMenuItem onClick={() => signOut({ callbackUrl: '/login' })}>
                                            {t('nav.logout') || 'Sair'}
                                        </DropdownMenuItem>
                                    </DropdownMenuContent>
                                </DropdownMenu>

                                <Button
                                    variant='ghost'
                                    size='icon'
                                    className='sm:hidden'
                                    onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                                >
                                    {mobileMenuOpen ? <X className='h-5 w-5' /> : <Menu className='h-5 w-5' />}
                                </Button>
                            </div>
                        </div>
                    </div>

                    {mobileMenuOpen && (
                        <div className='sm:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 animate-in slide-in-from-top duration-300'>
                            <div className='px-2 pt-2 pb-3 space-y-1'>
                                {navItems.map((item) => (
                                    <Link
                                        key={item.href}
                                        href={item.href}
                                        className={`block px-3 py-2 rounded-md text-base font-medium ${
                                            pathname.startsWith(item.href)
                                                ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white'
                                                : 'text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
                                        }`}
                                        onClick={() => setMobileMenuOpen(false)}
                                    >
                                        <div className='flex items-center gap-3'>
                                            <item.icon className='h-5 w-5' />
                                            {item.label}
                                        </div>
                                    </Link>
                                ))}
                                <div className='border-t dark:border-gray-700 my-2 pt-2'>
                                    <Button
                                        variant='ghost'
                                        className='w-full justify-start gap-3 px-3 py-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20'
                                        onClick={() => signOut()}
                                    >
                                        <LogOut className='h-5 w-5' />
                                        Sair
                                    </Button>
                                </div>
                            </div>
                        </div>
                    )}
                </nav>

                <main className='max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8'>{children}</main>
            </div>
        </ModuleGuard>
    );
}