// ~/src/siteplane/components/menu/menu.tsx

"use client";

import { Menu as MenuPrimitive } from "@base-ui/react/menu";
import { ChevronRightIcon } from "lucide-react";
import type * as React from "react";

import {
  type SiteplaneControlSize,
  SiteplaneUIPortalScope,
} from "../../system/provider/siteplane-ui-provider";
import {
  ChoiceMenuItemCheck,
  choiceMenuItemCheckGridClassName,
  choiceMenuItemClassName,
  choiceMenuItemEndGridClassName,
  choiceMenuItemEndLabelClassName,
  choiceMenuItemLabelClassName,
  choiceMenuItemSwitchGridClassName,
  choiceMenuItemSwitchLabelClassName,
  choiceMenuSwitchSize,
  menuRowLabel,
} from "../../system/styles/choice-menu-item";
import { cn, type WithStringClassName } from "../../system/utils/cn";
import { slotClass } from "../../system/utils/slot-class";
import {
  menuGroupLabelClassName,
  menuItemClassName,
  menuPopupVariantClassNames,
  menuPopupWidthClassNames,
  menuSeparatorClassName,
  menuShortcutClassName,
  menuSubTriggerClassName,
  type MenuPopupVariant,
  type MenuPopupWidth,
} from "./menu-shared";
import {
  switchMenuTrackClassName,
  switchThumbClassName,
  switchVariants,
} from "../switch/switch";

export const MenuCreateHandle: typeof MenuPrimitive.createHandle =
  MenuPrimitive.createHandle;
export const Menu: typeof MenuPrimitive.Root = MenuPrimitive.Root;
// Base UI's own Portal type, with className narrowed to a string.
export const MenuPortal: React.ForwardRefExoticComponent<
  WithStringClassName<Omit<MenuPrimitive.Portal.Props, "ref">> &
    React.RefAttributes<HTMLDivElement>
> = MenuPrimitive.Portal;

export function MenuTrigger({
  className,
  children,
  ...props
}: WithStringClassName<MenuPrimitive.Trigger.Props>) {
  return (
    <MenuPrimitive.Trigger
      className={cn(slotClass("menu-trigger", props), className)}
      data-slot="menu-trigger"
      {...props}
    >
      {children}
    </MenuPrimitive.Trigger>
  );
}

export function MenuPopup({
  children,
  className,
  sideOffset = 4,
  align = "center",
  alignOffset,
  side = "bottom",
  anchor,
  portalProps,
  width = "auto",
  variant = "default",
  ...props
}: WithStringClassName<MenuPrimitive.Popup.Props> & {
  align?: MenuPrimitive.Positioner.Props["align"];
  sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"];
  alignOffset?: MenuPrimitive.Positioner.Props["alignOffset"];
  side?: MenuPrimitive.Positioner.Props["side"];
  anchor?: MenuPrimitive.Positioner.Props["anchor"];
  portalProps?: WithStringClassName<MenuPrimitive.Portal.Props>;
  width?: MenuPopupWidth;
  variant?: MenuPopupVariant;
}) {
  return (
    <MenuPortal {...portalProps}>
      <SiteplaneUIPortalScope>
        <MenuPrimitive.Positioner
          align={align}
          alignOffset={alignOffset}
          anchor={anchor}
          className="sp-menu-positioner z-50"
          data-slot="menu-positioner"
          side={side}
          sideOffset={sideOffset}
        >
          <MenuPrimitive.Popup
            className={cn(
              slotClass("menu-popup", props),
              menuPopupVariantClassNames[variant],
              menuPopupWidthClassNames[width],
              className,
            )}
            data-slot="menu-popup"
            data-variant={variant === "glass" ? variant : undefined}
            {...props}
          >
            <div className="max-h-(--available-height) w-full overflow-y-auto p-1">
              {children}
            </div>
          </MenuPrimitive.Popup>
        </MenuPrimitive.Positioner>
      </SiteplaneUIPortalScope>
    </MenuPortal>
  );
}

