"use client"

import * as React from "react"

import { cn } from "../../lib/utils"

/**
 * `NavigableMenu`, `MenuGroup` and `MenuItem` replace the `@wordpress/components` trio of the same
 * names - **1 import**, the sidebar in `UserPage`.
 *
 * NOT `ui/dropdown-menu`, AND THIS IS THE REUSE CALL WORTH RECORDING. That component is a Radix
 * DropdownMenu: it needs a trigger, it portals its content and it closes on selection. This is a
 * standing list of tabs down the side of a page - always visible, nothing to open. Radix has no
 * primitive for that, and forcing a dropdown into the shape would portal a permanent sidebar.
 *
 * WHAT `NavigableMenu` ACTUALLY DOES, and the only reason it is not a plain div: it is a
 * `role="menu"` container where Up and Down move focus between the items and wrap around. Tab alone
 * would step through every item one at a time, which is the behaviour WordPress replaced.
 *
 * `MenuItem` renders a real `<button>` carrying whatever className the call site passes, so the
 * existing `sidebar-menu-item` / `is-active` styling keeps working untouched.
 */

export interface NavigableMenuProps extends React.ComponentProps<"div"> {
  /** WP supports 'vertical', 'horizontal' and 'both'. The one call site is vertical. */
  orientation?: "vertical" | "horizontal"
}

function NavigableMenu({
  orientation = "vertical",
  className,
  onKeyDown,
  ...props
}: NavigableMenuProps) {
  const ref = React.useRef<HTMLDivElement>(null)

  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    onKeyDown?.(event)
    if (event.defaultPrevented || !ref.current) return

    const [previous, next] =
      orientation === "vertical"
        ? ["ArrowUp", "ArrowDown"]
        : ["ArrowLeft", "ArrowRight"]
    if (event.key !== previous && event.key !== next) return

    const items = Array.from(
      ref.current.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
    )
    if (!items.length) return

    const current = items.indexOf(document.activeElement as HTMLElement)
    const step = event.key === next ? 1 : -1
    // Wrapping is the point: at the last item, Down goes back to the first.
    const target = items[(current + step + items.length) % items.length]

    event.preventDefault()
    target?.focus()
  }

  return (
    <div
      ref={ref}
      data-slot="navigable-menu"
      role="menu"
      // A `role="menu"` element has to be focusable. -1 keeps it out of the tab order, so Tab still
      // lands on the items themselves and nothing about the existing keyboard path changes.
      tabIndex={-1}
      aria-orientation={orientation}
      className={cn("flex flex-col", className)}
      onKeyDown={handleKeyDown}
      {...props}
    />
  )
}

export interface MenuGroupProps extends React.ComponentProps<"div"> {
  label?: React.ReactNode
}

function MenuGroup({ label, className, children, ...props }: MenuGroupProps) {
  // Above the empty-group return: a group whose items empty out and come back would otherwise crash.
  const generated = React.useId().replace(/:/g, "")
  // WordPress renders nothing at all for an empty group, rather than an empty labelled box.
  if (!children) return null

  const labelId = label ? `menu-group-${generated}-label` : undefined

  return (
    <div
      data-slot="menu-group"
      role="group"
      aria-labelledby={labelId}
      className={cn("flex flex-col py-1", className)}
      {...props}
    >
      {label && (
        <div
          id={labelId}
          className="text-ink-muted px-3 py-1 text-xs font-medium uppercase tracking-wide"
        >
          {label}
        </div>
      )}
      {children}
    </div>
  )
}

function MenuItem({ className, children, ...props }: React.ComponentProps<"button">) {
  return (
    <button
      type="button"
      data-slot="menu-item"
      role="menuitem"
      className={cn(
        "text-ink hover:bg-accent focus-visible:ring-ring flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      {children}
    </button>
  )
}

export { MenuGroup, MenuItem, NavigableMenu }