// @design-system: overlays/DropdownMenu
// Registered at /design-system#dropdownmenu-overlay - Phase 3 (Agent 3E) will render the gallery.

import type { ComponentPropsWithoutRef } from 'react';
import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
import { Check } from 'lucide-react';
import { cn } from '@/lib/cn';

// ─── Root + Trigger ────────────────────────────────────────────────────────

/** Root dropdown menu controller. */
export const DropdownMenu = RadixDropdown.Root;

/** Trigger element (usually a 3-dot icon button). */
export const DropdownMenuTrigger = RadixDropdown.Trigger;

/** Portal wrapper (internal use — not exported). */
const DropdownMenuPortal = RadixDropdown.Portal;

/** Group for related items. */
export const DropdownMenuGroup = RadixDropdown.Group;

/** Radio group for exclusive item selection. */
export const DropdownMenuRadioGroup = RadixDropdown.RadioGroup;

/** Sub menu root. */
export const DropdownMenuSub = RadixDropdown.Sub;

/** Sub menu trigger. */
export const DropdownMenuSubTrigger = RadixDropdown.SubTrigger;

// ─── Content ──────────────────────────────────────────────────────────────

/** Props for DropdownMenuContent */
export type DropdownMenuContentProps = ComponentPropsWithoutRef<typeof RadixDropdown.Content>;

/**
 * Multideal-styled dropdown menu content panel.
 */
export function DropdownMenuContent({
  className,
  sideOffset = 4,
  align = 'end',
  children,
  ...props
}: DropdownMenuContentProps) {
  return (
    <DropdownMenuPortal>
      <RadixDropdown.Content
        sideOffset={sideOffset}
        align={align}
        className={cn(
          'z-dropdown',
          'border-border-default bg-surface-base min-w-40 rounded-lg border',
          'shadow-md',
          'p-1',
          'focus:outline-none',
          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
          'data-[side=bottom]:slide-in-from-top-2',
          'data-[side=top]:slide-in-from-bottom-2',
          'motion-reduce:animate-none motion-reduce:transition-none',
          className,
        )}
        {...props}
      >
        {children}
      </RadixDropdown.Content>
    </DropdownMenuPortal>
  );
}

// ─── Item ──────────────────────────────────────────────────────────────────

const itemBase = cn(
  'relative flex cursor-pointer select-none items-center gap-2',
  'rounded-sm px-3 py-2',
  'text-sm text-neutral-700',
  'focus:outline-none transition-colors',
  'focus:bg-neutral-100 focus:text-neutral-900',
  'focus-visible:ring-2 focus-visible:ring-brand-primary-500 focus-visible:ring-inset',
  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
);

/** Props for DropdownMenuItem */
export interface DropdownMenuItemProps extends ComponentPropsWithoutRef<typeof RadixDropdown.Item> {
  /** Optional icon rendered at the start. */
  inset?: boolean;
}

/** A single menu item. */
export function DropdownMenuItem({ className, inset, ...props }: DropdownMenuItemProps) {
  return <RadixDropdown.Item className={cn(itemBase, inset && 'ps-8', className)} {...props} />;
}

/** Destructive (red) variant of DropdownMenuItem. */
export function DropdownMenuDestructiveItem({ className, ...props }: DropdownMenuItemProps) {
  return (
    <RadixDropdown.Item
      className={cn(
        itemBase,
        'text-danger-600 focus:bg-danger-50 focus:text-danger-700',
        className,
      )}
      {...props}
    />
  );
}

/** Props for DropdownMenuCheckboxItem */
export type DropdownMenuCheckboxItemProps = ComponentPropsWithoutRef<
  typeof RadixDropdown.CheckboxItem
>;

/** A checkable menu item. */
export function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: DropdownMenuCheckboxItemProps) {
  return (
    <RadixDropdown.CheckboxItem
      className={cn(itemBase, 'ps-8', className)}
      checked={checked}
      {...props}
    >
      <span className="absolute start-2 flex h-4 w-4 items-center justify-center">
        <RadixDropdown.ItemIndicator>
          <Check width={12} height={12} strokeWidth={3} aria-hidden="true" />
        </RadixDropdown.ItemIndicator>
      </span>
      {children}
    </RadixDropdown.CheckboxItem>
  );
}

/** Props for DropdownMenuLabel */
export interface DropdownMenuLabelProps extends ComponentPropsWithoutRef<
  typeof RadixDropdown.Label
> {
  inset?: boolean;
}

/** Non-interactive label for a group. */
export function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps) {
  return (
    <RadixDropdown.Label
      className={cn('px-3 py-1.5 text-xs font-medium text-neutral-500', inset && 'ps-8', className)}
      {...props}
    />
  );
}

/** Props for DropdownMenuSeparator */
export type DropdownMenuSeparatorProps = ComponentPropsWithoutRef<typeof RadixDropdown.Separator>;

/** Horizontal divider between menu groups. */
export function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps) {
  return (
    <RadixDropdown.Separator className={cn('my-1 h-px bg-neutral-200', className)} {...props} />
  );
}