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

export function NavMain({ items = [], label = 'Platform' }: { items: NavItem[]; label?: string }) {
    const { isCurrentUrl } = useCurrentUrl();

    return (
        <SidebarGroup className="px-3 py-2">
            <SidebarGroupLabel className="mb-2 px-2 text-[10px] font-bold tracking-wider text-zinc-400 uppercase dark:text-zinc-500">
                {label}
            </SidebarGroupLabel>
            <SidebarMenu className="gap-1">
                {items.map((item) => {
                    const active = isCurrentUrl(item.href);

                    return (
                        <SidebarMenuItem key={item.title}>
                            <SidebarMenuButton
                                asChild
                                isActive={active}
                                tooltip={{ children: item.title }}
                                className={`group/btn relative h-9 rounded-xl border border-transparent px-3 py-2 transition-all duration-200 ${
                                    active
                                        ? 'border-zinc-200/50 bg-indigo-50/80 font-bold text-indigo-600 shadow-sm dark:border-zinc-800/40 dark:bg-indigo-950/30 dark:text-indigo-400'
                                        : 'text-zinc-600 hover:bg-zinc-100/80 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-800/40 dark:hover:text-zinc-50'
                                }`}
                            >
                                <Link
                                    href={item.href}
                                    prefetch
                                    className="flex items-center gap-3"
                                >
                                    {item.icon && (
                                        <item.icon
                                            className={`size-4.5 shrink-0 transition-transform duration-200 group-hover/btn:scale-110 ${
                                                active
                                                    ? 'text-indigo-600 dark:text-indigo-400'
                                                    : 'text-zinc-500 group-hover/btn:text-zinc-800 dark:group-hover/btn:text-zinc-200'
                                            }`}
                                        />
                                    )}
                                    <span className="text-xs tracking-wide">
                                        {item.title}
                                    </span>
                                    {active && (
                                        <span className="absolute top-1/2 right-3 h-1.5 w-1.5 -translate-y-1/2 animate-pulse rounded-full bg-indigo-600 dark:bg-indigo-400" />
                                    )}
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    );
                })}
            </SidebarMenu>
        </SidebarGroup>
    );
}