"use client";

import { Menu } from "@base-ui/react/menu";
import { cn } from "@/lib/utils";
import {
  CaretDown,
  House,
  SquaresFour,
  Layout,
  Link,
  Gear,
  SignOut,
  Check,
} from "@phosphor-icons/react";
import { m, useReducedMotion } from "motion/react";
import { useState } from "react";

const MotionCaret = m.create(CaretDown as any);

type Item =
  | { id: string; type: "item"; icon: React.ElementType; label: string; shortcut?: string; variant?: "danger" }
  | { id: string; type: "separator" };

const menuItems: Item[] = [
  { id: "home", type: "item", icon: House,   label: "Home",        shortcut: "H" },
  { id: "components", type: "item", icon: SquaresFour, label: "Components",  shortcut: "C" },
  { id: "templates", type: "item", icon: Layout,  label: "Templates",   shortcut: "T" },
  { id: "sep-1", type: "separator" },
  { id: "copy-link", type: "item", icon: Link,    label: "Copy link",   shortcut: "⌘L" },
  { id: "settings", type: "item", icon: Gear,    label: "Settings",    shortcut: "⌘," },
  { id: "sep-2", type: "separator" },
  { id: "sign-out", type: "item", icon: SignOut, label: "Sign out", variant: "danger" },
];

export default function DropdownNav() {
  const [open, setOpen] = useState(false);
  const reduce = useReducedMotion();

  return (
    <div className="full center">
      <Menu.Root open={open} onOpenChange={setOpen}>
        {/* Trigger */}
        <Menu.Trigger
          className={cn(
            "group flex cursor-pointer items-center gap-2 rounded-full border border-border/60 bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm",
            "outline-none transition-colors duration-150",
            "hover:border-border hover:bg-muted/60",
            "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
            open && "border-border bg-muted/60",
          )}
        >
          Menu
          <m.span
            animate={{ rotate: open ? 180 : 0 }}
            transition={
              reduce
                ? { duration: 0 }
                : { type: "spring", stiffness: 500, damping: 30, mass: 0.6 }
            }
            className="flex"
          >
            <CaretDown className="size-3.5 text-muted-foreground" />
          </m.span>
        </Menu.Trigger>

        {/* Popup */}
        <Menu.Portal>
          <Menu.Positioner sideOffset={8} className="z-50">
            <Menu.Popup
              className={cn(
                "w-56 origin-top overflow-hidden rounded-xl border border-border/60 bg-popover/95 p-1 shadow-xl shadow-black/20 outline-none backdrop-blur-md",
                // CSS-based open/close animation
                "opacity-0 scale-95 -translate-y-1",
                "data-[open]:opacity-100 data-[open]:scale-100 data-[open]:translate-y-0",
                reduce
                  ? "transition-none"
                  : "transition-all duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]",
              )}
            >
              {menuItems.map((item) => {
                if (item.type === "separator") {
                  return (
                    <Menu.Group key={item.id}>
                      <hr className="my-1 h-px bg-border/50" />
                    </Menu.Group>
                  );
                }

                const Icon = item.icon;
                return (
                  <Menu.Item
                    key={item.label}
                    className={cn(
                      "group flex cursor-default select-none items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm outline-none",
                      "transition-colors duration-100",
                      item.variant === "danger"
                        ? "text-red-500/80 data-[highlighted]:bg-red-500/10 data-[highlighted]:text-red-500"
                        : "text-foreground/80 data-[highlighted]:bg-accent data-[highlighted]:text-foreground",
                    )}
                  >
                    <span
                      className={cn(
                        "flex size-6 shrink-0 items-center justify-center rounded-md",
                        item.variant === "danger"
                          ? "bg-red-500/10 text-red-500/70 group-data-[highlighted]:text-red-500"
                          : "bg-muted text-muted-foreground group-data-[highlighted]:text-foreground",
                      )}
                    >
                      <Icon className="size-3.5" />
                    </span>
                    <span className="flex-1">{item.label}</span>
                    {item.shortcut && (
                      <kbd className="ml-auto rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground/50 tabular-nums">
                        {item.shortcut}
                      </kbd>
                    )}
                  </Menu.Item>
                );
              })}
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>
    </div>
  );
}
Dropdown Menu
