"use client";

import * as React from "react";
import { ChevronRight } from "lucide-react";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar";
import { cn } from "@/lib/utils";
import { SidebarLink } from "@/components/sidebar-link";

export type SidebarDropdownLink = {
  href: string;
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  isActive: boolean;
  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
};

type SidebarNavDropdownProps = {
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  isGroupActive: boolean;
  defaultOpen?: boolean;
  popoverOpen: boolean;
  onPopoverOpenChange: (open: boolean) => void;
  links: SidebarDropdownLink[];
};

const menuButtonClass =
  "flex h-[34px] items-center gap-[10px] rounded-[10px] border-none px-3 py-2 font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150";

const popoverTriggerClass =
  "flex h-8 min-h-8 w-8 min-w-8 shrink-0 p-0 justify-center items-center rounded-lg border-none font-['Lexend_Deca'] text-[13px] font-normal transition-all duration-150";

const subLinkClassName = "w-full";
const subLinkActiveClassName =
  "text-accent bg-accent/10 font-semibold";
const subLinkInactiveClassName =
  "text-[#575a62] hover:bg-[#1d1d39] hover:text-white";

export function SidebarNavDropdown({
  label,
  icon: Icon,
  isGroupActive,
  defaultOpen = false,
  popoverOpen,
  onPopoverOpenChange,
  links,
}: SidebarNavDropdownProps) {
  if (links.length === 0) return null;

  return (
    <SidebarMenuItem className="w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:min-h-8">
      <div className="w-full group-data-[collapsible=icon]:hidden">
        <Collapsible
          className="group/collapsible w-full"
          defaultOpen={defaultOpen || isGroupActive}
        >
          <CollapsibleTrigger asChild>
            <SidebarMenuButton
              tooltip={label}
              className={cn(
                menuButtonClass,
                isGroupActive
                  ? "bg-[#1d1d39] text-white font-semibold"
                  : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white",
              )}
            >
              <Icon className="size-[15px] shrink-0" />
              <span className="flex-1">{label}</span>
              <ChevronRight className="ml-auto size-3 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
            </SidebarMenuButton>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <SidebarMenuSub className="mx-0 border-l border-black/6 ml-[14px] pl-3 mt-0.5 gap-0.5">
              {links.map((link) => (
                <SidebarMenuSubItem key={link.href}>
                  <SidebarLink
                    href={link.href}
                    icon={link.icon}
                    label={link.label}
                    isActive={link.isActive}
                    onClick={link.onClick}
                    activeClassName={subLinkActiveClassName}
                    inactiveClassName={subLinkInactiveClassName}
                    className={subLinkClassName}
                  />
                </SidebarMenuSubItem>
              ))}
            </SidebarMenuSub>
          </CollapsibleContent>
        </Collapsible>
      </div>
      <div className="hidden w-full group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
        <Popover open={popoverOpen} onOpenChange={onPopoverOpenChange}>
          <PopoverTrigger asChild>
            <SidebarMenuButton
              className={cn(
                popoverTriggerClass,
                isGroupActive
                  ? "bg-[#1d1d39] text-white"
                  : "bg-transparent text-[#101828] hover:bg-[#1d1d39] hover:text-white",
              )}
            >
              <Icon className="size-4 shrink-0" />
            </SidebarMenuButton>
          </PopoverTrigger>
          <PopoverContent
            side="right"
            align="start"
            sideOffset={8}
            className="w-52 p-1.5 rounded-xl rounded-tr-[20px] rounded-br-[20px] border border-border/80 border-r border-white/60 bg-sidebar shadow-lg backdrop-blur-[15px]"
          >
            <nav className="flex flex-col gap-0.5">
              {links.map((link) => (
                <SidebarLink
                  key={link.href}
                  href={link.href}
                  icon={link.icon}
                  label={link.label}
                  isActive={link.isActive}
                  onClick={(e) => {
                    link.onClick?.(e);
                    onPopoverOpenChange(false);
                  }}
                />
              ))}
            </nav>
          </PopoverContent>
        </Popover>
      </div>
    </SidebarMenuItem>
  );
}