import { useForm } from '../../context/FormContext';
import { Check } from 'lucide-react';

export default function ExerciseList({ field, sectionId }) {
  const { formState, toggleExercise, updateExerciseValue } = useForm();

  const fieldState = formState.sections[sectionId]?.[field.id] || { exercises: {} };
  const exercises = fieldState.exercises || {};

  return (
    <div className="exercise-list" id={`field-${field.id}`}>
      <div className="exercise-list__label">{field.label}</div>

      {field.exercises.map(ex => {
        const exState = exercises[ex.id] || { enabled: false, sets: '', reps: '', minutes: '', seconds: '', trials: '', steps: '' };
        const isActive = exState.enabled;

        return (
          <div
            key={ex.id}
            className={`exercise-item ${isActive ? 'exercise-item--active' : ''}`}
          >
            <div
              className="exercise-item__toggle"
              onClick={() => toggleExercise(sectionId, field.id, ex.id)}
            >
              {isActive && <Check size={12} strokeWidth={3} />}
            </div>

            <span
              className="exercise-item__name"
              onClick={() => toggleExercise(sectionId, field.id, ex.id)}
            >
              {ex.name}
            </span>

            {isActive && (
              <div className="exercise-item__inputs">
                {ex.usesMinutes ? (
                  <>
                    <input
                      type="number"
                      className="exercise-item__input"
                      placeholder="min"
                      value={exState.minutes}
                      onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'minutes', e.target.value)}
                      min="0"
                    />
                    <span className="exercise-item__unit">min</span>
                  </>
                ) : ex.usesSeconds ? (
                  <>
                    <input
                      type="number"
                      className="exercise-item__input"
                      placeholder="sec"
                      value={exState.seconds}
                      onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'seconds', e.target.value)}
                      min="0"
                    />
                    <span className="exercise-item__unit">sec</span>
                    <span className="exercise-item__separator">&times;</span>
                    <input
                      type="number"
                      className="exercise-item__input"
                      placeholder="reps"
                      value={exState.reps}
                      onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'reps', e.target.value)}
                      min="0"
                    />
                    <span className="exercise-item__unit">reps</span>
                  </>
                ) : ex.usesTrials ? (
                  <>
                    <input
                      type="number"
                      className="exercise-item__input"
                      placeholder="#"
                      value={exState.trials}
                      onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'trials', e.target.value)}
                      min="0"
                    />
                    <span className="exercise-item__unit">{ex.usesSteps ? 'steps' : 'trials'}</span>
                  </>
                ) : (
                  <>
                    <input
                      type="number"
                      className="exercise-item__input"
                      placeholder="sets"
                      value={exState.sets}
                      onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'sets', e.target.value)}
                      min="0"
                    />
                    <span className="exercise-item__separator">&times;</span>
                    <input
                      type="number"
                      className="exercise-item__input"
                      placeholder="reps"
                      value={exState.reps}
                      onChange={e => updateExerciseValue(sectionId, field.id, ex.id, 'reps', e.target.value)}
                      min="0"
                    />
                    <span className="exercise-item__unit">reps</span>
                  </>
                )}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}