import { Search } from 'lucide-react';
import { Input } from '../ui/input';
import { WordType, CefrLevel, TermFilters } from '../../types/term';

interface FilterBarProps {
  filters: TermFilters;
  onFilterChange: (filters: TermFilters) => void;
}

export function FilterBar({ filters, onFilterChange }: FilterBarProps) {
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onFilterChange({ ...filters, query: e.target.value, page: 1 });
  };

  const handleWordTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onFilterChange({ 
      ...filters, 
      wordType: e.target.value as WordType | '', 
      page: 1 
    });
  };

  const handleCefrLevelChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onFilterChange({ 
      ...filters, 
      cefrLevel: e.target.value as CefrLevel | '', 
      page: 1 
    });
  };

  return (
    <div className="bg-white p-4 rounded-lg shadow mb-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* Search Input */}
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
          <Input
            type="text"
            placeholder="Pretraži riječi..."
            value={filters.query || ''}
            onChange={handleSearchChange}
            className="pl-10"
          />
        </div>

        {/* Word Type Filter */}
        <div>
          <select
            value={filters.wordType || ''}
            onChange={handleWordTypeChange}
            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
          >
            <option value="">Sve vrste riječi</option>
            <option value={WordType.NOUN}>Imenica</option>
            <option value={WordType.VERB}>Glagol</option>
            <option value={WordType.ADJECTIVE}>Pridjev</option>
            <option value={WordType.ADVERB}>Prilog</option>
            <option value={WordType.PRONOUN}>Zamjenica</option>
            <option value={WordType.PREPOSITION}>Prijedlog</option>
            <option value={WordType.CONJUNCTION}>Veznik</option>
            <option value={WordType.INTERJECTION}>Uzvik</option>
            <option value={WordType.PHRASE}>Fraza</option>
            <option value={WordType.OTHER}>Ostalo</option>
          </select>
        </div>

        {/* CEFR Level Filter */}
        <div>
          <select
            value={filters.cefrLevel || ''}
            onChange={handleCefrLevelChange}
            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
          >
            <option value="">Sve razine</option>
            <option value={CefrLevel.A1}>A1 - Početnik</option>
            <option value={CefrLevel.A2}>A2 - Osnovno</option>
            <option value={CefrLevel.B1}>B1 - Srednje</option>
            <option value={CefrLevel.B2}>B2 - Više srednje</option>
            <option value={CefrLevel.C1}>C1 - Napredno</option>
            <option value={CefrLevel.C2}>C2 - Majstorsko</option>
          </select>
        </div>
      </div>
    </div>
  );
}

