Audio-Classifier/frontend/components/FilterPanel.tsx

"use client"

import { useState, useEffect } from "react"
import type { FilterParams } from "@/lib/types"

interface FilterPanelProps {
  filters: FilterParams
  onFiltersChange: (filters: FilterParams) => void
  availableGenres: string[]
  availableMoods: string[]
  availableInstruments: string[]
  availableKeys: string[]
}

export default function FilterPanel({
  filters,
  onFiltersChange,
  availableGenres,
  availableMoods,
  availableInstruments,
  availableKeys,
}: FilterPanelProps) {
  const [localFilters, setLocalFilters] = useState<FilterParams>(filters)

  useEffect(() => {
    setLocalFilters(filters)
  }, [filters])

  const handleFilterChange = (key: keyof FilterParams, value: any) => {
    const newFilters = { ...localFilters, [key]: value }
    setLocalFilters(newFilters)
    onFiltersChange(newFilters)
  }

  const clearFilters = () => {
    const emptyFilters: FilterParams = {}
    setLocalFilters(emptyFilters)
    onFiltersChange(emptyFilters)
  }

  const hasActiveFilters = Object.keys(localFilters).filter(key =>
    localFilters[key as keyof FilterParams] !== undefined &&
    localFilters[key as keyof FilterParams] !== ""
  ).length > 0

  return (
    <div className="space-y-6">
      {/* Clear all button */}
      {hasActiveFilters && (
        <button
          onClick={clearFilters}
          className="w-full text-sm text-orange-600 hover:text-orange-700 font-medium py-2 px-3 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors"
        >
          Effacer tous les filtres
        </button>
      )}

      {/* Genre Filter */}
      <div>
        <label className="block text-sm font-semibold text-slate-700 mb-2">
          Genre
        </label>
        <select
          value={localFilters.genre || ""}
          onChange={(e) => handleFilterChange("genre", e.target.value || undefined)}
          className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
        >
          <option value="">Tous les genres</option>
          {availableGenres.map((genre) => (
            <option key={genre} value={genre}>
              {genre}
            </option>
          ))}
        </select>
      </div>

      {/* Mood Filter */}
      <div>
        <label className="block text-sm font-semibold text-slate-700 mb-2">
          Ambiance
        </label>
        <select
          value={localFilters.mood || ""}
          onChange={(e) => handleFilterChange("mood", e.target.value || undefined)}
          className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
        >
          <option value="">Toutes les ambiances</option>
          {availableMoods.map((mood) => (
            <option key={mood} value={mood}>
              {mood}
            </option>
          ))}
        </select>
      </div>

      {/* Instrument Filter */}
      <div>
        <label className="block text-sm font-semibold text-slate-700 mb-2">
          Instrument
        </label>
        <select
          value={localFilters.instrument || ""}
          onChange={(e) => handleFilterChange("instrument", e.target.value || undefined)}
          className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
        >
          <option value="">Tous les instruments</option>
          {availableInstruments.map((instrument) => (
            <option key={instrument} value={instrument}>
              {instrument}
            </option>
          ))}
        </select>
      </div>

      {/* Key Filter */}
      <div>
        <label className="block text-sm font-semibold text-slate-700 mb-2">
          Tonalité
        </label>
        <select
          value={localFilters.key || ""}
          onChange={(e) => handleFilterChange("key", e.target.value || undefined)}
          className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
        >
          <option value="">Toutes les tonalités</option>
          {availableKeys.map((key) => (
            <option key={key} value={key}>
              {key}
            </option>
          ))}
        </select>
      </div>

      {/* Tempo Range Filter */}
      <div>
        <label className="block text-sm font-semibold text-slate-700 mb-2">
          Tempo
        </label>
        <select
          value={localFilters.tempo_range || ""}
          onChange={(e) => handleFilterChange("tempo_range", e.target.value || undefined)}
          className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
        >
          <option value="">Tous les tempos</option>
          <option value="slow">Lent (&lt; 100 BPM)</option>
          <option value="medium">Moyen (100-140 BPM)</option>
          <option value="fast">Rapide (&gt; 140 BPM)</option>
        </select>
      </div>

      {/* Active filters summary */}
      {hasActiveFilters && (
        <div className="pt-4 border-t border-slate-200">
          <p className="text-xs font-semibold text-slate-700 mb-2">Filtres actifs:</p>
          <div className="space-y-1">
            {localFilters.genre && (
              <div className="flex items-center justify-between text-xs">
                <span className="text-slate-600">Genre:</span>
                <span className="font-medium text-slate-800">{localFilters.genre}</span>
              </div>
            )}
            {localFilters.mood && (
              <div className="flex items-center justify-between text-xs">
                <span className="text-slate-600">Ambiance:</span>
                <span className="font-medium text-slate-800">{localFilters.mood}</span>
              </div>
            )}
            {localFilters.instrument && (
              <div className="flex items-center justify-between text-xs">
                <span className="text-slate-600">Instrument:</span>
                <span className="font-medium text-slate-800">{localFilters.instrument}</span>
              </div>
            )}
            {localFilters.key && (
              <div className="flex items-center justify-between text-xs">
                <span className="text-slate-600">Tonalité:</span>
                <span className="font-medium text-slate-800">{localFilters.key}</span>
              </div>
            )}
            {localFilters.tempo_range && (
              <div className="flex items-center justify-between text-xs">
                <span className="text-slate-600">Tempo:</span>
                <span className="font-medium text-slate-800">
                  {localFilters.tempo_range === 'slow' && 'Lent'}
                  {localFilters.tempo_range === 'medium' && 'Moyen'}
                  {localFilters.tempo_range === 'fast' && 'Rapide'}
                </span>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}