import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { type NavItem, SharedData, UserCan } from '@/types';
import { Link, usePage } from '@inertiajs/react';
import {
    LayoutGrid,
    Users,
    Building2,
    FileText,
    Key,
    Shield,
} from 'lucide-react';
import AppLogo from './app-logo';
import { Separator } from '@radix-ui/react-separator';

export function AppSidebar() {
    const page = usePage<SharedData>();
    const can = usePage().props.userCan as UserCan;

    // Main navigation - always visible
    const mainNavItems: NavItem[] = [
        {
            title: 'Dashboard',
            href: '/',
            icon: LayoutGrid,
        },
    ];

    // Admin navigation - permission-gated
    const adminNavItems: (NavItem & { permission?: string })[] = [
        {
            title: 'Utilisateurs',
            href: '/user-management/users',
            icon: Users,
            permission: 'access_users',
        },
        {
            title: 'Clients',
            href: '/user-management/clients',
            icon: Building2,
            permission: 'access_clients',
        },
        {
            title: 'Rôles & Permissions',
            href: '/user-management/roles',
            icon: Shield,
            permission: 'access_roles',
        },
        {
            title: 'Documents',
            href: '/documents',
            icon: FileText,
            permission: 'access_documents',
        },
        {
            title: 'API Tokens',
            href: '/api-tokens',
            icon: Key,
            permission: 'manage_api_tokens',
        },
    ];

    return (
        <Sidebar collapsible="icon" variant="inset">
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild>
                            <Link href="/">
                                <AppLogo />
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>

            <SidebarContent>
                <NavMain items={mainNavItems} />

                {adminNavItems.some((item) => !item.permission || can[item.permission]) && (
                    <SidebarGroup className="px-2 py-0 mt-6">
                        <SidebarGroupLabel>Administration</SidebarGroupLabel>
                        <SidebarMenu>
                            {adminNavItems
                                .filter((item) => !item.permission || can[item.permission])
                                .map((item) => (
                                    <SidebarMenuItem key={item.title}>
                                        <SidebarMenuButton
                                            asChild
                                            isActive={page.url.startsWith(item.href)}
                                            tooltip={{ children: item.title }}
                                        >
                                            <Link href={item.href}>
                                                {item.icon && <item.icon />}
                                                <span>{item.title}</span>
                                            </Link>
                                        </SidebarMenuButton>
                                    </SidebarMenuItem>
                                ))}
                        </SidebarMenu>
                    </SidebarGroup>
                )}
            </SidebarContent>

            <SidebarFooter>
                <Separator className="my-2 border-t" />
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}