Popover

"use client";

import * as React from "react";
import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface PopoverProps {
  trigger: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement> & { ref?: React.Ref<HTMLButtonElement> }>;
  children: React.ReactNode | ((close: () => void) => React.ReactNode);
  align?: "start" | "center" | "end";
  side?: "bottom" | "top";
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  className?: string;
}

/** A floating panel anchored to a trigger. Closes on outside click and Escape. */
export function Popover({ trigger, children, align = "start", side = "bottom", open, onOpenChange, className }: PopoverProps) {
  const id = React.useId();
  const [internal, setInternal] = React.useState(false);
  const isOpen = open ?? internal;
  const rootRef = React.useRef<HTMLDivElement>(null);

  const setOpen = React.useCallback(
    (v: boolean) => {
      if (open === undefined) setInternal(v);
      onOpenChange?.(v);
    },
    [open, onOpenChange],
  );
  const close = React.useCallback(() => {
    setOpen(false);
    document.getElementById(`${id}-trigger`)?.focus();
  }, [setOpen, id]);

  React.useEffect(() => {
    if (!isOpen) return;
    const onDown = (e: PointerEvent) => !rootRef.current?.contains(e.target as Node) && setOpen(false);
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && close();
    document.addEventListener("pointerdown", onDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("pointerdown", onDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [isOpen, setOpen, close]);

  return (
    <div ref={rootRef} className="relative inline-flex">
      {React.cloneElement(trigger, {
        id: `${id}-trigger`,
        "aria-expanded": isOpen,
        "aria-controls": isOpen ? id : undefined,
        "aria-haspopup": "dialog",
        onClick: () => setOpen(!isOpen),
      })}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            id={id}
            role="dialog"
            initial={{ opacity: 0, scale: 0.96, y: side === "bottom" ? -4 : 4 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.97, transition: { duration: 0.1 } }}
            transition={{ type: "spring", bounce: 0.15, duration: 0.28 }}
            style={{ transformOrigin: `${side === "bottom" ? "top" : "bottom"} ${align === "end" ? "right" : align === "center" ? "center" : "left"}` }}
            className={cn(
              "absolute z-50 min-w-56 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-elev-3",
              side === "bottom" ? "top-full mt-2" : "bottom-full mb-2",
              align === "start" && "left-0",
              align === "end" && "right-0",
              align === "center" && "left-1/2 -translate-x-1/2",
              className,
            )}
          >
            {typeof children === "function" ? children(close) : children}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}