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 } from '@/routes';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/react';
import {
    Database,
    LayoutGrid,
    Building2,
    Briefcase,
    Users,
    MapPin,
    UserCheck,
    CreditCard,
    Tag,
    Building,
    Home,
    FileText,
    Calendar,
    Store,
    UserPlus,
    RotateCcw,
    CheckCircle,
    ClipboardPen,
    ListTodo
} from 'lucide-react';
import AppLogo from './app-logo';

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: dashboard(),
        icon: LayoutGrid,
    },
    {
        title: 'Task Management',
        href: '/task-manager',
        icon: ListTodo,
    },
    {
        title: 'Invoice Management',
        href: '/invoice-management',
        icon: ClipboardPen,
    },
    {
        title: 'Master',
        icon: Database,
        items: [
            {
                title: 'Client',
                href: '/master/client',
                icon: Building2,
            },
            {
                title: 'Job',
                href: '/master/job',
                icon: Briefcase,
            },
            {
                title: 'Member',
                href: '/master/member',
                icon: Users,
            },
            {
                title: 'Area',
                href: '/master/area',
                icon: MapPin,
            },
            {
                title: 'Associates',
                href: '/master/associates',
                icon: UserCheck,
            },
            {
                title: 'Bank To',
                href: '/master/bank-to',
                icon: CreditCard,
            },
            {
                title: 'Client Type',
                href: '/master/client-type',
                icon: Tag,
            },
            {
                title: 'Government Dept',
                href: '/master/government-dept',
                icon: Building,
            },
            {
                title: 'In House Dept',
                href: '/master/in-house-dept',
                icon: Home,
            },
            {
                title: 'Job Type',
                href: '/master/job-type',
                icon: FileText,
            },
            {
                title: 'Month Of',
                href: '/master/month-of',
                icon: Calendar,
            },
            {
                title: 'Outlet',
                href: '/master/outlet',
                icon: Store,
            },
            {
                title: 'Reference',
                href: '/master/reference',
                icon: UserPlus,
            },
            {
                title: 'Referral',
                href: '/master/referral',
                icon: UserPlus,
            },
            {
                title: 'Renewal Type',
                href: '/master/renewal-type',
                icon: RotateCcw,
            },
            {
                title: 'Status',
                href: '/master/status',
                icon: CheckCircle,
            },
        ],
    },
    {
        title: 'Report Management',
        icon: Database,
        items: [
            {
                title: 'Renewal',
                href: '/reports/renewal', // Updated path
                icon: Building2,
            },
            {
                title: 'Job',
                href: '/reports/job-status', // Updated path
                icon: Briefcase,
            },
            {
                title: 'Commission',
                href: '/reports/commission', // Updated path
                icon: Briefcase,
            },
        ],
    },
];

const footerNavItems: NavItem[] = [

];

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