// components/nav-main.tsx
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
};

interface NavMainProps {
    items: Item[];
    groupLabel?: string;
}

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

    // Function to normalize URLs for comparison
    const normalizeUrl = (url: string): string => {
        try {
            // If it's a full URL, extract just the pathname
            const urlObj = new URL(url);
            return urlObj.pathname;
        } catch {
            // If it's already a pathname, return as is
            return url.startsWith('/') ? url : `/${url}`;
        }
    };

    // Function to check if a menu item should be active
    const isMenuItemActive = (item: Item): boolean => {
        if (item.url) {
            const normalizedCurrentUrl = normalizeUrl(currentUrl);
            const normalizedItemUrl = normalizeUrl(item.url);
            return normalizedCurrentUrl === normalizedItemUrl || normalizedCurrentUrl.startsWith(normalizedItemUrl + '/');
        }

        // Check if any sub-item is active
        if (item.items) {
            return item.items.some((subItem) => {
                const normalizedCurrentUrl = normalizeUrl(currentUrl);
                const normalizedSubUrl = normalizeUrl(subItem.url);
                return normalizedCurrentUrl === normalizedSubUrl || normalizedCurrentUrl.startsWith(normalizedSubUrl + '/');
            });
        }

        return false;
    };

    // Function to check if a sub-item should be active
    const isSubItemActive = (url: string): boolean => {
        const normalizedCurrentUrl = normalizeUrl(currentUrl);
        const normalizedUrl = normalizeUrl(url);
        return normalizedCurrentUrl === normalizedUrl || normalizedCurrentUrl.startsWith(normalizedUrl + '/');
    };
    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 /> : 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 = isSubItemActive(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>
    );
}