'use client'

import type { ReactNode } from 'react'

import { ChevronRightIcon, CircleSmallIcon } from 'lucide-react'

import Link from 'next/link'

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'

import { cn } from '@/lib/utils'

export type NavigationItem = {
  title: string
  href: string
}

export type NavigationSection = {
  title: string
  icon?: ReactNode
} & (
  | {
      items: NavigationItem[]
      href?: never
    }
  | {
      items?: never
      href: string
    }
)

type Props = {
  trigger: ReactNode
  navigationData: NavigationSection[]
  activeSection?: string
  align?: 'center' | 'end' | 'start'
  menu?: any
}

const MenuDropdown = ({ trigger, navigationData, activeSection, align = 'start', menu }: Props) => {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
      <DropdownMenuContent
        className='mx-3 w-[min(93vw,500px)] sm:ml-8 md:w-[min(93vw,250px)] max-lg:md:mr-0'
        align={align}
      >
        {menu?.map((navItem: any, index:number) => {
          if (navItem.url) {
            // Extract section ID from href (e.g., "/#categories" -> "categories", "/#" -> "home")
            const sectionFromHref = navItem.url === '/#' ? 'home' : navItem.url.replace('/#', '')
            const isActive = sectionFromHref === activeSection

            return (
              <DropdownMenuItem key={index} asChild>
                <Link href={navItem.url} className={cn(isActive && 'bg-accent text-accent-foreground font-medium')}>
                  {navItem.name}
                </Link>
              </DropdownMenuItem>
            )
          }

          return (
            <Collapsible key={navItem.title} asChild>
              <DropdownMenuGroup>
                <CollapsibleTrigger asChild>
                  <DropdownMenuItem onSelect={event => event.preventDefault()} className='justify-between'>
                    {navItem.icon}
                    <span className='flex-1'>{navItem.title}</span>
                    <ChevronRightIcon className='shrink-0 transition-transform [[data-state=open]>&]:rotate-90' />
                  </DropdownMenuItem>
                </CollapsibleTrigger>
                <CollapsibleContent className='pl-2'>
                  {/* {navItem.items?.map(item => (
                    <DropdownMenuItem key={item.title} asChild>
                      <Link href={item.href}>
                        <CircleSmallIcon />
                        <span>{item.title}</span>
                      </Link>
                    </DropdownMenuItem>
                  ))} */}
                </CollapsibleContent>
              </DropdownMenuGroup>
            </Collapsible>
          )
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export default MenuDropdown