import { Link } from '@inertiajs/react';
import { Fragment } from 'react';
import {
    SidebarGroup,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarSeparator,
    useSidebar,
} from '@/components/ui/sidebar';
import { useCurrentUrl } from '@/hooks/use-current-url';
import type { NavGroup, NavItem } from '@/types/navigation';

export function NavMain({ groups = [] }: { groups: NavGroup[] }) {
    const { isCurrentUrl, currentUrl } = useCurrentUrl();
    const { isMobile, setOpenMobile } = useSidebar();

    function handleNavClick() {
        if (isMobile) {
            setOpenMobile(false);
        }
    }

    function isNavItemActive(item: NavItem): boolean {
        if (item.isActive !== undefined) {
            return item.isActive;
        }

        if (item.activeMatchesAdminPrefix === true) {
            return currentUrl === '/admin' || currentUrl.startsWith('/admin/');
        }

        return isCurrentUrl(item.href);
    }

    return (
        <>
            {groups.map((group, groupIndex) => (
                <Fragment key={group.label}>
                    {groupIndex > 0 ? <SidebarSeparator /> : null}
                    <SidebarGroup className="px-2 py-0">
                        <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
                        <SidebarMenu>
                            {group.items.map((item) => (
                                <SidebarMenuItem key={item.title}>
                                    <SidebarMenuButton
                                        asChild
                                        isActive={isNavItemActive(item)}
                                        tooltip={{
                                            children: item.description
                                                ? `${item.title} — ${item.description}`
                                                : item.title,
                                        }}
                                    >
                                        <Link
                                            href={item.href}
                                            prefetch="mount"
                                            onClick={handleNavClick}
                                        >
                                            {item.icon ? <item.icon /> : null}
                                            <span className="grid min-w-0 flex-1 text-left">
                                                <span className="truncate leading-tight">
                                                    {item.title}
                                                </span>
                                                {item.description ? (
                                                    <span className="text-muted-foreground group-data-[collapsible=icon]/sidebar-wrapper:hidden max-w-[180px] truncate text-[11px] font-normal leading-tight whitespace-normal md:max-w-none">
                                                        {item.description}
                                                    </span>
                                                ) : null}
                                            </span>
                                        </Link>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            ))}
                        </SidebarMenu>
                    </SidebarGroup>
                </Fragment>
            ))}
        </>
    );
}