"use client";

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

/**
 * Radix Popover wrapped to match the dashboard's motion-driven popper pattern
 * (see {@link DropdownMenuContent}): surface the open state through context so
 * `PopoverContent` can drive `AnimatePresence` and let the scale/fade exit play
 * before unmount. Works for both controlled and uncontrolled callers.
 */

const PopoverContext = createContext<{ open: boolean }>({ open: false });

function Popover({
  open: openProp,
  defaultOpen,
  onOpenChange,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.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 (
    <PopoverContext.Provider value={contextValue}>
      <PopoverPrimitive.Root
        data-slot="popover"
        open={open}
        onOpenChange={handleOpenChange}
        {...props}
      />
    </PopoverContext.Provider>
  );
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
}

function PopoverContent({
  className,
  align = "start",
  sideOffset = 6,
  children,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  const { open } = use(PopoverContext);
  const reduce = useReducedMotion();
  return (
    <PopoverPrimitive.Portal forceMount>
      <LazyMotion features={domAnimation}>
        <AnimatePresence>
          {open && (
            <PopoverPrimitive.Content
              key="content"
              asChild
              forceMount
              align={align}
              sideOffset={sideOffset}
              {...props}
            >
              <m.div
                data-slot="popover-content"
                style={{
                  transformOrigin:
                    "var(--radix-popover-content-transform-origin)",
                }}
                className={cn(
                  // Cap to the collision-computed available height and scroll,
                  // matching DropdownMenu/Select — a tall popover otherwise
                  // bleeds past the viewport edge with no way to reach it.
                  "z-50 max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-overlay bg-surface p-1 text-ink-700 shadow-section outline-none",
                  className,
                )}
                variants={menuContentVariants(reduce)}
                initial="initial"
                animate="animate"
                exit="exit"
              >
                {children}
              </m.div>
            </PopoverPrimitive.Content>
          )}
        </AnimatePresence>
      </LazyMotion>
    </PopoverPrimitive.Portal>
  );
}

export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };