import { Link } from '@inertiajs/react';
import { ChevronRight } from 'lucide-react';
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from '@/components/ui/collapsible';
import {
    SidebarGroup,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
} from '@/components/ui/sidebar';
import { useCurrentUrl } from '@/hooks/use-current-url';
import type { NavItem } from '@/types';

function isNavItemActive(
    item: NavItem,
    isCurrentUrl: ReturnType<typeof useCurrentUrl>['isCurrentUrl'],
    isCurrentOrParentUrl: ReturnType<
        typeof useCurrentUrl
    >['isCurrentOrParentUrl'],
): boolean {
    if (item.isActive !== undefined) {
        return item.isActive;
    }

    const selfActive = item.matchPrefix
        ? isCurrentOrParentUrl(item.href)
        : isCurrentUrl(item.href);

    if (selfActive) {
        return true;
    }

    return (
        item.children?.some((child) =>
            isNavItemActive(child, isCurrentUrl, isCurrentOrParentUrl),
        ) ?? false
    );
}

function NavMenuItem({
    item,
    isCurrentUrl,
    isCurrentOrParentUrl,
}: {
    item: NavItem;
    isCurrentUrl: ReturnType<typeof useCurrentUrl>['isCurrentUrl'];
    isCurrentOrParentUrl: ReturnType<
        typeof useCurrentUrl
    >['isCurrentOrParentUrl'];
}) {
    const isActive = isNavItemActive(item, isCurrentUrl, isCurrentOrParentUrl);

    if (!item.children?.length) {
        return (
            <SidebarMenuItem>
                <SidebarMenuButton
                    asChild
                    isActive={isActive}
                    tooltip={{ children: item.title }}
                >
                    <Link href={item.href} prefetch>
                        {item.icon && <item.icon />}
                        <span>{item.title}</span>
                    </Link>
                </SidebarMenuButton>
            </SidebarMenuItem>
        );
    }

    return (
        <Collapsible
            asChild
            defaultOpen={isActive}
            className="group/collapsible"
        >
            <SidebarMenuItem>
                <CollapsibleTrigger asChild>
                    <SidebarMenuButton isActive={isActive} tooltip={{ children: item.title }}>
                        {item.icon && <item.icon />}
                        <span>{item.title}</span>
                        <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
                    </SidebarMenuButton>
                </CollapsibleTrigger>
                <CollapsibleContent>
                    <SidebarMenuSub>
                        {item.children.map((child) => {
                            const childActive =
                                child.isActive ??
                                (child.matchPrefix
                                    ? isCurrentOrParentUrl(child.href)
                                    : isCurrentUrl(child.href));

                            return (
                                <SidebarMenuSubItem key={child.title}>
                                    <SidebarMenuSubButton
                                        asChild
                                        isActive={childActive}
                                    >
                                        <Link href={child.href} prefetch>
                                            <span>{child.title}</span>
                                        </Link>
                                    </SidebarMenuSubButton>
                                </SidebarMenuSubItem>
                            );
                        })}
                    </SidebarMenuSub>
                </CollapsibleContent>
            </SidebarMenuItem>
        </Collapsible>
    );
}

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

    return (
        <SidebarGroup className="px-2 py-0">
            <SidebarGroupLabel>{label}</SidebarGroupLabel>
            <SidebarMenu>
                {items.map((item) => (
                    <NavMenuItem
                        key={item.title}
                        item={item}
                        isCurrentUrl={isCurrentUrl}
                        isCurrentOrParentUrl={isCurrentOrParentUrl}
                    />
                ))}
            </SidebarMenu>
        </SidebarGroup>
    );
}