import { Link, usePage } from '@inertiajs/react';
import {
    Building2,
    LayoutGrid,
    Network,
    Settings2,
    UserCog,
    Users,
} from 'lucide-react';
import AppLogo from '@/components/app-logo';
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 } from '@/types';

export function AppSidebar() {
    const { auth } = usePage().props;
    const mainNavItems: NavItem[] = [
        { title: 'Dashboard', href: dashboard(), icon: LayoutGrid },
        ...(!auth.user.is_platform_admin &&
        auth.permissions.includes('device.view')
            ? [{ title: 'Perangkat', href: '/devices', icon: Network }]
            : []),
        ...(!auth.user.is_platform_admin &&
        auth.permissions.includes('device.user.view')
            ? [
                  {
                      title: 'Users Perangkat',
                      href: '/device-users',
                      icon: UserCog,
                  },
              ]
            : []),
        ...(!auth.user.is_platform_admin &&
        auth.permissions.includes('device.credential.create')
            ? [
                  {
                      title: 'Pengaturan Perangkat',
                      href: '/device-settings',
                      icon: Settings2,
                  },
              ]
            : []),
        ...(auth.user.is_platform_admin
            ? [
                  {
                      title: 'Tenants',
                      href: '/administration/tenants',
                      icon: Building2,
                  },
              ]
            : []),
        ...(!auth.user.is_platform_admin &&
        auth.user.tenant_id &&
        auth.permissions.includes('user.view')
            ? [
                  {
                      title: 'Users',
                      href: `/administration/tenants/${auth.user.tenant_id}/users`,
                      icon: Users,
                  },
              ]
            : []),
    ];

    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>
    );
}