import { useState } from 'react';
import { Link } from '@inertiajs/react';
import { ChevronDown } from 'lucide-react';
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from '@/components/ui/collapsible';
import {
    SidebarGroup,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    useSidebar,
} from '@/components/ui/sidebar';
import { useCurrentUrl } from '@/hooks/use-current-url';
import { cn } from '@/lib/utils';
import type { NavItem } from '@/types';

export function NavMain({
    items,
    label = 'Platform',
}: {
    items: NavItem[];
    label?: string;
}) {
    const { isCurrentUrl } = useCurrentUrl();
    const { state, isMobile } = useSidebar();
    const [open, setOpen] = useState(true);

    // Narrowed to icons the section labels are hidden, so a closed section
    // would leave a silent gap with no way back. Keep the icons reachable
    // there and let the sections collapse only in the full sidebar.
    const showItems = open || (state === 'collapsed' && !isMobile);

    return (
        <Collapsible open={showItems} onOpenChange={setOpen}>
            <SidebarGroup className="px-2 py-0">
                <SidebarGroupLabel className="p-0">
                    <CollapsibleTrigger
                        type="button"
                        className={cn(
                            'text-muted-foreground/80 hover:text-foreground focus-visible:ring-sidebar-ring',
                            'flex h-7 w-full items-center justify-between gap-2 rounded-md px-2',
                            'text-[11px] font-semibold tracking-wide uppercase outline-hidden transition-colors',
                            'focus-visible:ring-2',
                        )}
                    >
                        <span className="truncate">{label}</span>
                        <ChevronDown
                            aria-hidden="true"
                            className={cn(
                                'size-3.5 shrink-0 transition-transform duration-200',
                                !showItems && '-rotate-90',
                            )}
                        />
                    </CollapsibleTrigger>
                </SidebarGroupLabel>
                <CollapsibleContent>
                    <SidebarMenu className="gap-0.5">
                        {items.map((item) => (
                            <SidebarMenuItem key={item.title}>
                                <SidebarMenuButton
                                    asChild
                                    isActive={isCurrentUrl(item.href)}
                                    tooltip={{ children: item.title }}
                                    className={cn(
                                        'group/nav h-9 gap-2.5 rounded-lg px-2 font-normal transition-colors',
                                        'hover:bg-sidebar-accent/60',
                                        'data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:ring-1 data-[active=true]:ring-hairline',
                                    )}
                                >
                                    <Link href={item.href} prefetch>
                                        {item.icon ? (
                                            <span
                                                className={cn(
                                                    'flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors',
                                                    'group-hover/nav:text-foreground',
                                                    'group-data-[active=true]/nav:bg-solar-soft group-data-[active=true]/nav:text-solar-ink',
                                                )}
                                            >
                                                <item.icon className="size-4" />
                                            </span>
                                        ) : null}
                                        <span className="truncate">
                                            {item.title}
                                        </span>
                                        {item.badge && item.badge > 0 ? (
                                            <span
                                                className="ml-auto flex min-w-5 items-center justify-center rounded-full bg-solar px-1.5 text-[10px] leading-5 font-semibold text-neutral-900 group-data-[collapsible=icon]:hidden"
                                                aria-label={`${item.badge} unread`}
                                            >
                                                {item.badge > 99
                                                    ? '99+'
                                                    : item.badge}
                                            </span>
                                        ) : null}
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        ))}
                    </SidebarMenu>
                </CollapsibleContent>
            </SidebarGroup>
        </Collapsible>
    );
}