'use client';

import { useCallback, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { ChevronDown } from 'lucide-react';
import { AnimatePresence, motion } from 'framer-motion';
import { cn } from '@/lib/admin/utils';

type CustomDropdownProps = {
  value: string;
  onChange: (value: string) => void;
  options: string[];
  prefix?: string;
  className?: string;
};

export function CustomDropdown({ value, onChange, options, prefix = '', className = '' }: CustomDropdownProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [menuPos, setMenuPos] = useState<{ top: number; left: number; width: number } | null>(null);
  const [isMounted, setIsMounted] = useState(false);
  const buttonRef = useRef<HTMLButtonElement | null>(null);
  const menuRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  const updatePosition = useCallback(() => {
    const button = buttonRef.current;
    if (!button) return;
    const rect = button.getBoundingClientRect();
    const width = Math.max(rect.width, 180);
    const top = rect.bottom + 6;
    let left = rect.left;
    if (typeof window !== 'undefined') {
      const maxLeft = window.innerWidth - width - 8;
      if (left > maxLeft) left = Math.max(8, maxLeft);
    }
    setMenuPos({ top, left, width });
  }, []);

  useEffect(() => {
    if (!isOpen) return;
    updatePosition();

    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Node;
      if (buttonRef.current?.contains(target) || menuRef.current?.contains(target)) {
        return;
      }
      setIsOpen(false);
    };

    const handleDismiss = () => {
      updatePosition();
    };

    window.addEventListener('mousedown', handleClickOutside);
    window.addEventListener('scroll', handleDismiss, true);
    window.addEventListener('resize', handleDismiss);
    return () => {
      window.removeEventListener('mousedown', handleClickOutside);
      window.removeEventListener('scroll', handleDismiss, true);
      window.removeEventListener('resize', handleDismiss);
    };
  }, [isOpen, updatePosition]);

  return (
    <div className={cn('relative', className)}>
      <button
        ref={buttonRef}
        type="button"
        onClick={() => setIsOpen((prev) => !prev)}
        className={cn('w-full flex items-center gap-2 px-4 py-2.5 bg-white/[0.02] border border-white/5 hover:bg-white/5 rounded-xl text-sm font-medium transition-all text-white min-w-[140px] justify-between group', className)}
      >
        <span className="flex items-center gap-2">
          {prefix ? <span className="text-gray-500">{prefix}</span> : null}
          <span>{value}</span>
        </span>
        <ChevronDown className={cn('w-4 h-4 text-gray-500 transition-transform group-hover:text-gray-300 shrink-0', isOpen && 'rotate-180')} />
      </button>
      {isMounted && isOpen && menuPos
        ? createPortal(
          <AnimatePresence>
            <motion.div
              ref={menuRef}
              key="dropdown-portal"
              initial={{ opacity: 0, y: 5 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 5 }}
              transition={{ duration: 0.15 }}
              style={{ position: 'fixed', top: menuPos.top, left: menuPos.left, width: menuPos.width }}
              className="bg-[#0A0A0A]/95 backdrop-blur-xl border border-white/10 rounded-xl shadow-[0_10px_40px_rgba(0,0,0,0.5)] overflow-hidden z-[200] flex flex-col p-1.5"
            >
              {options.map((option) => (
                <button
                  key={option}
                  type="button"
                  onClick={() => { onChange(option); setIsOpen(false); }}
                  className={cn('text-left px-3 py-2 text-sm rounded-lg hover:bg-white/5 transition-colors', value === option ? 'text-violet-400 font-medium bg-violet-500/10' : 'text-gray-300')}
                >
                  {option}
                </button>
              ))}
            </motion.div>
          </AnimatePresence>,
          document.body
        )
        : null}
    </div>
  );
}