"use client"

import { useCallback } from "react"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { ChevronRight, Circle, LogOutIcon, UserIcon } from "lucide-react"

import type { NavGroup, NavItem } from "@/base/types/navigation"
import type { UserInfo } from "@/base/types/navigation"
import { useAuthStore } from "@/shared/stores/auth-store"
import { cn } from "@/shared/lib/utils"
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from "@/shared/components/ui/collapsible"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
    SidebarRail,
    useSidebar,
} from "@/shared/components/ui/sidebar"

type AppSidebarProps = React.ComponentProps<typeof Sidebar> & {
    navGroups: NavGroup[]
    logo?: React.ReactNode
    user?: UserInfo
}

export function AppSidebar({ navGroups, logo, user, ...props }: AppSidebarProps) {
    const { state, isMobile } = useSidebar()
    const isCollapsed = state === "collapsed" && !isMobile
    const { logout } = useAuthStore((s) => s)
    const router = useRouter()

    const handleLogout = useCallback(async () => {
        await logout()
        router.push("/login")
    }, [logout, router])

    return (
        <Sidebar collapsible="icon" {...props} className="bg-card">
            {logo && (
                <SidebarHeader className="flex p-4">
                    {logo}
                </SidebarHeader>
            )}
            <SidebarContent className={cn("transition-[padding] duration-200", !isCollapsed && "ps-2")}>
                {navGroups.map((group, groupIndex) => (
                    <SidebarGroup key={group.label ?? groupIndex}>
                        {group.label && (
                            <SidebarGroupLabel className="uppercase text-xs tracking-wider text-muted-foreground">
                                {group.label}
                            </SidebarGroupLabel>
                        )}
                        <SidebarMenu>
                            {group.items.map((item) =>
                                item.items && item.items.length > 0 ? (
                                    <CollapsibleNavItem key={item.href} item={item} isCollapsed={isCollapsed} />
                                ) : (
                                    <SimpleNavItem key={item.href} item={item} isCollapsed={isCollapsed} />
                                )
                            )}
                        </SidebarMenu>
                    </SidebarGroup>
                ))}
            </SidebarContent>
            <SidebarFooter className="p-2">
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <SidebarMenuButton
                            size="lg"
                            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                        >
                            <Avatar className="size-8 rounded-lg">
                                {user?.avatar && <AvatarImage src={user.avatar as string} alt={user.name} />}
                                <AvatarFallback className="rounded-lg">
                                    {user?.initials ?? user?.name?.charAt(0).toUpperCase()}
                                </AvatarFallback>
                            </Avatar>
                            {!isCollapsed && (
                                <div className="grid flex-1 text-left text-sm leading-tight">
                                    <span className="truncate font-medium">{user?.name}</span>
                                    {user?.email && (
                                        <span className="truncate text-xs text-muted-foreground">{user.email}</span>
                                    )}
                                </div>
                            )}
                        </SidebarMenuButton>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                        side="top"
                        align="start"
                        sideOffset={4}
                        className="w-56"
                    >
                        <DropdownMenuLabel className="font-normal">
                            <div className="flex flex-col">
                                <span className="text-sm font-medium">{user?.name}</span>
                                {user?.email && (
                                    <span className="text-xs text-muted-foreground">{user.email}</span>
                                )}
                            </div>
                        </DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem asChild>
                            <Link href="/profile">
                                <UserIcon />
                                Profile
                            </Link>
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem variant="destructive" onSelect={handleLogout}>
                            <LogOutIcon />
                            Logout
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </SidebarFooter>
            <SidebarRail />
        </Sidebar>
    )
}

function isPathActive(pathname: string, href: string): boolean {
    if (href === '/') return pathname === '/'
    return pathname === href || pathname.startsWith(href + '/')
}

function isItemActive(pathname: string, item: { href: string; matchPath?: string; isActive?: boolean }): boolean {
    if (item.isActive !== undefined) return item.isActive
    if (item.matchPath) return isPathActive(pathname, item.matchPath)
    return isPathActive(pathname, item.href)
}

function SimpleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed: boolean }) {
    const pathname = usePathname()
    const isActive = isItemActive(pathname, item)

    return (
        <SidebarMenuItem>
            <SidebarMenuButton
                 
                asChild
                isActive={isActive}
                tooltip={item.title}
                className="dashboard-nav-item"
                data-collapsed={isCollapsed}
            >
                <Link href={item.href}>
                    {item.icon}
                    {
                        !isCollapsed &&
                        <span>{item.title}</span>
                    }
                </Link>
            </SidebarMenuButton>
        </SidebarMenuItem>
    )
}

function CollapsibleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed: boolean }) {
    const pathname = usePathname()
    const isChildActive = item.items?.some((sub) => isItemActive(pathname, sub))
    const isActive = item.isActive ?? (isItemActive(pathname, item) || isChildActive === true)

    // Collapsed sidebar → flyout dropdown with sub-items
    if (isCollapsed) {
        return (
            <SidebarMenuItem>
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <SidebarMenuButton
                             
                            isActive={isActive}
                            tooltip={item.title}
                            className="dashboard-nav-item"
                            data-collapsed={isCollapsed}
                        >
                            <span
                                className={cn(
                                    "transition-transform duration-300",
                                    isActive && "text-primary"
                                )}
                            >
                                {item.icon}
                            </span>
                            {
                                !isCollapsed &&
                                <span>{item.title}</span>
                            }
                        </SidebarMenuButton>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                        side="right"
                        align="start"
                        sideOffset={4}
                        className="min-w-45"
                    >
                        <DropdownMenuLabel className="text-xs text-muted-foreground">
                            {item.title}
                        </DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        {item.items?.map((sub) => {
                            const isSubActive = isItemActive(pathname, sub)
                            return (
                                <DropdownMenuItem key={sub.href} asChild>
                                    <Link
                                        href={sub.href}
                                        className={cn(
                                            "flex items-center gap-2",
                                            isSubActive && "bg-primary/10 text-primary font-medium"
                                        )}
                                    >
                                        {sub.icon ? (
                                            <span className={cn("shrink-0 [&>svg]:size-4", isSubActive ? "text-primary" : "text-muted-foreground/70")}>
                                                {sub.icon}
                                            </span>
                                        ) : (
                                            <Circle
                                                className={cn(
                                                    "size-1.5",
                                                    isSubActive ? "fill-primary text-primary" : "fill-muted-foreground/50 text-muted-foreground/50"
                                                )}
                                            />
                                        )}
                                        {sub.title}
                                    </Link>
                                </DropdownMenuItem>
                            )
                        })}
                    </DropdownMenuContent>
                </DropdownMenu>
            </SidebarMenuItem>
        )
    }

    // Expanded sidebar → collapsible/accordion sub-menu
    return (
        <Collapsible asChild defaultOpen={isActive} className="group/collapsible">
            <SidebarMenuItem>
                <CollapsibleTrigger asChild>
                    <SidebarMenuButton   tooltip={item.title} isActive={isActive} className="dashboard-nav-item" data-collapsed={isCollapsed}>
                        <span
                            className={cn(
                                "transition-transform duration-300",
                                isActive && "text-primary"
                            )}
                        >
                            {item.icon}
                        </span>

                            
                        <span>{item.title}</span>
                        
                        <ChevronRight
                            className={cn(
                                "ms-auto size-4 shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.87,0,0.13,1)]",
                                "group-data-[state=open]/collapsible:rotate-90"
                            )}
                        />
                    </SidebarMenuButton>
                </CollapsibleTrigger>
                <CollapsibleContent className="overflow-hidden py-2 data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
                    <SidebarMenuSub>
                        {item.items?.map((sub) => {
                            const isSubActive = isItemActive(pathname, sub)
                            return (
                                <SidebarMenuSubItem key={sub.href}>
                                    <SidebarMenuSubButton asChild isActive={isSubActive} className="dashboard-nav-sub-item my-0.5">
                                        <Link href={sub.href}>
                                            {sub.icon ? (
                                                <span className={cn("shrink-0 transition-colors duration-200 [&>svg]:size-4", isSubActive ? "text-primary" : "text-muted-foreground/70 group-hover/menu-sub-item:text-primary")}>
                                                    {sub.icon}
                                                </span>
                                            ) : (
                                                <Circle
                                                    className={cn(
                                                        "size-1.5 transition-colors duration-200",
                                                        isSubActive
                                                            ? "fill-primary text-primary"
                                                            : "fill-muted-foreground/40 text-muted-foreground/40 group-hover/menu-sub-item:fill-foreground group-hover/menu-sub-item:text-primary"
                                                    )}
                                                />
                                            )}
                                            <span>{sub.title}</span>
                                        </Link>
                                    </SidebarMenuSubButton>
                                </SidebarMenuSubItem>
                            )
                        })}
                    </SidebarMenuSub>
                </CollapsibleContent>
            </SidebarMenuItem>
        </Collapsible>
    )
}