// shadcn-style DropdownMenu — Radix wrappers with kit token styling.
//
// 1:1 API with shadcn/ui reference so docs + examples lifted from
// there work without rename:
//
//   <DropdownMenu>
//     <DropdownMenuTrigger asChild><Button … /></DropdownMenuTrigger>
//     <DropdownMenuContent align="end">
//       <DropdownMenuLabel>Account</DropdownMenuLabel>
//       <DropdownMenuItem onSelect={…}>Settings</DropdownMenuItem>
//       <DropdownMenuSeparator />
//       <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
//         <DropdownMenuRadioItem value="system">System</DropdownMenuRadioItem>
//         <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
//         <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
//       </DropdownMenuRadioGroup>
//     </DropdownMenuContent>
//   </DropdownMenu>
//
// Not yet wrapped: CheckboxItem, Sub / SubTrigger / SubContent.
// Add when something needs them — keeps the surface lean.

import {
  forwardRef,
  type ComponentPropsWithoutRef,
  type ComponentRef,
  type ReactNode,
} from 'react'
import * as RDM from '@radix-ui/react-dropdown-menu'
import { cn } from '../cn'

// ---- Pass-through wrappers ----

export const DropdownMenu = RDM.Root
export const DropdownMenuTrigger = RDM.Trigger
export const DropdownMenuGroup = RDM.Group
export const DropdownMenuPortal = RDM.Portal
export const DropdownMenuRadioGroup = RDM.RadioGroup

// ---- Content ----

export const DropdownMenuContent = forwardRef<
  ComponentRef<typeof RDM.Content>,
  ComponentPropsWithoutRef<typeof RDM.Content>
>(({ className, sideOffset = 6, ...props }, ref) => (
  <RDM.Portal>
    <RDM.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        'z-50 min-w-[10rem] overflow-hidden rounded-md border border-border',
        'bg-popover text-popover-foreground shadow-lg p-1',
        'data-[state=open]:animate-in data-[state=closed]:animate-out',
        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
        'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
        'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',
        className,
      )}
      {...props}
    />
  </RDM.Portal>
))
DropdownMenuContent.displayName = 'DropdownMenuContent'

// ---- Label ----

export const DropdownMenuLabel = forwardRef<
  ComponentRef<typeof RDM.Label>,
  ComponentPropsWithoutRef<typeof RDM.Label> & { readonly inset?: boolean }
>(({ className, inset, ...props }, ref) => (
  <RDM.Label
    ref={ref}
    className={cn(
      'px-2 py-1.5 text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = 'DropdownMenuLabel'

// ---- Separator ----

export const DropdownMenuSeparator = forwardRef<
  ComponentRef<typeof RDM.Separator>,
  ComponentPropsWithoutRef<typeof RDM.Separator>
>(({ className, ...props }, ref) => (
  <RDM.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-border', className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = 'DropdownMenuSeparator'

// ---- Item ----
//
// `destructive` opts into the destructive token — shorthand for the
// common "Sign out / Delete" use case so callers don't repeat the
// same Tailwind chain.

export const DropdownMenuItem = forwardRef<
  ComponentRef<typeof RDM.Item>,
  ComponentPropsWithoutRef<typeof RDM.Item> & {
    readonly inset?: boolean
    readonly destructive?: boolean
  }
>(({ className, inset, destructive, ...props }, ref) => (
  <RDM.Item
    ref={ref}
    className={cn(
      'relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none',
      'transition-colors select-none cursor-pointer',
      'focus:bg-accent focus:text-accent-foreground',
      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      "[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 [&_svg]:pointer-events-none",
      inset && 'pl-8',
      destructive
        ? 'text-destructive focus:bg-destructive/10 focus:text-destructive'
        : 'text-foreground',
      className,
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = 'DropdownMenuItem'

// ---- RadioItem ----
//
// Indicator: filled dot on the left, slot reserved (pl-8) so
// unselected items stay aligned with selected ones.

const RadioDot = (): ReactNode => (
  <span className="size-2 rounded-full bg-current" />
)

export const DropdownMenuRadioItem = forwardRef<
  ComponentRef<typeof RDM.RadioItem>,
  ComponentPropsWithoutRef<typeof RDM.RadioItem>
>(({ className, children, ...props }, ref) => (
  <RDM.RadioItem
    ref={ref}
    className={cn(
      'relative flex items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none',
      'transition-colors select-none cursor-pointer text-foreground',
      'focus:bg-accent focus:text-accent-foreground',
      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2.5 flex size-3.5 items-center justify-center">
      <RDM.ItemIndicator>
        <RadioDot />
      </RDM.ItemIndicator>
    </span>
    {children}
  </RDM.RadioItem>
))
DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem'