import { useState, useEffect } from 'react';
import type { Exercise, CreateExerciseRequest, MuscleGroup } from '../../types';
import { MUSCLE_GROUPS } from '../../types';

interface ExerciseFormProps {
  exercise?: Exercise | null;
  onSubmit: (data: CreateExerciseRequest) => void;
  onCancel: () => void;
}

export function ExerciseForm({ exercise, onSubmit, onCancel }: ExerciseFormProps) {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [muscleGroup, setMuscleGroup] = useState<MuscleGroup>('brust');
  const [weightStep, setWeightStep] = useState(2.5);

  useEffect(() => {
    if (exercise) {
      setName(exercise.name);
      setDescription(exercise.description);
      setMuscleGroup(exercise.muscle_group);
      setWeightStep(exercise.weight_step_kg);
    } else {
      setName('');
      setDescription('');
      setMuscleGroup('brust');
      setWeightStep(2.5);
    }
  }, [exercise]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit({
      name: name.trim(),
      description: description.trim(),
      muscle_group: muscleGroup,
      weight_step_kg: weightStep,
    });
  };

  const isValid = name.trim().length > 0;

  return (
    <form onSubmit={handleSubmit} className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-4">
      <h3 className="text-lg font-semibold">
        {exercise ? 'Übung bearbeiten' : 'Neue Übung'}
      </h3>

      <div>
        <label className="block text-sm text-gray-400 mb-1">Name *</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="w-full 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]"
          placeholder="Übungsname"
          maxLength={100}
        />
      </div>

      <div>
        <label className="block text-sm text-gray-400 mb-1">Beschreibung</label>
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          className="w-full 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-[80px] resize-y"
          placeholder="Optionale Beschreibung"
        />
      </div>

      <div>
        <label className="block text-sm text-gray-400 mb-1">Muskelgruppe *</label>
        <select
          value={muscleGroup}
          onChange={(e) => setMuscleGroup(e.target.value as MuscleGroup)}
          className="w-full 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]"
        >
          {MUSCLE_GROUPS.map((mg) => (
            <option key={mg.value} value={mg.value}>
              {mg.label}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className="block text-sm text-gray-400 mb-1">Gewichtsschritt (kg)</label>
        <input
          type="number"
          value={weightStep}
          onChange={(e) => setWeightStep(parseFloat(e.target.value) || 0)}
          className="w-full 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]"
          min={0.25}
          step={0.25}
        />
      </div>

      <div className="flex gap-3 justify-end pt-2">
        <button
          type="button"
          onClick={onCancel}
          className="px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-200 min-h-[44px]"
        >
          Abbrechen
        </button>
        <button
          type="submit"
          disabled={!isValid}
          className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white min-h-[44px] disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {exercise ? 'Speichern' : 'Erstellen'}
        </button>
      </div>
    </form>
  );
}
