import { NavFooter } from '@/components/nav-footer';
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, login, register } from '@/routes';
import { type NavItem, type SharedData } from '@/types';
import { Link, usePage } from '@inertiajs/react';
import { BookOpen, Folder, LayoutGrid, Home, Info, Mail, LogIn, UserPlus, Navigation, MapPin } from 'lucide-react';
import AppLogo from './app-logo';

const mainNavItems: NavItem[] = [
    {
        title: 'Home',
        href: '/',
        icon: Home,
    },
    {
        title: 'Explore',
        href: '/explore',
        icon: MapPin,
    },
    {
        title: 'Trip Planner',
        href: '/trip-planner',
        icon: Navigation,
    },
    {
        title: 'About',
        href: '/about',
        icon: Info,
    },
    {
        title: 'Contact',
        href: '/contact',
        icon: Mail,
    },
];

const footerNavItems: NavItem[] = [
    {
        title: 'Repository',
        href: 'https://github.com/laravel/react-starter-kit',
        icon: Folder,
    },
    {
        title: 'Documentation',
        href: 'https://laravel.com/docs/starter-kits#react',
        icon: BookOpen,
    },
];

const guestNavItems: NavItem[] = [
    {
        title: 'Log In',
        href: login(),
        icon: LogIn,
    },
    {
        title: 'Register',
        href: register(),
        icon: UserPlus,
    },
];

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

    return (
        <Sidebar collapsible="icon" variant="inset">
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild>
                            <Link href="/" prefetch>
                                <AppLogo />
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>

            <SidebarContent>
                <NavMain items={mainNavItems} />
                {isAuthenticated && (
                    <NavMain items={[{ title: 'Dashboard', href: dashboard(), icon: LayoutGrid }]} />
                )}
            </SidebarContent>

            <SidebarFooter>
                <NavFooter items={footerNavItems} className="mt-auto" />
                {isAuthenticated ? (
                    <NavUser />
                ) : (
                    <NavMain items={guestNavItems} />
                )}
            </SidebarFooter>
        </Sidebar>
    );
}