import { Bookmark, Search, X } from 'lucide-react';

import {
  toClassroomSupportAgeFilter,
  toClassroomSupportCategoryFilter,
} from '@/business/classroom-support/selectors';
import type { ClassroomSupportFilters as ClassroomSupportFilterState } from '@/business/classroom-support/types';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { NativeSelect } from '@/components/ui/native-select';
import {
  CLASSROOM_SUPPORT_AGE_FILTERS,
  CLASSROOM_SUPPORT_CATEGORY_FILTERS,
  CLASSROOM_SUPPORT_ZONE_FILTERS,
} from '@/shared/constants/classroomSupport';
import type {
  ClassroomSupportAgeFilter,
  ClassroomSupportCategoryFilter,
  ClassroomSupportZoneFilter,
} from '@/shared/constants/classroomSupport';

interface ClassroomSupportFiltersProps {
  readonly filters: ClassroomSupportFilterState;
  readonly favoriteCount: number;
  readonly onSearchChange: (query: string) => void;
  readonly onCategoryChange: (filter: ClassroomSupportCategoryFilter) => void;
  readonly onAgeChange: (filter: ClassroomSupportAgeFilter) => void;
  readonly onZoneChange: (filter: ClassroomSupportZoneFilter) => void;
  readonly onToggleFavoritesOnly: () => void;
  readonly onClearSearch: () => void;
}

export function ClassroomSupportFilters({
  filters,
  favoriteCount,
  onSearchChange,
  onCategoryChange,
  onAgeChange,
  onZoneChange,
  onToggleFavoritesOnly,
  onClearSearch,
}: ClassroomSupportFiltersProps) {
  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-4 space-y-3">
      <div className="relative">
        <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
        <Input
          type="text"
          aria-label="Search strategies"
          value={filters.searchQuery}
          onChange={(event) => onSearchChange(event.target.value)}
          placeholder="Search strategies by name, behavior, or keyword..."
          className="w-full pl-10 pr-10 py-2.5 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-500 focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500/50 outline-none"
        />
        {filters.searchQuery && (
          <Button
            type="button"
            onClick={onClearSearch}
            aria-label="Clear strategy search"
            className="absolute right-3 top-1/2 -translate-y-1/2 bg-transparent hover:bg-transparent p-0 h-auto text-slate-500 hover:text-white"
          >
            <X size={16} />
          </Button>
        )}
      </div>
      <div className="flex flex-wrap gap-2 items-center">
        <NativeSelect
          value={filters.categoryFilter}
          aria-label="Filter by category"
          onChange={(event) => onCategoryChange(toClassroomSupportCategoryFilter(event.target.value))}
          className="px-3 py-2 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white focus:ring-2 focus:ring-emerald-500/50 outline-none"
        >
          {CLASSROOM_SUPPORT_CATEGORY_FILTERS.map((category) => (
            <option key={category.value} value={category.value}>{category.label}</option>
          ))}
        </NativeSelect>
        <NativeSelect
          value={filters.ageFilter}
          aria-label="Filter by age group"
          onChange={(event) => onAgeChange(toClassroomSupportAgeFilter(event.target.value))}
          className="px-3 py-2 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white focus:ring-2 focus:ring-emerald-500/50 outline-none"
        >
          {CLASSROOM_SUPPORT_AGE_FILTERS.map((age) => (
            <option key={age.value} value={age.value}>{age.label}</option>
          ))}
        </NativeSelect>
        <div className="flex gap-1.5">
          {CLASSROOM_SUPPORT_ZONE_FILTERS.map((zone) => (
            <Button
              key={zone.value}
              type="button"
              onClick={() => onZoneChange(zone.value === filters.zoneFilter ? 'all' : zone.value)}
              className={`h-auto px-3 py-1.5 rounded-lg text-xs font-medium transition-all border ${
                filters.zoneFilter === zone.value
                  ? `${zone.activeBg} ${zone.activeText} ring-2 ring-offset-1 ring-offset-slate-900 border-transparent`
                  : `${zone.bg} ${zone.text} border-transparent hover:opacity-80`
              }`}
            >
              {zone.label}
            </Button>
          ))}
        </div>
        <Button
          type="button"
          onClick={onToggleFavoritesOnly}
          leadingIcon={<Bookmark size={12} />}
          className={`h-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ml-auto border ${
            filters.showFavoritesOnly
              ? 'bg-amber-500/20 text-amber-400 ring-2 ring-amber-500/30 ring-offset-1 ring-offset-slate-900 border-amber-500/20'
              : 'bg-slate-700/30 text-slate-400 border-slate-600/30 hover:bg-slate-700/50'
          }`}
        >
          Favorites ({favoriteCount})
        </Button>
      </div>
    </div>
  );
}
