import { useEffect } from 'react';
import { useExerciseStore } from '../../stores/exerciseStore';
import { ExerciseCard } from './ExerciseCard';
import { MUSCLE_GROUPS } from '../../types';
import type { Exercise, MuscleGroup } from '../../types';

interface ExerciseListProps {
  onEdit: (exercise: Exercise) => void;
  onDelete: (exercise: Exercise) => void;
}

export function ExerciseList({ onEdit, onDelete }: ExerciseListProps) {
  const { exercises, loading, filter, fetchExercises, setFilter } = useExerciseStore();

  useEffect(() => {
    fetchExercises();
  }, [fetchExercises, filter.muscleGroup, filter.query]);

  return (
    <div className="space-y-4">
      {/* Filter-Bar */}
      <div className="flex flex-col sm:flex-row gap-2">
        <select
          value={filter.muscleGroup}
          onChange={(e) => setFilter({ muscleGroup: e.target.value as MuscleGroup | '' })}
          className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 min-h-[44px]"
        >
          <option value="">Alle Muskelgruppen</option>
          {MUSCLE_GROUPS.map((mg) => (
            <option key={mg.value} value={mg.value}>
              {mg.label}
            </option>
          ))}
        </select>
        <input
          type="text"
          value={filter.query}
          onChange={(e) => setFilter({ query: e.target.value })}
          placeholder="Suche..."
          className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 min-h-[44px]"
        />
      </div>

      {/* Liste */}
      {loading ? (
        <div className="text-center text-gray-500 py-8">Laden...</div>
      ) : exercises.length === 0 ? (
        <div className="text-center text-gray-500 py-12">
          <p className="text-lg">Noch keine Übungen angelegt</p>
          <p className="text-sm mt-1">Erstelle deine erste Übung mit dem Button oben.</p>
        </div>
      ) : (
        <div className="grid gap-3">
          {exercises.map((exercise) => (
            <ExerciseCard
              key={exercise.id}
              exercise={exercise}
              onEdit={onEdit}
              onDelete={onDelete}
            />
          ))}
        </div>
      )}
    </div>
  );
}