export function MenuGroup(
  props: WithStringClassName<MenuPrimitive.Group.Props>,
) {
  return (
    <MenuPrimitive.Group
      data-slot="menu-group"
      {...props}
      className={cn(slotClass("menu-group", props), props.className)}
    />
  );
}
export function MenuItem({
  className,
  children,
  inset,
  variant = "default",
  ...props
}: WithStringClassName<MenuPrimitive.Item.Props> & {
  inset?: boolean;
  variant?: "default" | "destructive";
}) {
  return (
    <MenuPrimitive.Item
      className={cn(
        slotClass("menu-item", props),
        menuItemClassName,
        className,
      )}
      data-inset={inset || undefined}
      data-slot="menu-item"
      data-variant={variant}
      {...props}
    >
      {menuRowLabel(children)}
    </MenuPrimitive.Item>
  );
}
export function MenuLinkItem({
  className,
  children,
  inset,
  variant = "default",
  closeOnClick = true,
  ...props
}: WithStringClassName<MenuPrimitive.LinkItem.Props> & {
  inset?: boolean;
  variant?: "default" | "destructive";
}) {
  return (
    <MenuPrimitive.LinkItem
      className={cn(
        slotClass("menu-link-item", props),
        menuItemClassName,
        className,
      )}
      closeOnClick={closeOnClick}
      data-inset={inset || undefined}
      data-slot="menu-link-item"
      data-variant={variant}
      {...props}
    >
      {menuRowLabel(children)}
    </MenuPrimitive.LinkItem>
  );
}
export function MenuCheckboxItem({
  className,
  children,
  checked,
  size,
  variant = "default",
  ...props
}: WithStringClassName<MenuPrimitive.CheckboxItem.Props> & {
  size?: SiteplaneControlSize;
  variant?: "default" | "switch";
}) {
  // The switch keeps the size that fits the compact row.
  const resolvedSize = size ?? choiceMenuSwitchSize;
  return (
    <MenuPrimitive.CheckboxItem
      checked={checked}
      className={cn(
        slotClass("menu-checkbox-item", props),
        choiceMenuItemClassName,
        variant === "switch"
          ? choiceMenuItemSwitchGridClassName
          : choiceMenuItemCheckGridClassName,
        className,
      )}
      data-size={resolvedSize}
      data-slot="menu-checkbox-item"
      data-variant={variant}
      {...props}
    >
      {variant === "switch" ? (
        <>
          <span className={choiceMenuItemSwitchLabelClassName}>
            {menuRowLabel(children)}
          </span>
          <MenuPrimitive.CheckboxItemIndicator
            className={cn(
              "sp-switch-track sp-base-switch",
              switchVariants({ size: resolvedSize }),
              switchMenuTrackClassName,
            )}
            data-foundation="switch"
            data-slot="switch-track"
            keepMounted
          >
            <span
              className={cn("sp-switch-thumb", switchThumbClassName)}
              data-slot="switch-thumb"
            />
          </MenuPrimitive.CheckboxItemIndicator>
        </>
      ) : (
        <>
          <MenuPrimitive.CheckboxItemIndicator
            className="col-start-1"
            keepMounted
          >
            <ChoiceMenuItemCheck />
          </MenuPrimitive.CheckboxItemIndicator>
          <span className={choiceMenuItemLabelClassName}>{children}</span>
        </>
      )}
    </MenuPrimitive.CheckboxItem>
  );
}
export function MenuRadioGroup(
  props: WithStringClassName<MenuPrimitive.RadioGroup.Props>,
) {
  return (
    <MenuPrimitive.RadioGroup
      data-slot="menu-radio-group"
      {...props}
      className={cn(slotClass("menu-radio-group", props), props.className)}
    />
  );
}
export function MenuRadioItem({
  className,
  children,
  indicatorPosition = "start",
  ...props
}: WithStringClassName<MenuPrimitive.RadioItem.Props> & {
  /**
   * Where the row shows its check: in the leading slot (`start`), or at the
   * end of the row (`end`) for identity rows that lead with a logo or an
   * avatar, such as the workspaces of a switcher.
   */
  indicatorPosition?: "start" | "end" | undefined;
}) {
  const end = indicatorPosition === "end";
  return (
    <MenuPrimitive.RadioItem
      className={cn(
        slotClass("menu-radio-item", props),
        choiceMenuItemClassName,
        end ? choiceMenuItemEndGridClassName : choiceMenuItemCheckGridClassName,
        className,
      )}
      data-indicator-position={end ? "end" : undefined}
      data-slot="menu-radio-item"
      {...props}
    >
      {end ? (
        <>
          <span className={choiceMenuItemEndLabelClassName}>
            {menuRowLabel(children)}
          </span>
          <MenuPrimitive.RadioItemIndicator className="col-start-2" keepMounted>
            <ChoiceMenuItemCheck />
          </MenuPrimitive.RadioItemIndicator>
        </>
      ) : (
        <>
          <MenuPrimitive.RadioItemIndicator className="col-start-1" keepMounted>
            <ChoiceMenuItemCheck />
          </MenuPrimitive.RadioItemIndicator>
          <span className={choiceMenuItemLabelClassName}>{children}</span>
        </>
      )}
    </MenuPrimitive.RadioItem>
  );
}
export function MenuGroupLabel({
  className,
  inset,
  ...props
}: WithStringClassName<MenuPrimitive.GroupLabel.Props> & { inset?: boolean }) {
  return (
    <MenuPrimitive.GroupLabel
      className={cn(
        slotClass("menu-label", props),
        menuGroupLabelClassName,
        className,
      )}
      data-inset={inset || undefined}
      data-slot="menu-label"
      {...props}
    />
  );
}
export function MenuSeparator({
  className,
  ...props
}: WithStringClassName<MenuPrimitive.Separator.Props>) {
  return (
    <MenuPrimitive.Separator
      className={cn(
        slotClass("menu-separator", props),
        menuSeparatorClassName,
        className,
      )}
      data-slot="menu-separator"
      {...props}
    />
  );
}
export function MenuShortcut({
  className,
  ...props
}: React.ComponentProps<"kbd">) {
  return (
    <kbd
      className={cn(
        slotClass("menu-shortcut", props),
        menuShortcutClassName,
        className,
      )}
      data-slot="menu-shortcut"
      {...props}
    />
  );
}
export function MenuSub(props: MenuPrimitive.SubmenuRoot.Props) {
  return <MenuPrimitive.SubmenuRoot data-slot="menu-sub" {...props} />;
}
export function MenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: WithStringClassName<MenuPrimitive.SubmenuTrigger.Props> & {
  inset?: boolean;
}) {
  return (
    <MenuPrimitive.SubmenuTrigger
      className={cn(
        slotClass("menu-sub-trigger", props),
        menuSubTriggerClassName,
        className,
      )}
      data-inset={inset || undefined}
      data-slot="menu-sub-trigger"
      {...props}
    >
      {menuRowLabel(children)}
      <ChevronRightIcon />
    </MenuPrimitive.SubmenuTrigger>
  );
}
export function MenuSubPopup({
  className,
  sideOffset = 0,
  alignOffset,
  align = "start",
  ...props
}: WithStringClassName<MenuPrimitive.Popup.Props> & {
  align?: MenuPrimitive.Positioner.Props["align"];
  sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"];
  alignOffset?: MenuPrimitive.Positioner.Props["alignOffset"];
  width?: MenuPopupWidth;
  variant?: MenuPopupVariant;
}) {
  const defaultAlignOffset = align !== "center" ? -5 : undefined;
  return (
    <MenuPopup
      align={align}
      alignOffset={alignOffset ?? defaultAlignOffset}
      className={className}
      data-slot="menu-sub-content"
      side="inline-end"
      sideOffset={sideOffset}
      {...props}
    />
  );
}

