import {
    SidebarGroup,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
} from '@/components/ui/sidebar';
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { resolveUrl } from '@/lib/utils';
import { type NavItem } from '@/types';
import { Link, usePage } from '@inertiajs/react';
import { ChevronRight } from 'lucide-react';
import { useState } from 'react';

export function NavMain({ items = [] }: { items: NavItem[] }) {
    const page = usePage();
    return (
        <SidebarGroup className="px-2 py-0">
            <SidebarGroupLabel>Platform</SidebarGroupLabel>
            <SidebarMenu>
                {items.map((item) => {
                    const hasSubItems = item.items && item.items.length > 0;
                    const isActive =
                        item.href &&
                        page.url.startsWith(resolveUrl(item.href));
                    const hasActiveSubItem =
                        hasSubItems &&
                        item.items?.some(
                            (subItem) =>
                                subItem.href &&
                                page.url.startsWith(resolveUrl(subItem.href)),
                        );

                    if (hasSubItems) {
                        return (
                            <CollapsibleMenuItem
                                key={item.title}
                                item={item}
                                page={page}
                                isActive={hasActiveSubItem || isActive}
                            />
                        );
                    }

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

function CollapsibleMenuItem({
    item,
    page,
    isActive,
}: {
    item: NavItem;
    page: ReturnType<typeof usePage>;
    isActive: boolean;
}) {
    const [open, setOpen] = useState(isActive);

    return (
        <Collapsible
            asChild
            open={open}
            onOpenChange={setOpen}
        >
            <SidebarMenuItem>
                <CollapsibleTrigger asChild>
                    <SidebarMenuButton
                        isActive={isActive}
                        tooltip={{ children: item.title }}
                    >
                        {item.icon && <item.icon />}
                        <span>{item.title}</span>
                        <ChevronRight
                            className={`ml-auto transition-transform duration-200 ${
                                open ? 'rotate-90' : ''
                            }`}
                        />
                    </SidebarMenuButton>
                </CollapsibleTrigger>
                <CollapsibleContent>
                    <SidebarMenuSub>
                        {item.items?.map((subItem) => {
                            const subIsActive =
                                subItem.href &&
                                page.url.startsWith(resolveUrl(subItem.href));

                            return (
                                <SidebarMenuSubItem key={subItem.title}>
                                    <SidebarMenuSubButton
                                        asChild
                                        isActive={subIsActive}
                                    >
                                        {subItem.href ? (
                                            <Link href={subItem.href} prefetch>
                                                {subItem.icon && (
                                                    <subItem.icon className="h-4 w-4" />
                                                )}
                                                <span>{subItem.title}</span>
                                            </Link>
                                        ) : (
                                            <>
                                                {subItem.icon && (
                                                    <subItem.icon className="h-4 w-4" />
                                                )}
                                                <span>{subItem.title}</span>
                                            </>
                                        )}
                                    </SidebarMenuSubButton>
                                </SidebarMenuSubItem>
                            );
                        })}
                    </SidebarMenuSub>
                </CollapsibleContent>
            </SidebarMenuItem>
        </Collapsible>
    );
}