'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { Check, ChevronDown } from 'lucide-react';
import { useEffect, useRef, type ReactNode } from 'react';

type UniversalDropdownProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  label: ReactNode;
  leadingIcon?: ReactNode;
  active?: boolean;
  align?: 'left' | 'right';
  widthClassName?: string;
  triggerClassName?: string;
  menuClassName?: string;
  menuPaddingClassName?: string;
  showChevron?: boolean;
  chevronClassName?: string;
  children: ReactNode;
};

type UniversalDropdownOptionProps = {
  onSelect: () => void;
  label: ReactNode;
  leftSlot?: ReactNode;
  rightSlot?: ReactNode;
  selected?: boolean;
  disabled?: boolean;
  className?: string;
};

export function UniversalDropdown({
  open,
  onOpenChange,
  label,
  leadingIcon,
  active = false,
  align = 'left',
  widthClassName = 'w-56',
  triggerClassName,
  menuClassName,
  menuPaddingClassName = 'p-2',
  showChevron = true,
  chevronClassName,
  children,
}: UniversalDropdownProps) {
  const dropdownRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!open) return;

    const handlePointerDown = (event: PointerEvent) => {
      if (!dropdownRef.current?.contains(event.target as Node)) {
        onOpenChange(false);
      }
    };

    document.addEventListener('pointerdown', handlePointerDown);
    return () => document.removeEventListener('pointerdown', handlePointerDown);
  }, [onOpenChange, open]);

  return (
    <div ref={dropdownRef} className="relative">
      <button
        type="button"
        onClick={(event) => {
          event.stopPropagation();
          onOpenChange(!open);
        }}
        className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm transition-all duration-300 ${
          active
            ? 'border-white/10 bg-white/10 text-white'
            : 'border-white/10 bg-white/5 text-gray-300 hover:border-white/20 hover:bg-white/[0.08] hover:text-white'
        } ${triggerClassName || ''}`}
      >
        {leadingIcon ? <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">{leadingIcon}</span> : null}
        <span className="min-w-0 flex-1 truncate text-left align-middle">{label}</span>
        {showChevron ? (
          <ChevronDown className={`h-3.5 w-3.5 shrink-0 opacity-70 transition-transform ${open ? 'rotate-180' : ''} ${chevronClassName || ''}`} />
        ) : null}
      </button>

      <AnimatePresence>
        {open ? (
          <motion.div
            initial={{ opacity: 0, y: 8, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 8, scale: 0.98 }}
            transition={{ duration: 0.18, ease: 'easeOut' }}
            onClick={(event) => event.stopPropagation()}
            className={`absolute ${align === 'right' ? 'right-0' : 'left-0'} top-[calc(100%+6px)] z-50 ${widthClassName} rounded-xl border border-white/10 bg-[#111]/95 ${menuPaddingClassName} shadow-[0_10px_32px_rgba(0,0,0,0.72)] backdrop-blur-xl ${menuClassName || ''}`}
          >
            {children}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}

export function UniversalDropdownOption({
  onSelect,
  label,
  leftSlot,
  rightSlot,
  selected = false,
  disabled = false,
  className,
}: UniversalDropdownOptionProps) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={onSelect}
      className={`inline-flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
        selected
          ? 'bg-violet-500/15 text-violet-100 hover:bg-violet-500/25'
          : 'text-gray-300 hover:bg-white/5 hover:text-white'
      } ${disabled ? 'cursor-not-allowed opacity-60' : ''} ${className || ''}`}
    >
      <span className="inline-flex min-w-0 items-center gap-2">
        {leftSlot ? <span className="shrink-0">{leftSlot}</span> : null}
        <span className="truncate">{label}</span>
      </span>
      <span className="inline-flex shrink-0 items-center gap-1.5">
        {rightSlot}
        {selected ? <Check className="h-4 w-4" /> : null}
      </span>
    </button>
  );
}