import { usePage } from '@inertiajs/react';
import type { Icon } from '@tabler/icons-react';
import {
    IconGridDots,
    IconHelp,
    IconMessageDots,
    IconUsers,
} from '@tabler/icons-react';
import * as React from 'react';

import AppLogoIcon from '@/components/app-logo-icon';
import { NavMain, type NavGroup, type NavItem } from '@/components/nav-main';
import { NavSecondary } from '@/components/nav-secondary';
import {
    Sidebar,
    SidebarContent,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { index as academicTerm } from '@/routes/admin/master/academic-terms';
import { index as departmentsRoute } from '@/routes/admin/master/departments';
import { index as lecturersRoute } from '@/routes/admin/users/lecturers';
import { index as studentsRoute } from '@/routes/admin/users/students';
import { index as administratorsRoute } from '@/routes/admin/users/administrators';
import { Building2, Calendar, GraduationCap, User, Users } from 'lucide-react';

const data: {
    navMain: (NavGroup | NavItem)[];
    navSecondary: { title: string; url: string; icon: Icon }[];
} = {
    navMain: [
        {
            name: 'Dasbor',
            url: '#',
            icon: IconGridDots,
        },
        {
            label: 'Master',
            items: [
                {
                    name: 'Periode Akademik',
                    url: academicTerm.url(),
                    icon: Calendar,
                },
                {
                    name: 'Jurusan',
                    url: departmentsRoute.url(),
                    icon: Building2,
                },
            ],
        },
        {
            label: 'Pengguna',
            items: [
                {
                    name: 'Administrator',
                    url: administratorsRoute.url(),
                    icon: User,
                },
                {
                    name: 'Dosen',
                    url: lecturersRoute.url(),
                    icon: Users,
                },
                {
                    name: 'Mahasiswa',
                    url: studentsRoute.url(),
                    icon: GraduationCap,
                },
            ],
        },
    ],
    navSecondary: [
        {
            title: 'Kritik dan Saran',
            url: '#',
            icon: IconMessageDots,
        },
        {
            title: 'Bantuan',
            url: '#',
            icon: IconHelp,
        },
    ],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
    const { name } = usePage().props;

    return (
        <Sidebar collapsible="icon" {...props}>
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton
                            asChild
                            className="data-[slot=sidebar-menu-button]:p-1.5!"
                        >
                            <a href="#">
                                <AppLogoIcon className="size-5! rounded-sm object-cover" />
                                <span className="text-base font-semibold">
                                    {name}
                                </span>
                            </a>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>
            <SidebarContent>
                <NavMain items={data.navMain} />
                <NavSecondary items={data.navSecondary} className="mt-auto" />
            </SidebarContent>
        </Sidebar>
    );
}