import { useState, useRef, useEffect } from 'react';

interface Option {
  label: string;
  value: string;
  bgColor?: string;
  textColor?: string;
}

interface PremiumDropdownProps {
  value: string;
  options: Option[];
  onChange: (value: string) => void;
  disabled?: boolean;
  style?: React.CSSProperties;
}

export const PremiumDropdown = ({ value, options, onChange, disabled = false, style }: PremiumDropdownProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

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

  const selectedOption = options.find(opt => opt.value.toLowerCase() === value.toLowerCase());
  const displayLabel = selectedOption ? selectedOption.label : value;

  return (
    <div className="relative inline-block text-left w-full max-w-[125px]" ref={dropdownRef}>
      <button
        type="button"
        disabled={disabled}
        onClick={() => setIsOpen(!isOpen)}
        style={{
          ...style,
          backgroundColor: selectedOption?.bgColor,
          color: selectedOption?.textColor,
          borderColor: selectedOption?.textColor ? selectedOption?.textColor + '30' : undefined,
        }}
        className="w-full flex items-center justify-between gap-1.5 px-3 py-1.5 border rounded-xl text-[10px] font-extrabold uppercase tracking-wider transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed select-none"
      >
        <span className="truncate w-full text-center">{displayLabel}</span>
        <svg
          className={`h-3 w-3 shrink-0 transition-transform duration-200 opacity-60 ${isOpen ? 'rotate-180' : ''}`}
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clipRule="evenodd" />
        </svg>
      </button>

      {isOpen && (
        <div className="absolute left-1/2 -translate-x-1/2 mt-1.5 w-[140px] rounded-xl bg-white border border-slate-100 shadow-xl z-50 py-1 overflow-hidden select-none">
          {options.map((opt) => {
            const active = opt.value.toLowerCase() === value.toLowerCase();
            return (
              <button
                key={opt.value}
                type="button"
                onClick={() => {
                  onChange(opt.value);
                  setIsOpen(false);
                }}
                className={`w-full text-left px-3.5 py-2 text-[10px] font-extrabold uppercase tracking-wider transition-colors duration-150 flex items-center justify-between
                  ${active 
                    ? 'bg-slate-55 bg-slate-50 text-slate-900 font-black' 
                    : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
                  }`}
              >
                <span>{opt.label}</span>
                {active && (
                  <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: opt.bgColor || '#3b82f6' }} />
                )}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default PremiumDropdown;