import { useState } from 'react';
import { Search, Filter } from 'lucide-react';
import Input from '@/components/ui/Input';
import Button from '@/components/ui/Button';

interface Category {
  id: string;
  label: string;
  icon: React.ElementType;
  description: string;
  color?: string;
}

interface SearchAndFilterBarProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  activeCategory: string;
  onCategoryChange: (category: string) => void;
  categories: Category[];
  leaguesByCategory: Record<string, any[]>;
  className?: string;
}

export function SearchAndFilterBar({
  searchQuery,
  onSearchChange,
  activeCategory,
  onCategoryChange,
  categories,
  leaguesByCategory,
  className,
}: SearchAndFilterBarProps) {
  const [showFilters, setShowFilters] = useState(false);

  return (
    <div className={`mb-6 ${className || ''}`}>
      <div className="flex flex-col lg:flex-row gap-4">
        {/* Search */}
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
          <Input
            type="text"
            placeholder="Search leagues by name, description, or game..."
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-11"
          />
        </div>

        {/* Filter toggle (mobile) */}
        <Button
          type="button"
          variant="secondary"
          onClick={() => setShowFilters(!showFilters)}
          className="lg:hidden flex items-center gap-2"
        >
          <Filter className="w-4 h-4" />
          Filters
        </Button>
      </div>

      {/* Category Tabs */}
      <div className={`mt-4 ${showFilters ? 'block' : 'hidden lg:block'}`}>
        <div className="flex flex-wrap gap-2">
          {categories.map((category) => {
            const Icon = category.icon;
            const count = leaguesByCategory[category.id]?.length || 0;
            const isActive = activeCategory === category.id;

            return (
              <button
                key={category.id}
                type="button"
                onClick={() => onCategoryChange(category.id)}
                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-200 ${
                  isActive
                    ? 'bg-primary-blue text-white shadow-[0_0_15px_rgba(25,140,255,0.3)]'
                    : 'bg-iron-gray/60 text-gray-400 border border-charcoal-outline hover:border-gray-500 hover:text-white'
                }`}
              >
                <Icon className={`w-3.5 h-3.5 ${!isActive && category.color ? category.color : ''}`} />
                <span>{category.label}</span>
                {count > 0 && (
                  <span className={`px-1.5 py-0.5 rounded-full text-[10px] ${isActive ? 'bg-white/20' : 'bg-charcoal-outline/50'}`}>
                    {count}
                  </span>
                )}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}