import { NavFooter } from '@/components/nav-footer';
import { NavUser } from '@/components/nav-user';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link, usePage } from '@inertiajs/react';
import {
    ArrowLeftRightIcon,
    BookOpen,
    Folder, GalleryVerticalEndIcon,
    HospitalIcon,
    LayoutGrid,
    LucideAmbulance,
    ScrollText,
    Stethoscope,
    Users
} from 'lucide-react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import AppLogo from './app-logo';
import { useMemo, useState, useEffect } from 'react';

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: '/dashboard',
        icon: LayoutGrid,
    },
    {
        title: 'Registrasi',
        href: '/registrations',
        icon: GalleryVerticalEndIcon,
    },
    {
        title: 'Transaction',
        href: '/transactions',
        icon: ArrowLeftRightIcon,
    },
];

const masterNavItems = [
    {
        title: 'Data Pegawai',
        href: '/employees',
        icon: Users,
    },
    {
        title: 'Data Pasien',
        href: '/patients',
        icon: LucideAmbulance,
    },
    {
        title: 'Data Asuransi',
        href: '/insurances',
        icon: ScrollText,
    },
    {
        title: 'Data Ruangan',
        href: '/room-services',
        icon: HospitalIcon,
    },
    {
        title: 'Data Prosedur',
        href: '/procedures',
        icon: Stethoscope,
    },
];

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

export function AppSidebar() {
    const { url } = usePage();
    const [openMaster, setOpenMaster] = useState(false);

    const isMasterActive = useMemo(() => {
        return masterNavItems.some((item) => url.startsWith(item.href));
    }, [url]);

    useEffect(() => {
        if (isMasterActive) {
            setOpenMaster(true);
        }
    }, [isMasterActive]);

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

                    {/* Tampilkan mainNavItems */}
                    {mainNavItems.map((item) => (
                        <SidebarMenuItem key={item.href}>
                            <SidebarMenuButton asChild>
                                <Link href={item.href}>
                                    <item.icon className="mr-2 size-4" />
                                    {item.title}
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    ))}
                </SidebarMenu>
            </SidebarHeader>

            <SidebarContent>
                <SidebarMenu>
                    {/* Data Master Group */}
                    <Collapsible open={openMaster} onOpenChange={setOpenMaster}>
                        <CollapsibleTrigger asChild>
                            <SidebarMenuButton>
                                <Folder className="ms-2 mr-2 size-4" />
                                Data Master
                            </SidebarMenuButton>
                        </CollapsibleTrigger>
                        <CollapsibleContent className="ms-4">
                            {masterNavItems.map((item) => (
                                <SidebarMenuItem key={item.href}>
                                    <SidebarMenuButton asChild>
                                        <Link href={item.href}>
                                            <item.icon className="mr-2 size-4" />
                                            {item.title}
                                        </Link>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            ))}
                        </CollapsibleContent>
                    </Collapsible>
                </SidebarMenu>
            </SidebarContent>

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