'use client';

import { Link } from '@inertiajs/react';
import { ChevronRight } from 'lucide-react';
import { useState } from 'react';
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from '@/components/ui/collapsible';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    SidebarGroup,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
    useSidebar,
} from '@/components/ui/sidebar';
import { useLanguage } from '@/contexts/language-context';
import { useIsMobile } from '@/hooks/use-mobile';
import { cn, toUrl } from '@/lib/utils';

const subMenuButtonClassName =
    'h-auto min-h-7 items-start py-1.5 text-xs overflow-visible [&_span]:text-xs [&_span]:whitespace-normal [&_span]:overflow-visible [&_span]:break-words [&_span]:leading-snug [&_svg]:size-3.5';

const nestedSubMenuButtonClassName =
    'h-auto min-h-6 items-start py-1 ps-4 text-[11px] [&_span]:text-[11px] [&_span]:whitespace-normal [&_span]:break-words [&_span]:leading-snug [&_svg]:size-3';

function resolveNavHref(item) {
    const href = item?.href ?? item?.url;

    if (href == null || href === '' || href === '#') {
        return null;
    }

    return toUrl(href);
}

function NavMenuSubLink({ subItem, className }) {
    const href = resolveNavHref(subItem);

    if (!href) {
        return null;
    }

    const subActive = Boolean(subItem.isActive);

    return (
        <SidebarMenuSubButton
            asChild
            size="sm"
            isActive={subActive}
            className={cn(className, 'data-[active=true]:font-medium')}
        >
            <Link
                href={href}
                prefetch
                aria-current={subActive ? 'page' : undefined}
            >
                {subItem.icon ? (
                    <subItem.icon className="mt-0.5 size-3.5 shrink-0" />
                ) : null}
                <span className="min-w-0 flex-1 text-start">{subItem.title}</span>
            </Link>
        </SidebarMenuSubButton>
    );
}

function NavMenuSubGroup({ subItem }) {
    const hasActiveChild = Boolean(subItem.items?.some((child) => child.isActive));
    const [userExpanded, setUserExpanded] = useState(false);
    const isOpen = hasActiveChild || userExpanded;

    const handleOpenChange = (open) => {
        if (hasActiveChild && !open) {
            return;
        }

        setUserExpanded(open);
    };

    return (
        <Collapsible
            open={isOpen}
            onOpenChange={handleOpenChange}
            className="group/nested-collapsible"
        >
            <SidebarMenuSubItem>
                <CollapsibleTrigger asChild>
                    <SidebarMenuSubButton
                        size="sm"
                        isActive={hasActiveChild}
                        className={cn(subMenuButtonClassName, 'data-[active=true]:font-medium')}
                    >
                        {subItem.icon ? (
                            <subItem.icon className="mt-0.5 size-3.5 shrink-0" />
                        ) : null}
                        <span className="min-w-0 flex-1 text-start">{subItem.title}</span>
                        <ChevronRight className="ms-auto size-3.5 shrink-0 transition-transform duration-200 group-data-[state=open]/nested-collapsible:rotate-90" />
                    </SidebarMenuSubButton>
                </CollapsibleTrigger>
                <CollapsibleContent forceMount className="data-[state=closed]:hidden">
                    <SidebarMenuSub className="mx-0 border-0 px-0 py-0.5">
                        {subItem.items?.map((child) => (
                            <SidebarMenuSubItem key={child.title}>
                                <NavMenuSubLink
                                    subItem={child}
                                    className={nestedSubMenuButtonClassName}
                                />
                            </SidebarMenuSubItem>
                        ))}
                    </SidebarMenuSub>
                </CollapsibleContent>
            </SidebarMenuSubItem>
        </Collapsible>
    );
}

function NavMenuSubEntry({ subItem }) {
    if (subItem.items?.length) {
        return <NavMenuSubGroup subItem={subItem} />;
    }

    return (
        <SidebarMenuSubItem>
            <NavMenuSubLink subItem={subItem} className={subMenuButtonClassName} />
        </SidebarMenuSubItem>
    );
}

