Popover

"use client";

import { useState, useRef, useEffect, useCallback } from "react";
import { cn } from "@/lib";

interface PopoverProps {
  content: React.ReactNode;
  trigger: React.ReactNode;
  side?: "top" | "bottom" | "left" | "right";
  align?: "start" | "center" | "end";
  width?: number | string;
  onOpenChange?: (open: boolean) => void;
}

export function Popover({
  content,
  trigger,
  side = "bottom",
  align = "start",
  width = 320,
  onOpenChange,
}: PopoverProps) {
  const [open, setOpen] = useState(false);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const panelRef   = useRef<HTMLDivElement>(null);

  const close = useCallback(() => {
    setOpen(false);
    onOpenChange?.(false);
  }, [onOpenChange]);

  const toggle = () => {
    const next = !open;
    setOpen(next);
    onOpenChange?.(next);
  };

  useEffect(() => {
    if (!open) return;
    const handler = (e: MouseEvent | KeyboardEvent) => {
      if (e instanceof KeyboardEvent && e.key !== "Escape") return;
      if (e instanceof MouseEvent) {
        if (triggerRef.current?.contains(e.target as Node)) return;
        if (panelRef.current?.contains(e.target as Node)) return;
      }
      close();
    };
    document.addEventListener("mousedown", handler);
    document.addEventListener("keydown", handler);
    return () => {
      document.removeEventListener("mousedown", handler);
      document.removeEventListener("keydown", handler);
    };
  }, [open, close]);

  const verticalClass =
    side === "top"   ? "bottom-full mb-2" :
    side === "left"  ? "right-full mr-2 top-0" :
    side === "right" ? "left-full ml-2 top-0"  :
                       "top-full mt-2";

  const alignClass =
    align === "end"    ? "right-0" :
    align === "center" ? "left-1/2 -translate-x-1/2" :
                         "left-0";

  return (
    <div className="relative inline-flex">
      <button ref={triggerRef} onClick={toggle} aria-expanded={open} aria-haspopup="dialog">
        {trigger}
      </button>

      {open && (
        <div
          ref={panelRef}
          role="dialog"
          aria-modal="false"
          className={cn("absolute z-50 rounded-[var(--radius-lg)] border border-[rgb(var(--border))] overflow-hidden", verticalClass, alignClass)}
          style={{
            width,
            background: "rgb(var(--surface) / 0.94)",
            backdropFilter: "blur(24px) saturate(160%)",
            WebkitBackdropFilter: "blur(24px) saturate(160%)",
            boxShadow: "var(--shadow-sheet), inset 0 1px 0 rgba(255,255,255,0.08)",
          }}
        >
          <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent pointer-events-none" />
          {content}
        </div>
      )}
    </div>
  );
}