Glass context menus

"use client"

import * as React from "react"
import { ClipboardPaste, Copy, Scissors, Share2, Star } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"
import { glassDepth } from "@/components/ui/glass"

/* Glass context menu family: 5 frosted panels. The shell is the same as
   context-menu-styled - the target area opens a fixed menu at the cursor via
   onContextMenu (preventDefault), and it closes on an outside pointerdown / Escape /
   item selection. The only difference is the PANEL surface: each variant carries a
   different frosted-glass technique (neutral frost, primary tint, dark smoke, sharp
   crystal, layered depth). NO radix or portal. Color comes ONLY from tokens, via
   alpha color-mix. The coordinates come from the contextmenu event, with no
   randomness.

   The glass surface derives from the glassDepth scale in @ai2/glass (AGENTS.md 4.5)
   - the blur is never hand-written. Because glassDepth carries a [box-shadow]
   signature, the shadow-lg in menuBase was REMOVED (same tailwind-merge group; had
   it stayed, the signature would have silently dropped) - the ambient shadow is
   part of the signature. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

export type StyledContextMenuItem = {
  label: React.ReactNode
  icon?: React.ReactNode
  onSelect?: () => void
  shortcut?: React.ReactNode
  group?: string
  danger?: boolean
}

type ContextMenuProps = {
  className?: string
  size?: StyledSize
  children?: React.ReactNode
  items?: StyledContextMenuItem[]
}

const menuSize: Record<StyledSize, string> = {
  sm: "w-48",
  md: "w-56",
  lg: "w-64",
  xl: "w-72",
}

const targetBox =
  "flex h-28 w-full select-none items-center justify-center rounded-xl border border-dashed border-border bg-[color-mix(in_oklab,var(--color-foreground)_3%,transparent)] px-6 text-center text-sm text-muted-foreground"

/* Panel body: each variant adds its own glass surface as a class. */
const menuBase =
  "fixed z-50 origin-top-left overflow-hidden rounded-xl p-1.5 text-sm text-popover-foreground outline-none"

const itemBase =
  "flex w-full cursor-default items-center gap-2 rounded-md px-3 py-2 text-left text-sm text-popover-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] focus-visible:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:size-4 [&>svg]:shrink-0 [&>i]:text-base [&>i]:leading-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const itemDanger =
  "flex w-full cursor-default items-center gap-2 rounded-md px-3 py-2 text-left text-sm text-danger outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-danger)_12%,transparent)] focus-visible:bg-[color-mix(in_oklab,var(--color-danger)_12%,transparent)] focus-visible:ring-[3px] focus-visible:ring-danger/40 [&>svg]:size-4 [&>svg]:shrink-0 [&>i]:text-base [&>i]:leading-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const shortcutChip =
  "ml-auto inline-flex h-5 items-center rounded border border-border bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)] px-1.5 font-mono text-[11px] text-muted-foreground"

const defaultItems: StyledContextMenuItem[] = [
  { label: "Copy", icon: <Copy />, shortcut: "Ctrl C" },
  { label: "Cut", icon: <Scissors />, shortcut: "Ctrl X" },
  { label: "Paste", icon: <ClipboardPaste />, shortcut: "Ctrl V" },
  { label: "Share", icon: <Share2 /> },
  { label: "Add to favorites", icon: <Star /> },
]

/* One row: icon plus label plus an optional shortcut chip. onSelect runs on choice and the menu closes. data-menu-item is the marker for arrow-key navigation. */
function MenuItemButton({
  item,
  close,
}: {
  item: StyledContextMenuItem
  close: () => void
}) {
  return (
    <button
      type="button"
      role="menuitem"
      data-menu-item="true"
      onClick={() => {
        item.onSelect?.()
        close()
      }}
      className={item.danger ? itemDanger : itemBase}
    >
      {item.icon ? (
        <span className="inline-flex shrink-0" aria-hidden>
          {item.icon}
        </span>
      ) : null}
      <span className="flex-1 truncate">{item.label}</span>
      {item.shortcut ? <kbd className={shortcutChip}>{item.shortcut}</kbd> : null}
    </button>
  )
}

