/**
 * @factory/ui — ContextMenu (Radix `@radix-ui/react-context-menu` wrapper).
 * Opens on right-click; Radix handles the same keyboard set as the dropdown
 * menu (ArrowUp/Down, Enter, Escape, Tab) plus closing on outside click.
 */
import * as React from "react";
import * as RadixContextMenu from "@radix-ui/react-context-menu";
import { clsx } from "clsx";

export const ContextMenu = RadixContextMenu.Root;
export const ContextMenuTrigger = RadixContextMenu.Trigger;
export const ContextMenuGroup = RadixContextMenu.Group;
export const ContextMenuPortal = RadixContextMenu.Portal;
export const ContextMenuRadioGroup = RadixContextMenu.RadioGroup;

export const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof RadixContextMenu.Content>,
  React.ComponentPropsWithoutRef<typeof RadixContextMenu.Content>
>(({ className, ...props }, ref) => (
  <RadixContextMenu.Portal>
    <RadixContextMenu.Content
      ref={ref}
      className={clsx(
        "z-50 min-w-[10rem] rounded-md border border-border bg-popover p-1",
        "text-popover-foreground shadow-md focus:outline-none",
        className,
      )}
      {...props}
    />
  </RadixContextMenu.Portal>
));
ContextMenuContent.displayName = "ContextMenuContent";

export const ContextMenuItem = React.forwardRef<
  React.ElementRef<typeof RadixContextMenu.Item>,
  React.ComponentPropsWithoutRef<typeof RadixContextMenu.Item>
>(({ className, ...props }, ref) => (
  <RadixContextMenu.Item
    ref={ref}
    className={clsx(
      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
      "outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  />
));
ContextMenuItem.displayName = "ContextMenuItem";

export const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof RadixContextMenu.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof RadixContextMenu.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <RadixContextMenu.CheckboxItem
    ref={ref}
    checked={checked ?? false}
    className={clsx(
      "flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
      "outline-none data-[highlighted]:bg-accent",
      className,
    )}
    {...props}
  >
    <RadixContextMenu.ItemIndicator>✓</RadixContextMenu.ItemIndicator>
    {children}
  </RadixContextMenu.CheckboxItem>
));
ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";

export const ContextMenuLabel = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={clsx("px-2 py-1.5 text-xs text-muted-foreground", className)} {...props} />
);

export const ContextMenuSeparator = ({
  className,
  ...props
}: React.ComponentPropsWithoutRef<typeof RadixContextMenu.Separator>) => (
  <RadixContextMenu.Separator className={clsx("my-1 h-px bg-border", className)} {...props} />
);