// The DropdownMenu names are the shadcn names of the Menu parts. They differ
// where shadcn names a part differently: DropdownMenuContent is MenuPopup,
// DropdownMenuLabel is MenuGroupLabel and DropdownMenuSubContent is
// MenuSubPopup.
export {
  MenuPrimitive,
  MenuCreateHandle as DropdownMenuCreateHandle,
  Menu as DropdownMenu,
  MenuPortal as DropdownMenuPortal,
  MenuTrigger as DropdownMenuTrigger,
  MenuPopup as DropdownMenuContent,
  MenuGroup as DropdownMenuGroup,
  MenuItem as DropdownMenuItem,
  MenuCheckboxItem as DropdownMenuCheckboxItem,
  MenuRadioGroup as DropdownMenuRadioGroup,
  MenuRadioItem as DropdownMenuRadioItem,
  MenuGroupLabel as DropdownMenuLabel,
  MenuSeparator as DropdownMenuSeparator,
  MenuShortcut as DropdownMenuShortcut,
  MenuSub as DropdownMenuSub,
  MenuSubTrigger as DropdownMenuSubTrigger,
  MenuSubPopup as DropdownMenuSubContent,
};


// ~/src/siteplane/components/menu/menu-shared.tsx

import { surfaceClassNames } from "../../system/styles/surface";
import { cn } from "../../system/utils/cn";
const shortcutClassName =
  "ms-auto font-medium font-sans text-muted-foreground/72 text-xs";

