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

import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from '@/components/ui/collapsible';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    SidebarGroup,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuAction,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
    useSidebar,
} from '@/components/ui/sidebar';
import { useCurrentUrl } from '@/hooks/use-current-url';
import type { NavItem } from '@/types';
import type { NavSubItem } from '@/types/navigation';

function CollapsedSidebarSubMenu({
    item,
    isActive,
}: {
    item: NavItem;
    isActive: boolean;
}) {
    const [open, setOpen] = React.useState(false);
    const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(
        null,
    );

    const clearCloseTimer = React.useCallback(() => {
        if (closeTimerRef.current) {
            clearTimeout(closeTimerRef.current);
            closeTimerRef.current = null;
        }
    }, []);

    const scheduleClose = React.useCallback(() => {
        clearCloseTimer();
        closeTimerRef.current = setTimeout(() => {
            setOpen(false);
        }, 120);
    }, [clearCloseTimer]);

    React.useEffect(() => {
        return clearCloseTimer;
    }, [clearCloseTimer]);

    return (
        <SidebarMenuItem
            onPointerEnter={() => {
                clearCloseTimer();
                setOpen(true);
            }}
            onPointerLeave={scheduleClose}
        >
            <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
                <DropdownMenuTrigger asChild>
                    <SidebarMenuButton
                        asChild
                        isActive={isActive}
                        aria-label={item.title}
                        title={item.title}
                        onFocus={() => {
                            clearCloseTimer();
                            setOpen(true);
                        }}
                    >
                        {/* Di mode collapsed, klik ikon tetap menavigasi ke
                            halaman index; hover memunculkan dropdown sub-menu. */}
                        <Link href={item.href} prefetch>
                            {item.icon && <item.icon />}
                            <span>{item.title}</span>
                        </Link>
                    </SidebarMenuButton>
                </DropdownMenuTrigger>
                <DropdownMenuContent
                    side="right"
                    align="start"
                    sideOffset={8}
                    className="min-w-40"
                    onPointerEnter={clearCloseTimer}
                    onPointerLeave={scheduleClose}
                    onCloseAutoFocus={(event) => event.preventDefault()}
                >
                    <DropdownMenuItem asChild>
                        <Link href={item.href} prefetch>
                            {item.title}
                        </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    {item.items!.map((subItem) => {
                        const hasChildren = Boolean(
                            subItem.items && subItem.items.length > 0,
                        );

                        // Sub-item bertingkat (mis. nama divisi) tampil sebagai
                        // grup: judul divisi + daftar menunya.
                        if (hasChildren) {
                            return (
                                <div key={subItem.title}>
                                    <DropdownMenuLabel className="text-muted-foreground">
                                        {subItem.title}
                                    </DropdownMenuLabel>
                                    {subItem.items!.map((child) => (
                                        <DropdownMenuItem
                                            key={child.title}
                                            asChild
                                        >
                                            <Link href={child.href} prefetch>
                                                {child.title}
                                            </Link>
                                        </DropdownMenuItem>
                                    ))}
                                    <DropdownMenuSeparator />
                                </div>
                            );
                        }

                        return (
                            <DropdownMenuItem key={subItem.title} asChild>
                                <Link href={subItem.href} prefetch>
                                    {subItem.title}
                                </Link>
                            </DropdownMenuItem>
                        );
                    })}
                </DropdownMenuContent>
            </DropdownMenu>
        </SidebarMenuItem>
    );
}

/**
 * Merender satu sub-item menu. Jika sub-item punya `items` (mis. sebuah divisi
 * dengan menu Tasks/Projects/dst di dalamnya), sub-item ditampilkan sebagai grup
 * yang bisa di-expand dengan sub-menu bertingkat di bawahnya.
 */
