import { useState } from 'react';
import type { Exercise } from '../../types';

interface LogEntryFormProps {
  exercise: Exercise;
  setNumber: number;
  initialWeight?: number;
  initialReps?: number;
  onSubmit: (weight: number, reps: number, note: string) => void;
  submitLabel?: string;
}

export function LogEntryForm({
  exercise,
  setNumber,
  initialWeight = 0,
  initialReps = 0,
  onSubmit,
  submitLabel = 'Satz speichern',
}: LogEntryFormProps) {
  const [weight, setWeight] = useState(initialWeight);
  const [reps, setReps] = useState(initialReps);
  const [note, setNote] = useState('');

  const step = exercise.weight_step_kg;

  const adjustWeight = (delta: number) => {
    setWeight((w) => Math.max(0, Math.round((w + delta) * 100) / 100));
  };

  const adjustReps = (delta: number) => {
    setReps((r) => Math.max(0, r + delta));
  };

  const handleSubmit = () => {
    onSubmit(weight, reps, note);
    setNote('');
  };

  return (
    <div className="space-y-4 bg-gray-800 rounded-lg p-4">
      <div className="text-sm text-gray-400">Satz {setNumber}</div>

      {/* Gewicht */}
      <div>
        <label className="block text-sm text-gray-400 mb-2">Gewicht (kg)</label>
        <div className="flex items-center gap-2 justify-center">
          <button
            type="button"
            onClick={() => adjustWeight(-2 * step)}
            className="min-h-[44px] min-w-[44px] bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-200 font-bold"
          >
            -{2 * step}
          </button>
          <button
            type="button"
            onClick={() => adjustWeight(-step)}
            className="min-h-[44px] min-w-[44px] bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-200 font-bold"
          >
            -{step}
          </button>
          <input
            type="number"
            value={weight}
            onChange={(e) => setWeight(parseFloat(e.target.value) || 0)}
            className="w-28 text-center text-3xl font-bold bg-gray-900 border border-gray-600 rounded-lg py-2 text-gray-100 focus:outline-none focus:border-blue-500"
            min={0}
            step={step}
          />
          <button
            type="button"
            onClick={() => adjustWeight(step)}
            className="min-h-[44px] min-w-[44px] bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-200 font-bold"
          >
            +{step}
          </button>
          <button
            type="button"
            onClick={() => adjustWeight(2 * step)}
            className="min-h-[44px] min-w-[44px] bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-200 font-bold"
          >
            +{2 * step}
          </button>
        </div>
      </div>

      {/* Wiederholungen */}
      <div>
        <label className="block text-sm text-gray-400 mb-2">Wiederholungen</label>
        <div className="flex items-center gap-2 justify-center">
          <button
            type="button"
            onClick={() => adjustReps(-1)}
            className="min-h-[44px] min-w-[44px] bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-200 font-bold text-xl"
          >
            -1
          </button>
          <input
            type="number"
            value={reps}
            onChange={(e) => setReps(parseInt(e.target.value) || 0)}
            className="w-28 text-center text-3xl font-bold bg-gray-900 border border-gray-600 rounded-lg py-2 text-gray-100 focus:outline-none focus:border-blue-500"
            min={0}
          />
          <button
            type="button"
            onClick={() => adjustReps(1)}
            className="min-h-[44px] min-w-[44px] bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-200 font-bold text-xl"
          >
            +1
          </button>
        </div>
      </div>

      {/* Notiz */}
      <div>
        <input
          type="text"
          value={note}
          onChange={(e) => setNote(e.target.value)}
          placeholder="Notiz (optional)"
          className="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 text-sm focus:outline-none focus:border-blue-500 min-h-[44px]"
        />
      </div>

      <button
        type="button"
        onClick={handleSubmit}
        className="w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold rounded-lg py-3 min-h-[44px]"
      >
        {submitLabel}
      </button>
    </div>
  );
}
