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 { SharedData, type NavItem } from '@/types';
import { Link, usePage } from '@inertiajs/react';
import { Book, LayoutGrid } from 'lucide-react';
import AppLogo from './app-logo';
import { DuaNavMain } from './nav-main-dua';
import { TigaNavMain } from './nav-main-tiga';

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

    let dashboardHref = '#';

    if (auth.user.role === 'admin') {
        dashboardHref = '/dashboard';
    } else if (auth.user.role === 'masyarakat') {
        dashboardHref = '/dashboard/masyarakat';
    }

    const mainNavItems: NavItem[] = [
        {
            title: 'Beranda',
            href: dashboardHref,
            icon: LayoutGrid,
        },
    ];

    let duaNavItems: NavItem[] = [];
    let tigaNavItems: NavItem[] = [];

    if (auth.user.role === 'admin') {
        duaNavItems.push(
            {
                title: 'Lokasi Kejadian',
                href: '/kejadian',
                icon: Book,
            },
            {
                title: 'Lokasi Air',
                href: '/lokasiair',
                icon: Book,
            },
            {
                title: 'Masyarakat',
                href: '/masyarakat',
                icon: Book,
            },
        );
        tigaNavItems.push({
            title: 'Pengguna',
            href: '/pengguna',
            icon: Book,
        });
    }

    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} />
                {auth.user.role === 'admin' && (
                    <div className="grid grid-cols-1 gap-4">
                        <DuaNavMain items={duaNavItems} />
                        <TigaNavMain items={tigaNavItems} />
                    </div>
                )}
            </SidebarContent>

            <SidebarFooter>
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}