"use client";
import * as React from "react";
import * as M from "@radix-ui/react-dropdown-menu";
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 MenuCtx = React.createContext(false);

const panel = "z-50 min-w-48 overflow-hidden rounded-xl bg-surface p-1.5 text-on-surface shadow-clay outline-none";
const item =
  "relative flex cursor-pointer select-none items-center gap-2 rounded-full 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";

/** Same API as Radix DropdownMenu. Tracks open state so content can animate out. */
export function DropdownMenu({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps<typeof M.Root>) {
  const [inner, setInner] = React.useState(defaultOpen ?? false);
  const current = open ?? inner;
  return (
    <MenuCtx.Provider value={current}>
      <M.Root
        open={current}
        onOpenChange={(v) => {
          setInner(v);
          onOpenChange?.(v);
        }}
        {...p}
      />
    </MenuCtx.Provider>
  );
}
export const DropdownMenuTrigger = M.Trigger;
export const DropdownMenuGroup = M.Group;
export const DropdownMenuPortal = M.Portal;
export const DropdownMenuSub = M.Sub;
export const DropdownMenuRadioGroup = M.RadioGroup;

export function DropdownMenuContent({ className, children, sideOffset = 6, ...p }: React.ComponentProps<typeof M.Content>) {
  const open = React.useContext(MenuCtx);
  return (
    <AnimatePresence>
      {open && (
        <M.Portal forceMount>
          <M.Content asChild forceMount sideOffset={sideOffset} {...p}>
            <motion.div
              className={cn(panel, className)}
              style={{ transformOrigin: "var(--radix-dropdown-menu-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>
  );
}

export function DropdownMenuSubContent({ className, children, ...p }: React.ComponentProps<typeof M.SubContent>) {
  return (
    <M.Portal>
      <M.SubContent asChild sideOffset={6} {...p}>
        <motion.div
          className={cn(panel, className)}
          style={{ transformOrigin: "var(--radix-dropdown-menu-content-transform-origin)" }}
          initial={{ opacity: 0, scale: 0.9, x: -6 }}
          animate={{ opacity: 1, scale: 1, x: 0 }}
          transition={springs.bouncy}
        >
          {children}
        </motion.div>
      </M.SubContent>
    </M.Portal>
  );
}

export function DropdownMenuItem({
  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 DropdownMenuSubTrigger({ 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" aria-hidden />
    </M.SubTrigger>
  );
}

export function DropdownMenuCheckboxItem({ className, children, ...p }: React.ComponentProps<typeof M.CheckboxItem>) {
  return (
    <M.CheckboxItem className={cn(item, "pl-9", className)} {...p}>
      <span className="absolute left-2.5 grid size-4 place-items-center">
        <M.ItemIndicator asChild>
          <motion.span initial={{ scale: 0 }} animate={{ scale: 1 }} transition={springs.squish}>
            <CheckIcon weight="bold" className="text-primary" aria-hidden />
          </motion.span>
        </M.ItemIndicator>
      </span>
      {children}
    </M.CheckboxItem>
  );
}

export function DropdownMenuRadioItem({ className, children, ...p }: React.ComponentProps<typeof M.RadioItem>) {
  return (
    <M.RadioItem className={cn(item, "pl-9", className)} {...p}>
      <span className="absolute left-2.5 grid size-4 place-items-center">
        <M.ItemIndicator asChild>
          <motion.span initial={{ scale: 0 }} animate={{ scale: 1 }} transition={springs.squish}>
            <CircleIcon weight="fill" className="size-2.5! text-primary" aria-hidden />
          </motion.span>
        </M.ItemIndicator>
      </span>
      {children}
    </M.RadioItem>
  );
}

export function DropdownMenuLabel({ 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 DropdownMenuSeparator({ 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 DropdownMenuShortcut({ className, ...p }: React.ComponentProps<"span">) {
  return <span className={cn("ml-auto font-mono text-xs tracking-widest text-on-surface-muted", className)} {...p} />;
}
Installation
