import { Link, usePage } from '@inertiajs/react';
import { ChevronRight, type LucideIcon } from 'lucide-react';

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@admin/components/ui/collapsible';
import {
    SidebarGroup,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
} from '@admin/components/ui/sidebar';
import { NavGeneralProps } from './NavGeneral';

type Item = {
    title: string;
    icon?: LucideIcon;
    isActive?: boolean;
    url?: string; // single item
    items?: { title: string; url: string; isActive?: boolean }[]; // nested
};

export function NavErp({ items, groupLabel = 'ERP System' }: NavGeneralProps) {
    const { url: currentUrl } = usePage();

    // More robust URL matching that handles Laravel route() helpers
    const isUrlActive = (itemUrl: string): boolean => {
        try {
            // Extract pathname from full URL if needed
            const itemPath = itemUrl.startsWith('http') ? new URL(itemUrl).pathname : itemUrl;

            // Compare with current URL (which should be just the pathname from Inertia)
            return currentUrl === itemPath || currentUrl.startsWith(itemPath + '/');
        } catch (error) {
            console.warn('URL parsing error:', error);
            return currentUrl === itemUrl;
        }
    };

    const isMenuItemActive = (item: Item): boolean => {
        if (item.url) {
            return isUrlActive(item.url);
        }

        if (item.items) {
            return item.items.some((subItem) => isUrlActive(subItem.url));
        }

        return false;
    };

    return (
        <SidebarGroup>
            <SidebarGroupLabel>{groupLabel}</SidebarGroupLabel>
            <SidebarMenu>
                {items.map((item) => {
                    const Icon = item.icon;
                    const itemIsActive = isMenuItemActive(item);

                    // Single-link item
                    if (item.url && !item.items?.length) {
                        return (
                            <SidebarMenuItem key={item.title}>
                                <SidebarMenuButton
                                    asChild
                                    tooltip={item.title}
                                    isActive={itemIsActive}
                                    className={itemIsActive ? 'bg-sidebar-accent text-sidebar-accent-foreground' : ''}
                                >
                                    <Link href={item.url}>
                                        {Icon ? <Icon className="text-primary-foreground" /> : null}
                                        <span>{item.title}</span>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        );
                    }

                    // Collapsible group
                    return (
                        <Collapsible key={item.title} asChild defaultOpen={itemIsActive} className="group/collapsible">
                            <SidebarMenuItem>
                                <CollapsibleTrigger asChild>
                                    <SidebarMenuButton
                                        tooltip={item.title}
                                        className={itemIsActive ? 'bg-sidebar-accent text-sidebar-accent-foreground' : ''}
                                    >
                                        {Icon ? <Icon /> : null}
                                        <span>{item.title}</span>
                                        <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                                    </SidebarMenuButton>
                                </CollapsibleTrigger>

                                <CollapsibleContent>
                                    <SidebarMenuSub>
                                        {item.items?.map((sub) => {
                                            const subItemIsActive = isUrlActive(sub.url);
                                            return (
                                                <SidebarMenuSubItem key={sub.title}>
                                                    <SidebarMenuSubButton
                                                        asChild
                                                        isActive={subItemIsActive}
                                                        className={subItemIsActive ? 'bg-sidebar-accent text-sidebar-accent-foreground' : ''}
                                                    >
                                                        <Link href={sub.url}>
                                                            <span>{sub.title}</span>
                                                        </Link>
                                                    </SidebarMenuSubButton>
                                                </SidebarMenuSubItem>
                                            );
                                        })}
                                    </SidebarMenuSub>
                                </CollapsibleContent>
                            </SidebarMenuItem>
                        </Collapsible>
                    );
                })}
            </SidebarMenu>
        </SidebarGroup>
    );
}