import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail } from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/react';
import { LayoutGrid, Tags, BookMarked, Lightbulb, GraduationCap, Building, MapPin, Newspaper, FolderDot, Lock, Users, Key, Shield, LibraryBig } from 'lucide-react';
import AppLogo from './app-logo';

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: '/dashboard',
        icon: LayoutGrid,
    },
    {
        title: 'Administración',
        href: '#',
        icon: FolderDot,
        items: [
            {
                title: 'Categorías',
                href: '/categories',
                icon: Tags,
            },
            {
                title: 'Metodologías',
                href: '/metodologies',
                icon: BookMarked,
            },
            {
                title: 'Enfoques Pedagógicos',
                href: '/enfoque-pedagogicos',
                icon: Lightbulb,
            },
            {
                title: 'Niveles Educativos',
                href: '/education-levels',
                icon: GraduationCap,
            },
            {
                title: 'Instituciones',
                href: '/institutions',
                icon: Building,
            },
            // {
            //     title: 'Sedes',
            //     href: '/institution-sedes',
            //     icon: MapPin,
            // },
            {
                title: 'Áreas',
                href: '/areas',
                icon: LibraryBig,
            }
        ],
    },
    {
        title: 'Proyectos',
        href: '/projects',
        icon: Newspaper,
    },
    {
        title: 'Seguridad',
        href: '#',
        icon: Lock,
        items: [
            {
                title: 'Usuarios',
                href: '/users',
                icon: Users,
            },
            {
                title: 'Roles',
                href: '/roles',
                icon: Shield,
            },
            {
                title: 'Permisos',
                href: '/permissions',
                icon: Key,
            }
        ],
    }
];

const footerNavItems: NavItem[] = [];

export function AppSidebar() {
    return (
        <Sidebar collapsible="icon" variant="sidebar">
            <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>
            <SidebarRail />
        </Sidebar>
    );
}