// cn() drops the default min-w-32 when a width mode or className sets a min width.
const menuPopupLayoutClassName =
  "flex min-w-32 origin-(--transform-origin) outline-none before:rounded-[inherit] focus:outline-none";
export const menuPopupClassName = cn(
  surfaceClassNames.floatingOverlay,
  menuPopupLayoutClassName,
);
export type MenuPopupWidth =
  "auto" | "trigger" | "content" | "at-least-trigger";
// `glass` lays the shared glass surface over whatever sits behind the menu.
export type MenuPopupVariant = "default" | "glass";
// Glass keeps the popup's frame and layout and takes the glass surface in
// place of the opaque one, whose fill, edge and shadow the glass rule draws.
export const menuPopupVariantClassNames: Record<MenuPopupVariant, string> = {
  default: menuPopupClassName,
  glass: cn(
    surfaceClassNames.floatingOverlayFrame,
    surfaceClassNames.glass,
    menuPopupLayoutClassName,
  ),
};
// Every popup stays within the space beside its anchor and is at most 20rem
// wide, a step of the spacing scale like its minimum (min-w-32); a longer row
// label ends in an ellipsis instead (rulebook K5). A trigger-wide popup keeps
// its trigger's width, and one at least as wide as its trigger grows to it.
// ContextMenu repeats these classes for its trigger area: Tailwind reads
// class names only as written.
export const menuPopupWidthClassNames: Record<MenuPopupWidth, string> = {
  auto: "max-w-[min(--spacing(80),var(--available-width))]",
  content: "w-max max-w-[min(--spacing(80),var(--available-width))]",
  trigger: "min-w-0 w-(--anchor-width) max-w-(--available-width)",
  "at-least-trigger":
    "min-w-(--anchor-width) w-max max-w-[min(max(--spacing(80),var(--anchor-width)),var(--available-width))]",
};
// Menus stay compact at every control size: rows, group labels and separators
// keep the default look, and the shared menu-row recipe in design-rework.css
// sets their height, text and icon.
export const menuItemClassName =
  "flex cursor-pointer select-none items-center whitespace-nowrap outline-none data-disabled:cursor-not-allowed data-disabled:opacity-(--sp-rw-disabled-opacity-action) [&>svg]:pointer-events-none [&>svg]:shrink-0";
// A group label wraps a long unbroken value, such as an email address, within
// the popup's width (rulebook K5); only rows stay on one line.
export const menuGroupLabelClassName =
  "font-(--sp-rw-font-weight-label) wrap-anywhere";
export const menuSeparatorClassName = "";
export const menuShortcutClassName = shortcutClassName;
export const menuSubTriggerClassName =
  "flex cursor-pointer items-center whitespace-nowrap outline-none data-disabled:cursor-not-allowed data-disabled:opacity-(--sp-rw-disabled-opacity-action) [&_svg]:pointer-events-none";


// ~/src/siteplane/components/menu/index.ts

export * from "./menu";