"use client";

import { menuContentVariants } from "@aur-ui/ui/lib/motion";
import { cn } from "@aur-ui/ui/lib/utils";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import {
  AnimatePresence,
  domAnimation,
  LazyMotion,
  m,
  useReducedMotion,
} from "motion/react";
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
import type * as React from "react";
import { createContext, use, useMemo, useState } from "react";

// Mirror sheet.tsx: surface the open state through context so the (Sub)Content
// can drive `AnimatePresence` and let the exit tween play before unmount. The
// wrapper tracks state internally so it works for the common uncontrolled usage
// (no `open` prop) as well as controlled callers.
const DropdownMenuContext = createContext<{ open: boolean }>({ open: false });
const DropdownMenuSubContext = createContext<{ open: boolean }>({
  open: false,
});

function DropdownMenu({
  open: openProp,
  defaultOpen,
  onOpenChange,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  const [uncontrolledOpen, setUncontrolledOpen] = useState(
    defaultOpen ?? false,
  );
  const isControlled = openProp !== undefined;
  const open = isControlled ? openProp : uncontrolledOpen;
  const handleOpenChange = (next: boolean) => {
    if (!isControlled) setUncontrolledOpen(next);
    onOpenChange?.(next);
  };
  const contextValue = useMemo(() => ({ open }), [open]);
  return (
    <DropdownMenuContext.Provider value={contextValue}>
      <DropdownMenuPrimitive.Root
        data-slot="dropdown-menu"
        open={open}
        onOpenChange={handleOpenChange}
        {...props}
      />
    </DropdownMenuContext.Provider>
  );
}

function DropdownMenuPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
  );
}

function DropdownMenuTrigger({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
  return (
    <DropdownMenuPrimitive.Trigger
      data-slot="dropdown-menu-trigger"
      {...props}
    />
  );
}

function DropdownMenuContent({
  className,
  // 6px matches tooltip/popover/combobox — one popup gap across the system.
  sideOffset = 6,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  const { open } = use(DropdownMenuContext);
  const reduce = useReducedMotion();
  return (
    <DropdownMenuPrimitive.Portal forceMount>
      <LazyMotion features={domAnimation}>
        <AnimatePresence>
          {open && (
            <DropdownMenuPrimitive.Content
              key="content"
              asChild
              forceMount
              sideOffset={sideOffset}
              {...props}
            >
              <m.div
                data-slot="dropdown-menu-content"
                style={{
                  transformOrigin:
                    "var(--radix-dropdown-menu-content-transform-origin)",
                }}
                className={cn(
                  "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded-overlay bg-surface p-1 text-ink-700 shadow-section",
                  className,
                )}
                variants={menuContentVariants(reduce)}
                initial="initial"
                animate="animate"
                exit="exit"
              >
                {children}
              </m.div>
            </DropdownMenuPrimitive.Content>
          )}
        </AnimatePresence>
      </LazyMotion>
    </DropdownMenuPrimitive.Portal>
  );
}

function DropdownMenuGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
  );
}

function DropdownMenuItem({
  className,
  inset,
  variant = "default",
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  inset?: boolean;
  variant?: "default" | "destructive";
}) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "relative flex cursor-default items-center gap-2 rounded-control px-2 py-1.5 text-sm outline-hidden select-none focus:bg-ink-wash focus:text-ink-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger data-[variant=destructive]:focus:bg-danger-soft data-[variant=destructive]:focus:text-danger [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-ink-500 data-[variant=destructive]:*:[svg]:text-danger!",
        className,
      )}
      {...props}
    />
  );
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  // Render an ALWAYS-VISIBLE checkbox glyph (empty box → filled brand box on
  // check). Painting only a CheckIcon when checked would make
  // an unchecked row look identical to a plain item — visually misleading for
  // a multi-select menu.
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "group/cb relative flex cursor-default items-center gap-2 rounded-control py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-ink-wash focus:text-ink-900 data-[state=checked]:bg-brand-soft data-[state=checked]:text-brand data-[state=checked]:focus:bg-brand-soft-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span
        aria-hidden
        className={cn(
          "pointer-events-none absolute left-2 inline-flex size-4 items-center justify-center rounded-mark border border-ink-400/40 bg-surface transition-colors",
          "group-data-[state=checked]/cb:border-brand group-data-[state=checked]/cb:bg-brand group-data-[state=checked]/cb:text-white",
        )}
      >
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-3.5" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  );
}

function DropdownMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return (
    <DropdownMenuPrimitive.RadioGroup
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
  );
}

function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "relative flex cursor-default items-center gap-2 rounded-control py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-ink-wash focus:text-ink-900 data-[state=checked]:bg-brand-soft data-[state=checked]:text-brand data-[state=checked]:focus:bg-brand-soft-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  );
}

function DropdownMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
  inset?: boolean;
}) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
        "px-2 py-1.5 text-xs font-medium text-ink-500 data-[inset]:pl-8",
        className,
      )}
      {...props}
    />
  );
}

function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn("-mx-1 my-1 h-px bg-ink-wash", className)}
      {...props}
    />
  );
}

function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn("ml-auto text-xs tracking-widest text-ink-400", className)}
      {...props}
    />
  );
}

function DropdownMenuSub({
  open: openProp,
  defaultOpen,
  onOpenChange,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  const [uncontrolledOpen, setUncontrolledOpen] = useState(
    defaultOpen ?? false,
  );
  const isControlled = openProp !== undefined;
  const open = isControlled ? openProp : uncontrolledOpen;
  const handleOpenChange = (next: boolean) => {
    if (!isControlled) setUncontrolledOpen(next);
    onOpenChange?.(next);
  };
  const contextValue = useMemo(() => ({ open }), [open]);
  return (
    <DropdownMenuSubContext.Provider value={contextValue}>
      <DropdownMenuPrimitive.Sub
        data-slot="dropdown-menu-sub"
        open={open}
        onOpenChange={handleOpenChange}
        {...props}
      />
    </DropdownMenuSubContext.Provider>
  );
}

function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
  inset?: boolean;
}) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "flex cursor-default items-center gap-2 rounded-control px-2 py-1.5 text-sm outline-hidden select-none focus:bg-ink-wash focus:text-ink-900 data-[inset]:pl-8 data-[state=open]:bg-ink-wash data-[state=open]:text-ink-900 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-ink-500",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto size-4" aria-hidden />
    </DropdownMenuPrimitive.SubTrigger>
  );
}

function DropdownMenuSubContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  const { open } = use(DropdownMenuSubContext);
  const reduce = useReducedMotion();
  return (
    <LazyMotion features={domAnimation}>
      <AnimatePresence>
        {open && (
          <DropdownMenuPrimitive.SubContent asChild forceMount {...props}>
            <m.div
              data-slot="dropdown-menu-sub-content"
              style={{
                transformOrigin:
                  "var(--radix-dropdown-menu-content-transform-origin)",
              }}
              className={cn(
                "z-50 min-w-32 overflow-hidden rounded-overlay bg-surface p-1 text-ink-700 shadow-section",
                className,
              )}
              variants={menuContentVariants(reduce)}
              initial="initial"
              animate="animate"
              exit="exit"
            >
              {children}
            </m.div>
          </DropdownMenuPrimitive.SubContent>
        )}
      </AnimatePresence>
    </LazyMotion>
  );
}

export {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
};