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

const DropdownContext = createContext<any>(null);

export const DropdownMenuRoot = ({ children }: any) => {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);
  return (
    <DropdownContext.Provider value={{ open, setOpen }}>
      <div ref={ref} className="relative inline-block">{children}</div>
    </DropdownContext.Provider>
  );
};
DropdownMenuRoot.displayName = "DropdownMenu";

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

export const DropdownMenuContent = React.forwardRef<any, any>(({ className = '', children, ...props }, ref) => {
  const { open } = useContext(DropdownContext);
  if (!open) return null;
  return (
    <div ref={ref} className={`absolute z-50 mt-1 min-w-[8rem] overflow-hidden rounded-md border border-border bg-surface p-1 text-text shadow-md animate-in fade-in-0 zoom-in-95 ${className}`} {...props}>
      {children}
    </div>
  );
});
DropdownMenuContent.displayName = "DropdownMenuContent";

export const DropdownMenuItem = React.forwardRef<any, any>(({ className = '', onClick, ...props }, ref) => {
  const { setOpen } = useContext(DropdownContext);
  return (
    <div ref={ref} onClick={(e) => { setOpen(false); onClick?.(e); }} className={`relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-surface-hover hover:text-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`} {...props} />
  );
});
DropdownMenuItem.displayName = "DropdownMenuItem";

export const DropdownMenuLabel = React.forwardRef<any, any>(({ className = '', ...props }, ref) => (
  <div ref={ref} className={`px-2 py-1.5 text-sm font-semibold ${className}`} {...props} />
));
DropdownMenuLabel.displayName = "DropdownMenuLabel";

export const DropdownMenuSeparator = React.forwardRef<any, any>(({ className = '', ...props }, ref) => (
  <div ref={ref} className={`-mx-1 my-1 h-px bg-border ${className}`} {...props} />
));
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";

export const DropdownMenuGroup = ({ children }: any) => <>{children}</>;
export const DropdownMenuPortal = ({ children }: any) => <>{children}</>;
export const DropdownMenuSub = ({ children }: any) => <>{children}</>;
export const DropdownMenuSubContent = DropdownMenuContent;
export const DropdownMenuSubTrigger = DropdownMenuItem;
export const DropdownMenuRadioGroup = DropdownMenuGroup;
export const DropdownMenuCheckboxItem = DropdownMenuItem;
export const DropdownMenuRadioItem = DropdownMenuItem;
export const DropdownMenuShortcut = ({ className = '', ...props }: any) => <span className={`ml-auto text-xs tracking-widest opacity-60 ${className}`} {...props} />;