function NavSubMenuItem({
    subItem,
    onNavigate,
}: {
    subItem: NavSubItem;
    onNavigate: () => void;
}) {
    const { isCurrentUrl, isCurrentOrParentUrl } = useCurrentUrl();
    const hasChildren = Boolean(subItem.items && subItem.items.length > 0);

    if (!hasChildren) {
        return (
            <SidebarMenuSubItem>
                <SidebarMenuSubButton
                    asChild
                    isActive={isCurrentUrl(subItem.href)}
                >
                    <Link href={subItem.href} prefetch onClick={onNavigate}>
                        <span>{subItem.title}</span>
                    </Link>
                </SidebarMenuSubButton>
            </SidebarMenuSubItem>
        );
    }

    // Grup (mis. sebuah divisi) dianggap aktif — dan auto-expand — bila salah
    // satu menunya sedang dibuka, sehingga pindah antar-menu dalam divisi yang
    // sama tetap membuat grupnya terbuka.
    const isActive =
        isCurrentOrParentUrl(subItem.href) ||
        (subItem.items ?? []).some((child) => isCurrentUrl(child.href));

    return (
        <Collapsible
            asChild
            defaultOpen={isActive}
            className="group/sub-collapsible"
        >
            <SidebarMenuSubItem>
                {/* Nama divisi murni toggle buka/tutup sub-menu, tanpa
                    navigasi. Pindah halaman lewat menu di dalamnya
                    (Tasks/Projects/dst). */}
                <CollapsibleTrigger asChild>
                    <SidebarMenuSubButton
                        isActive={isActive}
                        className="cursor-pointer pr-8"
                    >
                        <span>{subItem.title}</span>
                    </SidebarMenuSubButton>
                </CollapsibleTrigger>
                <CollapsibleTrigger asChild>
                    <SidebarMenuAction
                        aria-label={`Toggle ${subItem.title}`}
                        className="data-[state=open]:rotate-90"
                    >
                        <ChevronRight className="transition-transform duration-200" />
                    </SidebarMenuAction>
                </CollapsibleTrigger>
                <CollapsibleContent>
                    <SidebarMenuSub>
                        {subItem.items!.map((child) => (
                            <NavSubMenuItem
                                key={child.title}
                                subItem={child}
                                onNavigate={onNavigate}
                            />
                        ))}
                    </SidebarMenuSub>
                </CollapsibleContent>
            </SidebarMenuSubItem>
        </Collapsible>
    );
}

export function NavMain({
    items = [],
    label = 'Platform',
}: {
    items: NavItem[];
    /** Nama scope yang sedang dibuka, mis. "Platform" atau "Administration". */
    label?: string;
}) {
    const { isCurrentUrl, isCurrentOrParentUrl } = useCurrentUrl();
    const { state, isMobile, setOpenMobile } = useSidebar();

    // Tutup sidebar (Sheet overlay) otomatis di mobile saat menu dipilih,
    // karena navigasi Inertia tidak me-reset state openMobile.
    const handleNavigate = () => {
        if (isMobile) {
            setOpenMobile(false);
        }
    };

    return (
        <SidebarGroup className="px-2 py-0">
            <SidebarGroupLabel>{label}</SidebarGroupLabel>
            <SidebarMenu>
                {items.map((item) => {
                    const hasSubItems = item.items && item.items.length > 0;
                    const isActive = hasSubItems
                        ? isCurrentOrParentUrl(item.href)
                        : isCurrentUrl(item.href, undefined, true);

                    if (hasSubItems && state === 'collapsed') {
                        return (
                            <CollapsedSidebarSubMenu
                                key={item.title}
                                item={item}
                                isActive={isActive}
                            />
                        );
                    }

                    if (hasSubItems) {
                        return (
                            <SidebarMenuItem key={item.title}>
                                {/* Label menavigasi ke halaman index item. Daftar
                                    sub-item (nama divisi) selalu tampil tanpa perlu
                                    toggle. */}
                                <SidebarMenuButton
                                    asChild
                                    isActive={isActive}
                                    tooltip={{ children: item.title }}
                                >
                                    <Link
                                        href={item.href}
                                        prefetch
                                        onClick={handleNavigate}
                                    >
                                        {item.icon && <item.icon />}
                                        <span>{item.title}</span>
                                    </Link>
                                </SidebarMenuButton>
                                <SidebarMenuSub>
                                    {item.items!.map((subItem) => (
                                        <NavSubMenuItem
                                            key={subItem.title}
                                            subItem={subItem}
                                            onNavigate={handleNavigate}
                                        />
                                    ))}
                                </SidebarMenuSub>
                            </SidebarMenuItem>
                        );
                    }

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