const { useState, useRef, useEffect } = React;

window.CustomTeamSelect = function CustomTeamSelect({ value, onChange, teams, isFilter = false }) {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  const selectedTeam = teams.find(t => t.name === value);

  return (
    <div className="relative w-full" ref={dropdownRef}>
      <div 
        className="w-full bg-white border-2 border-gray-200 rounded-lg shadow-sm focus:border-blue-500 text-xs sm:text-sm py-2 sm:py-2.5 md:py-3 px-2.5 sm:px-3 hover:border-gray-300 transition-colors outline-none cursor-pointer flex items-center justify-between"
        onClick={() => setIsOpen(!isOpen)}
      >
        <div className="flex items-center gap-1.5 sm:gap-2 truncate mr-1">
          {value === 'All' ? (
            <>
              <div className="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full border-2 border-gray-300 flex-shrink-0"></div>
              <span className="font-medium text-gray-800 truncate">All Teams</span>
            </>
          ) : selectedTeam ? (
            <>
              <span className="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full shadow-sm flex-shrink-0" style={{ backgroundColor: selectedTeam.bgColor }}></span>
              <span className="font-medium text-gray-800 truncate">{selectedTeam.name}</span>
            </>
          ) : (
            <span className="text-gray-500 truncate">Select a Team</span>
          )}
        </div>
        <i data-lucide="chevron-down" className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500 flex-shrink-0"></i>
      </div>

      {isOpen && (
        <div className="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-auto">
          {isFilter && (
            <div 
              className="px-3 sm:px-4 py-2 sm:py-2.5 hover:bg-gray-50 cursor-pointer flex items-center gap-2 text-xs sm:text-sm border-b border-gray-100"
              onClick={() => { onChange({ target: { name: 'team', value: 'All' }}); setIsOpen(false); }}
            >
              <div className="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full border-2 border-gray-300 flex-shrink-0"></div>
              <span className="font-medium text-gray-600">All Teams</span>
            </div>
          )}
          {teams.map(team => (
            <div 
              key={team.id}
              className="px-3 sm:px-4 py-2 sm:py-2.5 hover:bg-gray-50 cursor-pointer flex items-center gap-2 text-xs sm:text-sm"
              onClick={() => { 
                onChange({ target: { name: 'team', value: team.name } }); 
                setIsOpen(false); 
              }}
            >
              <span className="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full shadow-sm flex-shrink-0" style={{ backgroundColor: team.bgColor }}></span>
              <span className="font-medium text-gray-800">{team.name}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};