import { Link, usePage } from '@inertiajs/react';
import {
    Building2,
    FolderKanban,
    Globe,
    Inbox,
    LayoutGrid,
    MessageSquareQuote,
    Users,
} from 'lucide-react';
import AppLogo from '@/components/app-logo';
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, home } from '@/routes';
import { edit as companyEdit } from '@/routes/admin/company';
import { index as consultationsIndex } from '@/routes/admin/consultations';
import { index as projectsIndex } from '@/routes/admin/projects';
import { index as testimonialsIndex } from '@/routes/admin/testimonials';
import { index as usersIndex } from '@/routes/admin/users';
import type { NavItem } from '@/types';

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: dashboard(),
        icon: LayoutGrid,
    },
    {
        title: 'Inbox Konsultasi',
        href: consultationsIndex(),
        icon: Inbox,
    },
    {
        title: 'Portofolio',
        href: projectsIndex(),
        icon: FolderKanban,
    },
    {
        title: 'Info Perusahaan',
        href: companyEdit(),
        icon: Building2,
    },
    {
        title: 'Testimoni',
        href: testimonialsIndex(),
        icon: MessageSquareQuote,
    },
];

const adminNavItems: NavItem[] = [
    {
        title: 'Pengguna',
        href: usersIndex(),
        icon: Users,
    },
];

const footerNavItems: NavItem[] = [
    {
        title: 'Lihat Website',
        href: home(),
        icon: Globe,
    },
];

export function AppSidebar() {
    const { can } = usePage().props;
    const navItems = can.manageUsers
        ? [...mainNavItems, ...adminNavItems]
        : mainNavItems;

    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={navItems} />
            </SidebarContent>

            <SidebarFooter>
                <NavFooter items={footerNavItems} className="mt-auto" />
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}