'use client';

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Package, Users, ArrowRight, Box, ShieldAlert } from 'lucide-react';
import { LoadingSpinner } from '@/components/ui/loading-spinner';
import { ThemeToggle } from '@/components/ThemeToggle';
import { LanguageToggle } from '@/components/LanguageToggle';
import { User as UserIcon } from 'lucide-react';
import { signOut } from 'next-auth/react';
import { useI18n } from '@/contexts/I18nContext';
import { Logo } from '@/components/Logo';
import { useModuleAccess } from '@/hooks/use-module-access';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

export default function ModulesPage() {
    const { data: session, status } = useSession();
    const router = useRouter();
    const { t } = useI18n();
    const hasEquipamentosAccess = useModuleAccess('equipamentos');
    const hasPeopleAccess = useModuleAccess('people');
    const hasInventoryAccess = useModuleAccess('inventory_events');

    const rootDomain = process.env.NEXT_PUBLIC_ROOT_DOMAIN || 'wibix.io';
    const protocol = typeof window !== 'undefined' ? window.location.protocol : 'https:';
    const superAdminUrl = `${protocol}//${rootDomain}/super-admin`;

    const safeT = (key: string, fallback: string) => {
        const value = t(key);

        if (!value || value === key) return fallback;
        return value;
    };

    if (status === 'loading') {
        return <LoadingSpinner />;
    }

    if (!session) {
        router.push('/login');
        return null;
    }

    const user = session.user as any;

    return (
        <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'>
                <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 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>
                        </div>
                        <div className='flex items-center 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')}</Link>
                                    </DropdownMenuItem>
                                    {(user.role === 'ADMIN' || user.role === 'SUPER_ADMIN') && (
                                        <>
                                            <DropdownMenuItem asChild>
                                                <Link href='/admin/users'>{t('nav.users')}</Link>
                                            </DropdownMenuItem>
                                            <DropdownMenuItem asChild>
                                                <Link href='/admin/audit'>{t('nav.audit')}</Link>
                                            </DropdownMenuItem>
                                            <DropdownMenuSeparator />
                                        </>
                                    )}
                                    <DropdownMenuItem
                                        onClick={() => {
                                            signOut({ callbackUrl: '/login' });
                                        }}
                                    >
                                        {t('nav.logout')}
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>
                    </div>
                </div>
            </nav>

            <main className='max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8'>
                <div className='mb-8'>
                    <h2 className='text-3xl font-bold text-gray-900 dark:text-white mb-2'>{t('modules.available')}</h2>
                    <p className='text-gray-600 dark:text-gray-400'>{t('modules.select')}</p>
                </div>

                <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
                    {user.role === 'SUPER_ADMIN' && (
                        <Card className='dark:bg-gray-800 hover:shadow-lg transition-shadow cursor-pointer group border-blue-500/50 dark:border-blue-500/30'>
                            <Link href={superAdminUrl}>
                                <CardHeader>
                                    <div className='flex items-center justify-between'>
                                        <div className='p-3 bg-blue-100 dark:bg-blue-900 rounded-lg'>
                                            <ShieldAlert className='h-8 w-8 text-blue-600 dark:text-blue-400' />
                                        </div>
                                        <ArrowRight className='h-5 w-5 text-gray-400 group-hover:text-blue-600 transition-colors' />
                                    </div>
                                    <CardTitle className='mt-4 dark:text-white'>
                                        {safeT('modules.superadmin.title', 'Painel Master (WibiX)')}
                                    </CardTitle>
                                    <CardDescription className='dark:text-gray-400'>
                                        {safeT('modules.superadmin.description', 'Administração global da plataforma')}
                                    </CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <p className='text-sm text-gray-600 dark:text-gray-400'>
                                        {safeT(
                                            'modules.superadmin.details',
                                            'Organizações, integrações globais e permissões.',
                                        )}
                                    </p>
                                </CardContent>
                            </Link>
                        </Card>
                    )}

                    {hasEquipamentosAccess === true && (
                        <Card className='dark:bg-gray-800 hover:shadow-lg transition-shadow cursor-pointer group'>
                            <Link href='/module-equipament/admin'>
                                <CardHeader>
                                    <div className='flex items-center justify-between'>
                                        <div className='p-3 bg-blue-100 dark:bg-blue-900 rounded-lg'>
                                            <Package className='h-8 w-8 text-blue-600 dark:text-blue-400' />
                                        </div>
                                        <ArrowRight className='h-5 w-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors' />
                                    </div>
                                    <CardTitle className='mt-4 dark:text-white'>
                                        {safeT('modules.equipment.title', 'Equipamentos')}
                                    </CardTitle>
                                    <CardDescription className='dark:text-gray-400'>
                                        {safeT('modules.equipment.description', 'Gestão de equipamentos e frota')}
                                    </CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <p className='text-sm text-gray-600 dark:text-gray-400'>
                                        {safeT(
                                            'modules.equipment.details',
                                            'Controlo de manutenção, documentos e eventos de equipamentos',
                                        )}
                                    </p>
                                </CardContent>
                            </Link>
                        </Card>
                    )}

                    {hasPeopleAccess === true && (
                        <Card className='dark:bg-gray-800 hover:shadow-lg transition-shadow cursor-pointer group'>
                            <Link href='/module-people/admin'>
                                <CardHeader>
                                    <div className='flex items-center justify-between'>
                                        <div className='p-3 bg-green-100 dark:bg-green-900 rounded-lg'>
                                            <Users className='h-8 w-8 text-green-600 dark:text-green-400' />
                                        </div>
                                        <ArrowRight className='h-5 w-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors' />
                                    </div>
                                    <CardTitle className='mt-4 dark:text-white'>{t('modules.people.title')}</CardTitle>
                                    <CardDescription className='dark:text-gray-400'>
                                        {safeT('modules.people.description', 'Gestão de recursos humanos')}
                                    </CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <p className='text-sm text-gray-600 dark:text-gray-400'>
                                        {safeT('modules.people.details', 'Pessoas e colaboradores')}
                                    </p>
                                </CardContent>
                            </Link>
                        </Card>
                    )}

                    {hasInventoryAccess === true && (
                        <Card className='dark:bg-gray-800 hover:shadow-lg transition-shadow cursor-pointer group'>
                            <Link href='/module-inventory/dashboard'>
                                <CardHeader>
                                    <div className='flex items-center justify-between'>
                                        <div className='p-3 bg-orange-100 dark:bg-orange-900 rounded-lg'>
                                            <Box className='h-8 w-8 text-orange-600 dark:text-orange-400' />
                                        </div>
                                        <ArrowRight className='h-5 w-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors' />
                                    </div>
                                    <CardTitle className='mt-4 dark:text-white'>
                                        {safeT('modules.inventory_events.title', 'Inventário & Eventos')}
                                    </CardTitle>
                                    <CardDescription className='dark:text-gray-400'>
                                        {safeT(
                                            'modules.inventory_events.description',
                                            'Gestão de stock, produtos e eventos',
                                        )}
                                    </CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <p className='text-sm text-gray-600 dark:text-gray-400'>
                                        {safeT(
                                            'modules.inventory_events.details',
                                            'Controlo de itens e reservas para eventos',
                                        )}
                                    </p>
                                </CardContent>
                            </Link>
                        </Card>
                    )}
                </div>

                {hasEquipamentosAccess === false && hasPeopleAccess === false && hasInventoryAccess === false && (
                    <div className='text-center py-12'>
                        <p className='text-lg font-semibold text-gray-900 dark:text-white mb-2'>
                            {safeT('modules.noAccess', 'Nenhum módulo disponível')}
                        </p>
                        <p className='text-gray-600 dark:text-gray-400'>
                            {safeT(
                                'modules.noAccessMessage',
                                'Você não tem acesso a nenhum módulo. Entre em contato com o administrador.',
                            )}
                        </p>
                    </div>
                )}
            </main>
        </div>
    );
}