/* eslint-disable @typescript-eslint/no-explicit-any */
import { Link, usePage } from '@inertiajs/react';
import { LayoutGrid, Users, Briefcase, Building2, SquareUser, Wallet, CalendarClock } from 'lucide-react';
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 { dashboard } from '@/routes';
import type { NavItem, SharedData } from '@/types';
import AppLogo from './app-logo';

export function AppSidebar() {
    const { auth } = usePage<SharedData>().props;
    const userRole = auth.user.role;

    const mainNavItems: NavItem[] = [
        {
            title: 'Dashboard',
            href: userRole === 'admin' ? '/dashboard' : '/employee/index',
            icon: LayoutGrid,
        },
        ...(userRole === 'admin' ? [
            {
                title: 'Manajemen Karyawan',
                href: '/admin/employees',
                icon: Users,
            },
            {
                title: 'Manajemen Departemen',
                href: '/admin/departments',
                icon: Building2,
            },
            {
                title: 'Manajemen Jabatan',
                href: '/admin/positions',
                icon: Briefcase,
            },
            {
                title: 'Manajemen Absensi',
                href: '/admin/attendance',
                icon: CalendarClock,
            },
            {
                title: 'Manajemen Gaji',
                href: '/admin/payrolls',
                icon: Wallet,
            },
            {
                title: 'Manajemen Pengguna',
                href: '/admin/users',
                icon: SquareUser,
            },
        ] : []),
        ...(userRole === 'employee' ? [
            {
                title: 'Absensi',
                href: '/employee/attendances',
                icon: CalendarClock,
            },
        ] : []),
    ];

    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>
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}