/* Shared shell: the target area plus a fixed AnimatePresence menu at the cursor position. surfaceClassName carries the variant's glass surface. */
function GlassContextMenuShell({
  className,
  size = "md",
  children,
  render,
  surfaceClassName,
}: {
  className?: string
  size?: StyledSize
  children?: React.ReactNode
  render: (close: () => void) => React.ReactNode
  surfaceClassName: string
}) {
  const [open, setOpen] = React.useState(false)
  const [coords, setCoords] = React.useState({ x: 0, y: 0 })
  const reduce = useReducedMotion()
  const menuRef = React.useRef<HTMLDivElement>(null)
  const menuId = React.useId()

  const close = React.useCallback(() => setOpen(false), [])

  const onContextMenu = (e: React.MouseEvent) => {
    e.preventDefault()
    setCoords({ x: e.clientX, y: e.clientY })
    setOpen(true)
  }

  React.useEffect(() => {
    if (!open) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setOpen(false)
        return
      }
      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return
      const node = menuRef.current
      if (!node) return
      const rows = Array.from(
        node.querySelectorAll<HTMLElement>('[data-menu-item="true"]')
      )
      if (rows.length === 0) return
      e.preventDefault()
      const current = rows.indexOf(document.activeElement as HTMLElement)
      const next =
        e.key === "ArrowDown"
          ? (current + 1) % rows.length
          : current <= 0
            ? rows.length - 1
            : current - 1
      rows[next]?.focus()
    }
    const onPointer = (e: PointerEvent) => {
      const node = menuRef.current
      if (node && e.target instanceof Node && !node.contains(e.target)) {
        setOpen(false)
      }
    }
    window.addEventListener("keydown", onKey)
    window.addEventListener("pointerdown", onPointer)
    return () => {
      window.removeEventListener("keydown", onKey)
      window.removeEventListener("pointerdown", onPointer)
    }
  }, [open])

  const anim = reduce
    ? { initial: { opacity: 1 }, animate: { opacity: 1 }, exit: { opacity: 1 } }
    : {
        initial: { opacity: 0, scale: 0.96 },
        animate: { opacity: 1, scale: 1 },
        exit: { opacity: 0, scale: 0.96 },
      }

  return (
    <div data-slot="styled-context-menu" className="w-full">
      <div
        data-slot="styled-context-menu-target"
        onContextMenu={onContextMenu}
        className={cn(targetBox, className)}
      >
        {children ?? "Right-click here"}
      </div>

      <AnimatePresence>
        {open ? (
          <motion.div
            ref={menuRef}
            id={menuId}
            role="menu"
            data-slot="styled-context-menu-content"
            style={{ left: coords.x, top: coords.y }}
            className={cn(menuBase, surfaceClassName, menuSize[size])}
            initial={anim.initial}
            animate={anim.animate}
            exit={anim.exit}
            transition={reduce ? { duration: 0 } : { duration: 0.14, ease: "easeOut" }}
          >
            {render(close)}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

function GlassMenu({
  className,
  size,
  children,
  items,
  surfaceClassName,
}: ContextMenuProps & { surfaceClassName: string }) {
  const list = items ?? defaultItems
  return (
    <GlassContextMenuShell
      className={className}
      size={size}
      surfaceClassName={surfaceClassName}
      render={(close) => (
        <div className="flex flex-col">
          {list.map((item, i) => (
            <MenuItemButton key={i} item={item} close={close} />
          ))}
        </div>
      )}
    >
      {children}
    </GlassContextMenuShell>
  )
}

/* Frost: a neutral translucent surface with a light border. Depth md (8px): the library's default and exactly the step it describes for a "menu". The neutral ground is left to the library; the character is the soft border alone. */
export function FrostContextMenu(props: ContextMenuProps) {
  return (
    <GlassMenu
      {...props}
      surfaceClassName={cn(
        glassDepth.md,
        "border border-[color-mix(in_oklab,var(--color-border)_70%,transparent)]"
      )}
    />
  )
}

/* Tint: an info-toned frosted surface plus an info border. Depth md (8px): deliberately the same step as Frost - the only difference is hue. The ground is overridden in both forms (with and without @supports), otherwise the library's bg-background/60 variant would hide the tint. */
export function TintContextMenu(props: ContextMenuProps) {
  return (
    <GlassMenu
      {...props}
      surfaceClassName={cn(
        glassDepth.md,
        "border border-[color-mix(in_oklab,var(--color-info)_30%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-info)_14%,var(--color-popover))] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_12%,transparent)]"
      )}
    />
  )
}

/* Smoke: dark foreground smoke with a low-contrast border. Depth lg (16px): the smoke turns what is behind into texture - the scale step closest to the intent of the old 24px. */
export function SmokeContextMenu(props: ContextMenuProps) {
  return (
    <GlassMenu
      {...props}
      surfaceClassName={cn(
        glassDepth.lg,
        "border border-[color-mix(in_oklab,var(--color-foreground)_12%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-foreground)_10%,var(--color-popover))] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_18%,transparent)]"
      )}
    />
  )
}

/* Crystal: clear glass, high saturation, bright edge. Depth sm (4px): it was already after a "very light blur" (the old value was 8px) and crystal = clarity. The old shadow-[inset...] was REMOVED: being in the same merge group as the signature, it was erasing it - the bright line on top is already the signature's own inset highlight. The edge brightness is driven by border plus saturate. */
export function CrystalContextMenu(props: ContextMenuProps) {
  return (
    <GlassMenu
      {...props}
      surfaceClassName={cn(
        glassDepth.sm,
        "border border-[color-mix(in_oklab,var(--color-background)_60%,var(--color-border))]",
        "bg-[color-mix(in_oklab,var(--color-popover)_55%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-popover)_55%,transparent)]",
        "supports-[backdrop-filter]:backdrop-saturate-150"
      )}
    />
  )
}

/* Depth: gradient glass from top to bottom, the deepest in the family. Depth xl (24px): the highest diffusion. The old shadow-xl was REMOVED (the same merge group as the signature); the depth is carried by the signature's ambient shadow plus the gradient layer, with the extra separation coming from an inset ring. */
export function DepthContextMenu(props: ContextMenuProps) {
  return (
    <GlassMenu
      {...props}
      surfaceClassName={cn(
        glassDepth.xl,
        "border border-[color-mix(in_oklab,var(--color-border)_60%,transparent)]",
        "bg-gradient-to-b from-[color-mix(in_oklab,var(--color-popover)_75%,transparent)] to-[color-mix(in_oklab,var(--color-popover)_45%,transparent)]",
        "ring-1 ring-inset ring-[color-mix(in_oklab,var(--color-background)_30%,transparent)]"
      )}
    />
  )
}