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

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@admin/components/ui/collapsible';
import {
    SidebarGroup,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
} from '@admin/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;
    [key: string]: any;
}

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

    // Track open state for each collapsible menu item
    const [openStates, setOpenStates] = useState<Record<string, boolean>>({});
    // Track which items have been manually toggled by user
    const manuallyToggledRef = useRef<Set<string>>(new Set());

    // 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)
            // Check for exact match OR path followed by slash (child routes)
            if (currentUrl === itemPath) {
                return true;
            }
            // Check if currentUrl starts with itemPath followed by '/' (child route)
            // Also ensure we're not matching partial paths like '/admin/packages-addon' matching '/admin/packages'
            if (currentUrl.startsWith(itemPath + '/')) {
                return true;
            }

            return false;
        } catch (error) {
            console.warn('URL parsing error:', error);
            return currentUrl === itemUrl;
        }
    };

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

        if (item.url) {
            return isUrlActive(item.url);
        }

        return false;
    };

    // Update open states when URL changes, but preserve user's manual toggles
    useEffect(() => {
        // Don't reset - we want to preserve manual toggles across navigation
        // Only update items that haven't been manually toggled
        setOpenStates(prev => {
            const newState: Record<string, boolean> = { ...prev };
            items.forEach(item => {
                if (item.items?.length) {
                    const shouldBeOpen = isMenuItemActive(item);
                    // Only update if not manually toggled by user
                    if (!manuallyToggledRef.current.has(item.title)) {
                        newState[item.title] = shouldBeOpen;
                    }
                }
            });
            return newState;
        });
    }, [currentUrl]);

    return (
        <SidebarGroup className="bg-sidebar-dark">
            <SidebarGroupLabel className="text-text-gray">{groupLabel}</SidebarGroupLabel>
            <SidebarMenu>
                {items.map((item) => {
                    const Icon = item.icon;
                    const itemIsActive = isMenuItemActive(item);
                    const isOpen = openStates[item.title] ?? itemIsActive;

                    // 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
                    return (
                        <Collapsible
                            key={item.title}
                            asChild
                            open={isOpen}
                            onOpenChange={(open) => {
                                setOpenStates(prev => ({ ...prev, [item.title]: open }));
                                // Mark as manually toggled
                                manuallyToggledRef.current.add(item.title);
                            }}
                            className="group/collapsible"
                        >
                            <SidebarMenuItem>
                                <CollapsibleTrigger asChild>
                                    <SidebarMenuButton
                                        tooltip={item.title}
                                        className={itemIsActive ? 'bg-sidebar-active text-primary-foreground' : ''}
                                    >
                                        {Icon ? <Icon /> : null}
                                        <span className="text-[15px] text-primary-foreground">{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);
                                            const Icon = sub.icon;
                                            return (
                                                <SidebarMenuSubItem key={sub.title}>
                                                    <SidebarMenuSubButton
                                                        asChild
                                                        isActive={subItemIsActive}
                                                        className={subItemIsActive ? 'bg-sidebar-accent text-primary-foreground' : ''}
                                                    >
                                                        <Link href={sub.url}>
                                                            {Icon ? <Icon /> : null}
                                                            <span className="text-[14px] text-primary-foreground">{sub.title}</span>
                                                        </Link>
                                                    </SidebarMenuSubButton>
                                                </SidebarMenuSubItem>
                                            );
                                        })}
                                    </SidebarMenuSub>
                                </CollapsibleContent>
                            </SidebarMenuItem>
                        </Collapsible>
                    );
                })}
            </SidebarMenu>
        </SidebarGroup>
    );
}