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

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

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

export interface NavGeneralProps {
    items: any;
    groupLabel?: string;
    openCollapsible?: string | null;
    onOpenCollapsibleChange?: (id: string | null) => void;
    [key: string]: any;
}

export function NavGeneral({
    items,
    groupLabel = 'Platform',
    openCollapsible,
    onOpenCollapsibleChange,
}: NavGeneralProps) {
    const { url: currentUrl } = usePage();

    // Set initial open item based on active URL
    React.useEffect(() => {
        if (onOpenCollapsibleChange && !openCollapsible) {
            const activeItem = items.find((item: Item) => isMenuItemActive(item));
            if (activeItem) {
                onOpenCollapsibleChange(`${groupLabel}-${activeItem.title}`);
            }
        }
    }, [items, groupLabel, onOpenCollapsibleChange]);

    // 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 className="bg-sidebar-dark pt-0" >
            <SidebarGroupLabel className="text-text-gray text-sm">{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 ? '' : ''}>
                                    <Link href={item.url}>
                                        {Icon ? <Icon className="text-primary-foreground" /> : null}
                                        <h6 className="text-[15px] text-primary-foreground">{item.title}</h6>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        );
                    }

                    // Collapsible group
                    const itemKey = `${groupLabel}-${item.title}`;
                    const isOpen = openCollapsible === itemKey;

                    return (
                        <Collapsible
                            key={item.title}
                            asChild
                            open={isOpen}
                            onOpenChange={(open) => {
                                if (onOpenCollapsibleChange) {
                                    onOpenCollapsibleChange(open ? itemKey : null);
                                }
                            }}
                            className="group/collapsible"
                        >
                            <SidebarMenuItem>
                                <CollapsibleTrigger asChild>
                                    <SidebarMenuButton
                                        tooltip={item.title}
                                        className={`h-9 ${itemIsActive ? 'bg-sidebar-active text-primary-foreground' : ''}`}
                                    >
                                        {Icon ? <Icon /> : null}
                                        <span className="text-[16px] text-primary-foreground">{item.title}</span>
                                        <ChevronRight className="ml-auto transition-transform duration-300 group-data-[state=open]/collapsible:rotate-90" />
                                    </SidebarMenuButton>
                                </CollapsibleTrigger>

                                <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
                                    <SidebarMenuSub>
                                        {item.items?.map((sub) => {
                                            const subItemIsActive = isUrlActive(sub.url);
                                            const Icon = sub.icon;
                                            return (
                                                <SidebarMenuSubItem key={sub.title}>
                                                    <SidebarMenuSubButton
                                                        asChild
                                                        isActive={subItemIsActive}
                                                        className={`${subItemIsActive ? 'text-primary-foreground' : 'text-primary-foreground'}`}
                                                    >
                                                        <Link href={sub.url} className='h-8.5'>
                                                            {Icon ? <Icon /> : null}
                                                            <span className="text-[15px] ">{sub.title}</span>
                                                        </Link>
                                                    </SidebarMenuSubButton>
                                                </SidebarMenuSubItem>
                                            );
                                        })}
                                    </SidebarMenuSub>
                                </CollapsibleContent>
                            </SidebarMenuItem>
                        </Collapsible>
                    );
                })}
            </SidebarMenu>
        </SidebarGroup>
    );
}