import { Link } from '@inertiajs/react';
import { Bed, BedDouble, Box, ChartCandlestick, DollarSign, Globe, Image, LayoutGrid, Puzzle, Settings, Settings2, Utensils, CalendarRange, CalendarSync } from 'lucide-react';
import { NavFooter } from '@/components/other/nav-footer';
import { NavMain } from '@/components/other/nav-main';
import { NavUser } from '@/components/other/nav-user';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { dashboard } from '@/routes';
import type { NavItem } from '@/types';
import AppLogo from './app-logo';

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: dashboard(),
        icon: LayoutGrid,
    },
    {
        title: 'Bookings',
        href: '/dashboard/bookings',
        icon: Box,
    },
    {
        title: 'Booking Calendar',
        href: '/dashboard/booking-calendar',
        icon: CalendarRange,
    },
    {
        title: 'Channel Manager',
        href: '/dashboard/channel-manager',
        icon: CalendarSync,
    },
    {
        title: 'Room Categories',
        href: '/dashboard/room-categories',
        icon: BedDouble,
    },
    {
        title: 'Rooms',
        href: '/dashboard/rooms',
        icon: Bed,
    },
    {
        title: 'Meal Packages',
        href: '/dashboard/meal-packages',
        icon: Utensils,
    },
    {
        title: 'Room Facilities',
        href: '/dashboard/facilities',
        icon: Puzzle,
    },
    {
        title: 'Price-Modifiers',
        href: '/dashboard/price-modifiers',
        icon: DollarSign,
    },
    {
        title: 'Price-Settings',
        href: '/dashboard/price-settings',
        icon: Settings2,
    },
    {
        title: 'Currency Settings',
        href: '/dashboard/currency-settings',
        icon: ChartCandlestick,
    },
    {
        title: 'Image Manage',
        href: '/dashboard/image-manage',
        icon: Image,
    },
    {
        title: 'Site Info',
        href: '/dashboard/site-info/contact',
        icon: Globe,
    },
    {
        title: 'Settings',
        href: '/dashboard/settings',
        icon: Settings,
    },
];

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,
    // },
];

export function AppSidebar() {
    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>
                <NavFooter items={footerNavItems} className="mt-auto" />
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}