function NavMenuGroup({ item }) {
    const { direction } = useLanguage();
    const { state } = useSidebar();
    const isMobile = useIsMobile();
    const isCollapsed = state === 'collapsed' && !isMobile;
    const isRtl = direction === 'rtl';
    const hasActiveChild = Boolean(item.items?.some((sub) => sub.isActive));
    const [userExpanded, setUserExpanded] = useState(false);
    const isOpen = hasActiveChild || userExpanded;

    const handleOpenChange = (open) => {
        if (hasActiveChild && !open) {
            return;
        }

        setUserExpanded(open);
    };

    if (isCollapsed) {
        return (
            <SidebarMenuItem>
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <SidebarMenuButton
                            tooltip={item.title}
                            className="group-data-[collapsible=icon]:justify-center"
                        >
                            {item.icon ? <item.icon /> : null}
                        </SidebarMenuButton>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                        className="min-w-56 max-w-[min(100vw-2rem,20rem)]"
                        side={isRtl ? 'left' : 'right'}
                        align="start"
                    >
                        <div className="text-muted-foreground px-2 py-1.5 text-xs font-medium leading-snug">
                            {item.title}
                        </div>
                        {item.items?.map((subItem) => {
                            if (subItem.items?.length) {
                                return (
                                    <div key={subItem.title} className="py-0.5">
                                        <div className="text-muted-foreground px-2 py-1.5 text-xs font-medium leading-snug">
                                            {subItem.title}
                                        </div>
                                        {subItem.items.map((child) => {
                                            const href = resolveNavHref(child);

                                            if (!href) {
                                                return null;
                                            }

                                            const subActive = Boolean(child.isActive);

                                            return (
                                                <DropdownMenuItem
                                                    key={child.title}
                                                    asChild
                                                    className={cn(
                                                        'items-start py-2 ps-4',
                                                        subActive &&
                                                            'bg-accent text-accent-foreground font-medium',
                                                    )}
                                                >
                                                    <Link
                                                        href={href}
                                                        prefetch
                                                        aria-current={
                                                            subActive ? 'page' : undefined
                                                        }
                                                        className="flex w-full cursor-pointer items-start gap-2"
                                                    >
                                                        {child.icon ? (
                                                            <child.icon className="mt-0.5 size-3.5 shrink-0" />
                                                        ) : null}
                                                        <span className="min-w-0 flex-1 text-start text-xs leading-snug">
                                                            {child.title}
                                                        </span>
                                                    </Link>
                                                </DropdownMenuItem>
                                            );
                                        })}
                                    </div>
                                );
                            }

                            const href = resolveNavHref(subItem);

                            if (!href) {
                                return null;
                            }

                            const subActive = Boolean(subItem.isActive);

                            return (
                                <DropdownMenuItem
                                    key={subItem.title}
                                    asChild
                                    className={cn(
                                        'items-start py-2',
                                        subActive &&
                                            'bg-accent text-accent-foreground font-medium',
                                    )}
                                >
                                    <Link
                                        href={href}
                                        prefetch
                                        aria-current={subActive ? 'page' : undefined}
                                        className="flex w-full cursor-pointer items-start gap-2"
                                    >
                                        {subItem.icon ? (
                                            <subItem.icon className="mt-0.5 size-3.5 shrink-0" />
                                        ) : null}
                                        <span className="min-w-0 flex-1 text-start text-xs leading-snug">
                                            {subItem.title}
                                        </span>
                                    </Link>
                                </DropdownMenuItem>
                            );
                        })}
                    </DropdownMenuContent>
                </DropdownMenu>
            </SidebarMenuItem>
        );
    }

    return (
        <Collapsible
            open={isOpen}
            onOpenChange={handleOpenChange}
            className="group/collapsible"
        >
            <SidebarMenuItem>
                <CollapsibleTrigger asChild>
                    <SidebarMenuButton
                        className="h-auto min-h-8 items-center py-2 [&>span]:whitespace-normal [&>span]:leading-snug"
                    >
                        {item.icon ? <item.icon className="shrink-0" /> : null}
                        <span className="min-w-0 flex-1 text-start">{item.title}</span>
                        <ChevronRight className="ms-auto size-4 shrink-0 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                    </SidebarMenuButton>
                </CollapsibleTrigger>

                <CollapsibleContent forceMount className="data-[state=closed]:hidden">
                    <SidebarMenuSub className="mx-2 border-s pe-1 ps-2.5">
                        {item.items?.map((subItem) => (
                            <NavMenuSubEntry key={subItem.title} subItem={subItem} />
                        ))}
                    </SidebarMenuSub>
                </CollapsibleContent>
            </SidebarMenuItem>
        </Collapsible>
    );
}

export function NavMain({ items, groupLabel }) {
    if (!items?.length) {
        return null;
    }

    return (
        <SidebarGroup>
            {groupLabel ? (
                <SidebarGroupLabel>{groupLabel}</SidebarGroupLabel>
            ) : null}

            <SidebarMenu>
                {items.map((item) => {
                    const hasChildren = Boolean(item.items?.length);
                    const href = resolveNavHref(item);

                    if (!hasChildren && href) {
                        return (
                            <SidebarMenuItem key={item.title}>
                                <SidebarMenuButton
                                    asChild
                                    tooltip={item.title}
                                    isActive={item.isActive}
                                    className="group-data-[collapsible=icon]:justify-center rounded-lg"
                                >
                                    <Link href={href} prefetch>
                                        {item.icon ? <item.icon /> : null}
                                        <span className="min-w-0 flex-1 text-start leading-snug">
                                            {item.title}
                                        </span>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        );
                    }

                    if (!hasChildren) {
                        return null;
                    }

                    return <NavMenuGroup key={item.title} item={item} />;
                })}
            </SidebarMenu>
        </SidebarGroup>
    );
}