import { Link, usePage } from '@inertiajs/react';
import {
    Building2,
    CalendarDays,
    CreditCard,
    LayoutGrid,
    School,
} from 'lucide-react';
import AppLogo from '@/components/app-logo';
import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import { Badge } from '@/components/ui/badge';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { dashboard } from '@/routes';
import { index as billingIndex } from '@/routes/billing';
import { index as calendarIndex } from '@/routes/calendar';
import { index as classroomsIndex } from '@/routes/classrooms';
import { edit as companyEdit } from '@/routes/company';
import type { NavItem } from '@/types';

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: dashboard(),
        icon: LayoutGrid,
    },
    {
        title: 'Calendario',
        href: calendarIndex(),
        icon: CalendarDays,
    },
    {
        title: 'Aule',
        href: classroomsIndex(),
        icon: School,
    },
    {
        title: 'Crediti e piano',
        href: billingIndex(),
        icon: CreditCard,
    },
    {
        title: 'Impostazioni azienda',
        href: companyEdit(),
        icon: Building2,
    },
];

export function AppSidebar() {
    const { auth, bbbDriver } = usePage().props;

    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={mainNavItems} />
            </SidebarContent>

            <SidebarFooter>
                <SidebarGroup className="px-2 py-0 group-data-[collapsible=icon]:hidden">
                    <div className="flex flex-wrap items-center gap-1.5 px-2 py-1">
                        <Badge variant="secondary">
                            {auth.company?.credits_available ?? 0} crediti
                        </Badge>
                        {bbbDriver === 'fake' && (
                            <Badge
                                variant="outline"
                                className="text-muted-foreground"
                            >
                                BBB simulato
                            </Badge>
                        )}
                    </div>
                </SidebarGroup>
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}