"use client";
import * as React from "react";
import * as M from "@radix-ui/react-menubar";
import { AnimatePresence, motion } from "motion/react";
import { CaretRightIcon, CheckIcon, CircleIcon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const BarCtx = React.createContext<{ value: string; id: string }>({ value: "", id: "" });
const MenuCtx = React.createContext("");

/** Same API as Radix Menubar. Tracks the open menu so popovers can spring in and out. */
export function Menubar({ className, value, defaultValue, onValueChange, ...p }: React.ComponentProps<typeof M.Root>) {
  const [inner, setInner] = React.useState(defaultValue ?? "");
  const current = value ?? inner;
  const id = React.useId();
  return (
    <BarCtx.Provider value={{ value: current, id }}>
      <M.Root
        value={current}
        onValueChange={(v) => {
          setInner(v);
          onValueChange?.(v);
        }}
        className={cn("inline-flex h-14 items-center gap-1 rounded-full bg-surface p-2 shadow-clay-sm", className)}
        {...p}
      />
    </BarCtx.Provider>
  );
}

export function MenubarMenu({ value, ...p }: React.ComponentProps<typeof M.Menu>) {
  const auto = React.useId();
  const v = value ?? auto;
  return (
    <MenuCtx.Provider value={v}>
      <M.Menu value={v} {...p} />
    </MenuCtx.Provider>
  );
}
export const MenubarGroup = M.Group;
export const MenubarPortal = M.Portal;
export const MenubarSub = M.Sub;
export const MenubarRadioGroup = M.RadioGroup;

export function MenubarTrigger({ className, children, ...p }: React.ComponentProps<typeof M.Trigger>) {
  const bar = React.useContext(BarCtx);
  const open = bar.value === React.useContext(MenuCtx);
  return (
    <M.Trigger
      className={cn(
        "relative flex cursor-pointer select-none items-center rounded-full px-4 py-2 text-sm font-bold text-on-surface-muted outline-none transition-colors hover:text-on-surface focus-visible:ring-4 focus-visible:ring-ring/40 data-[state=open]:text-on-surface",
        className
      )}
      {...p}
    >
      {open && (
        <motion.span layoutId={`${bar.id}-pill`} className="absolute inset-0 rounded-full bg-surface-sunken shadow-well" transition={springs.snappy} />
      )}
      <span className="relative">{children}</span>
    </M.Trigger>
  );
}

const panel = "z-50 min-w-[12rem] rounded-xl bg-surface p-2 text-on-surface shadow-clay";

export function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 10, children, ...p }: React.ComponentProps<typeof M.Content>) {
  const bar = React.useContext(BarCtx);
  const open = bar.value === React.useContext(MenuCtx);
  return (
    <AnimatePresence>
      {open && (
        <M.Portal forceMount>
          <M.Content asChild forceMount align={align} alignOffset={alignOffset} sideOffset={sideOffset} {...p}>
            <motion.div
              className={cn(panel, className)}
              style={{ transformOrigin: "var(--radix-menubar-content-transform-origin)" }}
              initial={{ opacity: 0, scale: 0.9, y: -6 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.12 } }}
              transition={springs.bouncy}
            >
              {children}
            </motion.div>
          </M.Content>
        </M.Portal>
      )}
    </AnimatePresence>
  );
}

const item =
  "relative flex cursor-pointer select-none items-center gap-2 rounded-[1.2rem] px-3 py-2 text-sm font-semibold outline-none transition-colors data-[highlighted]:bg-surface-sunken data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";

export function MenubarItem({ className, inset, variant, ...p }: React.ComponentProps<typeof M.Item> & { inset?: boolean; variant?: "default" | "destructive" }) {
  return (
    <M.Item
      className={cn(item, inset && "pl-9", variant === "destructive" && "text-danger data-[highlighted]:bg-danger-container data-[highlighted]:text-on-danger-container", className)}
      {...p}
    />
  );
}
export function MenubarCheckboxItem({ className, children, ...p }: React.ComponentProps<typeof M.CheckboxItem>) {
  return (
    <M.CheckboxItem className={cn(item, "pl-9", className)} {...p}>
      <span className="absolute left-3 flex size-4 items-center justify-center">
        <M.ItemIndicator>
          <CheckIcon weight="bold" />
        </M.ItemIndicator>
      </span>
      {children}
    </M.CheckboxItem>
  );
}
export function MenubarRadioItem({ className, children, ...p }: React.ComponentProps<typeof M.RadioItem>) {
  return (
    <M.RadioItem className={cn(item, "pl-9", className)} {...p}>
      <span className="absolute left-3 flex size-4 items-center justify-center">
        <M.ItemIndicator>
          <CircleIcon weight="fill" className="!size-2.5 text-primary" />
        </M.ItemIndicator>
      </span>
      {children}
    </M.RadioItem>
  );
}
export function MenubarLabel({ className, inset, ...p }: React.ComponentProps<typeof M.Label> & { inset?: boolean }) {
  return <M.Label className={cn("px-3 py-1.5 text-xs font-bold uppercase tracking-wide text-on-surface-muted", inset && "pl-9", className)} {...p} />;
}
export function MenubarSeparator({ className, ...p }: React.ComponentProps<typeof M.Separator>) {
  return <M.Separator className={cn("mx-2 my-1.5 h-px bg-outline/60", className)} {...p} />;
}
export function MenubarShortcut({ className, ...p }: React.ComponentProps<"span">) {
  return <span className={cn("ml-auto pl-4 font-mono text-xs text-on-surface-muted", className)} {...p} />;
}
export function MenubarSubTrigger({ className, inset, children, ...p }: React.ComponentProps<typeof M.SubTrigger> & { inset?: boolean }) {
  return (
    <M.SubTrigger className={cn(item, "data-[state=open]:bg-surface-sunken", inset && "pl-9", className)} {...p}>
      {children}
      <CaretRightIcon weight="bold" className="ml-auto" />
    </M.SubTrigger>
  );
}
export function MenubarSubContent({ className, ...p }: React.ComponentProps<typeof M.SubContent>) {
  return (
    <M.Portal>
      <M.SubContent className={cn(panel, "origin-[var(--radix-menubar-content-transform-origin)]", className)} {...p} />
    </M.Portal>
  );
}
Installation
