import { Link, usePage } from '@inertiajs/react';
import {
    Bell,
    CalendarDays,
    CalendarRange,
    LayoutGrid,
    ListChecks,
    PackageSearch,
    PackageCheck,
    PlusCircle,
    ServerCog,
    ShieldCheck,
} from 'lucide-react';
import AppLogo from '@/components/app-logo';
import { NavFooter } from '@/components/nav-footer';
import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import type { NavItem } from '@/types';

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: '/dashboard',
        icon: LayoutGrid,
    },
    { title: 'Equipamentos', href: '/equipamentos', icon: PackageSearch },
    { title: 'Nova requisição', href: '/requisicoes/nova', icon: PlusCircle },
    {
        title: 'As minhas requisições',
        href: '/requisicoes',
        icon: CalendarDays,
    },
    {
        title: 'O meu calendário',
        href: '/requisicoes/calendario',
        icon: CalendarRange,
    },
    { title: 'Notificações', href: '/notificacoes', icon: Bell },
];

const footerNavItems: NavItem[] = [
    {
        title: 'Privacidade e condições',
        href: '#',
        icon: ShieldCheck,
    },
];

export function AppSidebar() {
    const { can, unreadNotifications } = usePage().props;
    const userNavItems = mainNavItems.map((item) =>
        item.href === '/notificacoes' && unreadNotifications > 0
            ? { ...item, title: `Notificações (${unreadNotifications})` }
            : item,
    );
    const roleNavItems = can.approveReservations
        ? [
              ...userNavItems,
              {
                  title: 'Aprovações',
                  href: '/aprovacoes',
                  icon: ListChecks,
              },
          ]
        : userNavItems;
    const operationalNavItems = can.operateInventory
        ? [
              ...roleNavItems,
              {
                  title: 'Operações',
                  href: '/operacoes',
                  icon: PackageCheck,
              },
          ]
        : roleNavItems;
    const visibleNavItems = can.administer
        ? [
              ...operationalNavItems,
              {
                  title: 'Integração Snipe-IT',
                  href: '/administracao/snipe-it',
                  icon: ServerCog,
              },
          ]
        : operationalNavItems;

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

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

            <SidebarFooter>
                <NavFooter items={footerNavItems} className="mt-auto" />
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}