"use client";
import * as React from "react";
import * as N from "@radix-ui/react-navigation-menu";
import { motion } from "motion/react";
import { CaretDownIcon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

type Ctx = { id: string; value: string; hovered: string | null; setHovered: (v: string | null) => void };
const NavCtx = React.createContext<Ctx>({ id: "", value: "", hovered: null, setHovered: () => {} });
const ItemCtx = React.createContext("");

/** Same API as Radix NavigationMenu. Tracks open/hovered item so a pill can slide between triggers. */
export function NavigationMenu({
  className,
  children,
  value,
  defaultValue,
  onValueChange,
  viewport = true,
  ...p
}: React.ComponentProps<typeof N.Root> & { viewport?: boolean }) {
  const [inner, setInner] = React.useState(defaultValue ?? "");
  const [hovered, setHovered] = React.useState<string | null>(null);
  const current = value ?? inner;
  const id = React.useId();
  return (
    <NavCtx.Provider value={{ id, value: current, hovered, setHovered }}>
      <N.Root
        value={current}
        onValueChange={(v) => {
          setInner(v);
          onValueChange?.(v);
        }}
        className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
        {...p}
      >
        {children}
        {viewport && <NavigationMenuViewport />}
      </N.Root>
    </NavCtx.Provider>
  );
}

export function NavigationMenuList({ className, onPointerLeave, ...p }: React.ComponentProps<typeof N.List>) {
  const { setHovered } = React.useContext(NavCtx);
  return (
    <N.List
      onPointerLeave={(e) => {
        setHovered(null);
        onPointerLeave?.(e);
      }}
      className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
      {...p}
    />
  );
}

export function NavigationMenuItem({ value, ...p }: React.ComponentProps<typeof N.Item>) {
  const auto = React.useId();
  const v = value ?? auto;
  return (
    <ItemCtx.Provider value={v}>
      <N.Item value={v} className="relative" {...p} />
    </ItemCtx.Provider>
  );
}

export const navigationMenuTriggerStyle = () =>
  "relative inline-flex h-10 cursor-pointer items-center justify-center gap-1 rounded-full px-4 text-sm font-bold text-on-surface-muted transition-colors hover:text-on-surface focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 data-[state=open]:text-on-surface data-[active]:text-on-surface disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0";

function Pill({ item }: { item: string }) {
  const ctx = React.useContext(NavCtx);
  const shown = (ctx.hovered ?? ctx.value) === item;
  if (!shown) return null;
  return (
    <motion.span
      layoutId={`${ctx.id}-pill`}
      className="absolute inset-0 rounded-full bg-surface-sunken shadow-well"
      transition={springs.snappy}
    />
  );
}

export function NavigationMenuTrigger({ className, children, onPointerEnter, ...p }: React.ComponentProps<typeof N.Trigger>) {
  const item = React.useContext(ItemCtx);
  const ctx = React.useContext(NavCtx);
  const open = ctx.value === item;
  return (
    <N.Trigger
      onPointerEnter={(e) => {
        ctx.setHovered(item);
        onPointerEnter?.(e);
      }}
      className={cn(navigationMenuTriggerStyle(), "group", className)}
      {...p}
    >
      <Pill item={item} />
      <span className="relative">{children}</span>
      <motion.span className="relative" animate={{ rotate: open ? 180 : 0 }} transition={springs.squish}>
        <CaretDownIcon weight="bold" className="size-3.5" aria-hidden />
      </motion.span>
    </N.Trigger>
  );
}

export function NavigationMenuLink({ className, onPointerEnter, children, asChild, ...p }: React.ComponentProps<typeof N.Link>) {
  const item = React.useContext(ItemCtx);
  const ctx = React.useContext(NavCtx);
  return (
    <N.Link
      asChild={asChild}
      onPointerEnter={(e) => {
        if (item && !asChild) ctx.setHovered(item);
        onPointerEnter?.(e);
      }}
      className={cn(
        "block rounded-[1.2rem] p-3 text-sm font-medium transition-colors hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40",
        className
      )}
      {...p}
    >
      {children}
    </N.Link>
  );
}

/** A top-level link that sits in the list next to triggers and shares the sliding pill. */
export function NavigationMenuTopLink({ className, children, active, ...p }: React.ComponentProps<"a"> & { active?: boolean }) {
  const item = React.useContext(ItemCtx);
  const ctx = React.useContext(NavCtx);
  return (
    <N.Link asChild active={active}>
      <a
        onPointerEnter={() => ctx.setHovered(item)}
        data-active={active || undefined}
        className={cn(navigationMenuTriggerStyle(), className)}
        {...p}
      >
        <Pill item={item} />
        <span className="relative">{children}</span>
      </a>
    </N.Link>
  );
}

export function NavigationMenuContent({ className, ...p }: React.ComponentProps<typeof N.Content>) {
  return (
    <N.Content
      className={cn(
        "left-0 top-0 w-full p-3 data-[motion^=from-]:animate-in md:absolute md:w-auto",
        className
      )}
      {...p}
    />
  );
}

export function NavigationMenuViewport({ className, ...p }: React.ComponentProps<typeof N.Viewport>) {
  const { value } = React.useContext(NavCtx);
  return (
    <div className="absolute left-0 top-full flex justify-center pt-3">
      <motion.div
        initial={false}
        animate={value ? { opacity: 1, scale: 1, y: 0 } : { opacity: 0, scale: 0.92, y: -6 }}
        transition={value ? springs.bouncy : { duration: 0.12 }}
        style={{ transformOrigin: "top left", pointerEvents: value ? "auto" : "none" }}
      >
        <N.Viewport
          className={cn(
            "relative h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl bg-surface text-on-surface shadow-clay transition-[width,height] duration-300 ease-[cubic-bezier(.2,1.3,.4,1)] md:w-[var(--radix-navigation-menu-viewport-width)]",
            className
          )}
          {...p}
        />
      </motion.div>
    </div>
  );
}

export function NavigationMenuIndicator({ className, ...p }: React.ComponentProps<typeof N.Indicator>) {
  return (
    <N.Indicator className={cn("top-full z-[1] flex h-2 items-end justify-center overflow-hidden", className)} {...p}>
      <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-surface" />
    </N.Indicator>
  );
}
Installation
