import {
  Filter, X, LayoutGrid, List,
} from 'lucide-react'
import {
  FAECHER,
  JAHRE,
  BUNDESLAENDER,
  NIVEAUS,
  TYPEN,
} from '@/lib/education/abitur-docs-types'
import type { ViewMode } from '@/lib/education/abitur-archiv-types'

interface FilterBarProps {
  filterOpen: boolean
  onToggleFilter: () => void
  hasActiveFilters: boolean
  onClearFilters: () => void
  total: number
  viewMode: ViewMode
  onViewModeChange: (mode: ViewMode) => void
  filterFach: string
  filterJahr: string
  filterBundesland: string
  filterNiveau: string
  filterTyp: string
  onFachChange: (v: string) => void
  onJahrChange: (v: string) => void
  onBundeslandChange: (v: string) => void
  onNiveauChange: (v: string) => void
  onTypChange: (v: string) => void
  onResetPage: () => void
  searchQuery: string
}

export function FilterBar({
  filterOpen, onToggleFilter, hasActiveFilters, onClearFilters,
  total, viewMode, onViewModeChange,
  filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp,
  onFachChange, onJahrChange, onBundeslandChange, onNiveauChange, onTypChange,
  onResetPage, searchQuery,
}: FilterBarProps) {
  const activeCount = [filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp, searchQuery].filter(Boolean).length

  return (
    <div className="bg-white rounded-xl border border-slate-200 p-4">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <button
            onClick={onToggleFilter}
            className={`px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-colors ${
              filterOpen || hasActiveFilters
                ? 'bg-purple-100 text-purple-700'
                : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
            }`}
          >
            <Filter className="w-4 h-4" />
            Filter
            {hasActiveFilters && (
              <span className="bg-purple-600 text-white text-xs px-1.5 py-0.5 rounded-full">
                {activeCount}
              </span>
            )}
          </button>

          {hasActiveFilters && (
            <button
              onClick={onClearFilters}
              className="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1"
            >
              <X className="w-4 h-4" />
              Filter zuruecksetzen
            </button>
          )}
        </div>

        <div className="flex items-center gap-3">
          <span className="text-sm text-slate-500">{total} Treffer</span>

          <div className="flex bg-slate-100 rounded-lg p-1">
            <button
              onClick={() => onViewModeChange('grid')}
              className={`p-2 rounded-md transition-colors ${
                viewMode === 'grid' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'
              }`}
              title="Raster-Ansicht"
            >
              <LayoutGrid className="w-4 h-4" />
            </button>
            <button
              onClick={() => onViewModeChange('list')}
              className={`p-2 rounded-md transition-colors ${
                viewMode === 'list' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'
              }`}
              title="Listen-Ansicht"
            >
              <List className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      {/* Filter Dropdowns */}
      {filterOpen && (
        <div className="grid grid-cols-2 md:grid-cols-5 gap-3 pt-4 border-t border-slate-200">
          <div>
            <label className="block text-xs text-slate-500 mb-1">Fach</label>
            <select
              value={filterFach}
              onChange={(e) => { onFachChange(e.target.value); onResetPage() }}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
            >
              <option value="">Alle Faecher</option>
              {FAECHER.map(f => (
                <option key={f.id} value={f.id}>{f.label}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-xs text-slate-500 mb-1">Jahr</label>
            <select
              value={filterJahr}
              onChange={(e) => { onJahrChange(e.target.value); onResetPage() }}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
            >
              <option value="">Alle Jahre</option>
              {JAHRE.map(j => (
                <option key={j} value={j}>{j}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-xs text-slate-500 mb-1">Bundesland</label>
            <select
              value={filterBundesland}
              onChange={(e) => { onBundeslandChange(e.target.value); onResetPage() }}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
            >
              <option value="">Alle Bundeslaender</option>
              {BUNDESLAENDER.map(b => (
                <option key={b.id} value={b.id}>{b.label}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-xs text-slate-500 mb-1">Niveau</label>
            <select
              value={filterNiveau}
              onChange={(e) => { onNiveauChange(e.target.value); onResetPage() }}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
            >
              <option value="">Alle Niveaus</option>
              {NIVEAUS.map(n => (
                <option key={n.id} value={n.id}>{n.label}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-xs text-slate-500 mb-1">Typ</label>
            <select
              value={filterTyp}
              onChange={(e) => { onTypChange(e.target.value); onResetPage() }}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
            >
              <option value="">Alle Typen</option>
              {TYPEN.map(t => (
                <option key={t.id} value={t.id}>{t.label}</option>
              ))}
            </select>
          </div>
        </div>
      )}
    </div>
  )
}
