"use client";

import { type ComponentProps } from "react";
import { Menu as MenuPrimitive } from "@base-ui/react/menu";

import { cn } from "./cn";

/*
 * Base UI stays behind this file, as with Dialog.
 *
 * The primitive owns everything hard about a menu: roving focus across items,
 * arrow-key navigation, typeahead, Escape, outside-click, focus return to the
 * trigger, and anchored positioning. This wrapper adds styling and slots only.
 *
 * `container` is here for the same reason it is on DialogContent — a portal
 * re-parents to document.body and would otherwise escape the `data-brand`
 * subtree that supplies the theme.
 */

// Menu.Root renders no DOM of its own, so it takes no `data-slot` marker.
function Menu(props: MenuPrimitive.Root.Props) {
  return <MenuPrimitive.Root {...props} />;
}

function MenuTrigger(props: MenuPrimitive.Trigger.Props) {
  return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />;
}

function MenuGroup(props: MenuPrimitive.Group.Props) {
  return <MenuPrimitive.Group data-slot="menu-group" {...props} />;
}

export interface MenuContentProps
  extends
    MenuPrimitive.Popup.Props,
    Pick<
      MenuPrimitive.Positioner.Props,
      "align" | "alignOffset" | "side" | "sideOffset"
    > {
  container?: MenuPrimitive.Portal.Props["container"];
}

function MenuContent({
  className,
  container,
  align = "start",
  alignOffset = 0,
  side = "bottom",
  sideOffset = 4,
  ...props
}: MenuContentProps) {
  return (
    <MenuPrimitive.Portal container={container}>
      <MenuPrimitive.Positioner
        className="z-50 outline-none"
        align={align}
        alignOffset={alignOffset}
        side={side}
        sideOffset={sideOffset}
      >
        <MenuPrimitive.Popup
          data-slot="menu-content"
          className={cn(
            "z-50 min-w-40 origin-(--transform-origin) overflow-y-auto p-1",
            "max-h-(--available-height)",
            "rounded-(--menu-radius) border border-(color:--color-border)",
            "bg-(color:--color-surface-raised) text-(color:--color-content)",
            "shadow-lg outline-none",
            // Transitions rather than keyframes, so the primitive has nothing
            // to wait on before unmounting. Same reasoning as Dialog.
            "transition-[opacity,transform] duration-(--motion-duration) ease-(--motion-ease)",
            "data-starting-style:scale-95 data-starting-style:opacity-0",
            "data-ending-style:scale-95 data-ending-style:opacity-0",
            className,
          )}
          {...props}
        />
      </MenuPrimitive.Positioner>
    </MenuPrimitive.Portal>
  );
}

export interface MenuItemProps extends MenuPrimitive.Item.Props {
  variant?: "default" | "destructive";
}

function MenuItem({ className, variant = "default", ...props }: MenuItemProps) {
  return (
    <MenuPrimitive.Item
      data-slot="menu-item"
      data-variant={variant}
      className={cn(
        "relative flex cursor-default items-center gap-2 select-none",
        "h-(--menu-item-height) rounded-(--menu-item-radius) px-2 text-(length:--font-size-control)",
        "outline-none",
        // Base UI drives the roving highlight with `data-highlighted`; there is
        // no :hover rule here, so pointer and keyboard produce the same state.
        "data-highlighted:bg-(color:--color-action-neutral)",
        "data-[variant=destructive]:text-(color:--color-action-danger)",
        "data-[variant=destructive]:[--menu-danger-highlight:color-mix(in_oklch,var(--color-action-danger)_15%,transparent)]",
        "data-[variant=destructive]:data-highlighted:bg-(color:--menu-danger-highlight)",
        "data-disabled:pointer-events-none data-disabled:opacity-50",
        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
        "[&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  );
}

function MenuLabel({ className, ...props }: MenuPrimitive.GroupLabel.Props) {
  return (
    <MenuPrimitive.GroupLabel
      data-slot="menu-label"
      className={cn(
        "px-2 py-1 text-(length:--font-size-control-sm) leading-(--line-height-control-sm) font-medium text-(color:--color-content-muted)",
        className,
      )}
      {...props}
    />
  );
}

function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
  return (
    <MenuPrimitive.Separator
      data-slot="menu-separator"
      className={cn("-mx-1 my-1 h-px bg-(color:--color-border)", className)}
      {...props}
    />
  );
}

/** Right-aligned keyboard hint. Presentational only. */
function MenuShortcut({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="menu-shortcut"
      className={cn(
        "ml-auto text-(length:--font-size-control-sm) tracking-widest text-(color:--color-content-muted)",
        className,
      )}
      {...props}
    />
  );
}

export {
  Menu,
  MenuTrigger,
  MenuGroup,
  MenuContent,
  MenuItem,
  MenuLabel,
  MenuSeparator,
  MenuShortcut,
};