import React, { createContext, useContext, useState, useRef, useEffect } from 'react';
import { Slot } from './Slot';

const PopoverContext = createContext<any>(null);

export const PopoverRoot = ({ children }: any) => {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <PopoverContext.Provider value={{ open, setOpen }}>
      <div ref={ref} className="relative inline-block">
        {children}
      </div>
    </PopoverContext.Provider>
  );
};
PopoverRoot.displayName = "Popover";

export const PopoverTrigger = React.forwardRef<any, any>(({ asChild, onClick, ...props }, ref) => {
  const { setOpen, open } = useContext(PopoverContext);
  const Comp = asChild ? Slot : "button";
  return <Comp ref={ref} onClick={(e: any) => { setOpen(!open); onClick?.(e); }} {...props} />;
});
PopoverTrigger.displayName = "PopoverTrigger";

export const PopoverContent = React.forwardRef<HTMLDivElement, any>(({ className = '', children, align = "center", sideOffset = 4, ...props }, ref) => {
  const { open } = useContext(PopoverContext);
  if (!open) return null;

  let alignClass = "left-1/2 -translate-x-1/2";
  if (align === "start") alignClass = "left-0";
  if (align === "end") alignClass = "right-0";

  return (
    <div
      ref={ref}
      className={`absolute z-floatingPanel top-full mt-2 w-72 rounded-md border border-border bg-surface p-4 text-text shadow-md outline-none animate-in fade-in-0 zoom-in-95 ${alignClass} ${className}`}
      {...props}
    >
      {children}
    </div>
  );
});
PopoverContent.displayName = "PopoverContent";