gymflow/components/Tracker/SetLogger.tsx

import React from 'react';
import { Dumbbell, Scale, Activity, Timer as TimerIcon, ArrowRight, ArrowUp, Plus, CheckCircle } from 'lucide-react';
import { ExerciseType, Language } from '../../types';
import { t } from '../../services/i18n';
import FilledInput from '../FilledInput';
import { useTracker } from './useTracker';

interface SetLoggerProps {
    tracker: ReturnType<typeof useTracker>;
    lang: Language;
    onLogSet: () => void;
    isSporadic?: boolean;
}

const SetLogger: React.FC<SetLoggerProps> = ({ tracker, lang, onLogSet, isSporadic = false }) => {
    const {
        searchQuery,
        setSearchQuery,
        setShowSuggestions,
        showSuggestions,
        filteredExercises,
        setSelectedExercise,
        selectedExercise,
        weight,
        setWeight,
        reps,
        setReps,
        duration,
        setDuration,
        distance,
        setDistance,
        height,
        setHeight,
        setIsCreating,
        sporadicSuccess,
        activePlan,
        currentStepIndex,
        unilateralSide,
        setUnilateralSide
    } = tracker;

    const isPlanFinished = activePlan && currentStepIndex >= activePlan.steps.length;

    return (
        <div className="space-y-6">
            {/* Exercise Selection */}
            <div className="relative">
                <FilledInput
                    label={t('select_exercise', lang)}
                    value={searchQuery}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                        setSearchQuery(e.target.value);
                        setShowSuggestions(true);
                    }}
                    onFocus={() => {
                        setSearchQuery('');
                        setShowSuggestions(true);
                    }}
                    onBlur={() => setTimeout(() => setShowSuggestions(false), 100)}
                    icon={<Dumbbell size={10} />}
                    autoComplete="off"
                    type="text"
                />
                <button
                    onClick={() => setIsCreating(true)}
                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-primary hover:bg-primary-container/20 rounded-full z-10"
                >
                    <Plus size={24} />
                </button>
                {showSuggestions && (
                    <div className="absolute top-full left-0 w-full bg-surface-container rounded-xl shadow-elevation-3 overflow-hidden z-20 mt-1 max-h-60 overflow-y-auto animate-in fade-in slide-in-from-top-2">
                        {filteredExercises.length > 0 ? (
                            filteredExercises.map(ex => (
                                <button
                                    key={ex.id}
                                    onMouseDown={(e) => {
                                        e.preventDefault();
                                        setSelectedExercise(ex);
                                        setSearchQuery(ex.name);
                                        setShowSuggestions(false);
                                    }}
                                    className="w-full text-left px-4 py-3 text-on-surface hover:bg-surface-container-high transition-colors text-lg"
                                >
                                    {ex.name}
                                </button>
                            ))
                        ) : (
                            <div className="px-4 py-3 text-on-surface-variant text-lg">{t('no_exercises_found', lang)}</div>
                        )}
                    </div>
                )}
            </div>

            {selectedExercise && (
                <div className="animate-in fade-in slide-in-from-bottom-4 duration-300 space-y-6">
                    {/* Unilateral Exercise Toggle */}
                    {selectedExercise.isUnilateral && (
                        <div className="flex items-center gap-2 bg-surface-container rounded-full p-1">
                            <button
                                onClick={() => setUnilateralSide('LEFT')}
                                className={`w-full text-center px-4 py-2 rounded-full text-sm font-medium transition-colors ${unilateralSide === 'LEFT' ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant hover:bg-surface-container-high'
                                    }`}
                            >
                                {t('left', lang)}
                            </button>
                            <button
                                onClick={() => setUnilateralSide('RIGHT')}
                                className={`w-full text-center px-4 py-2 rounded-full text-sm font-medium transition-colors ${unilateralSide === 'RIGHT' ? 'bg-secondary-container text-on-secondary-container' : 'text-on-surface-variant hover:bg-surface-container-high'
                                    }`}
                            >
                                {t('right', lang)}
                            </button>
                        </div>
                    )}

                    {/* Input Forms */}
                    <div className="grid grid-cols-2 gap-4">
                        {(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.STATIC) && (
                            <FilledInput
                                label={selectedExercise.type === ExerciseType.BODYWEIGHT ? t('add_weight', lang) : t('weight_kg', lang)}
                                value={weight}
                                step="0.1"
                                onChange={(e: any) => setWeight(e.target.value)}
                                icon={<Scale size={10} />}
                                autoFocus={!isSporadic && activePlan && !isPlanFinished && activePlan.steps[currentStepIndex]?.isWeighted && (selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.STRENGTH)}
                            />
                        )}
                        {(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.PLYOMETRIC) && (
                            <FilledInput
                                label={t('reps', lang)}
                                value={reps}
                                onChange={(e: any) => setReps(e.target.value)}
                                icon={<Activity size={10} />}
                                type="number"
                            />
                        )}
                        {(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.STATIC) && (
                            <FilledInput
                                label={t('time_sec', lang)}
                                value={duration}
                                onChange={(e: any) => setDuration(e.target.value)}
                                icon={<TimerIcon size={10} />}
                            />
                        )}
                        {(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.LONG_JUMP) && (
                            <FilledInput
                                label={t('dist_m', lang)}
                                value={distance}
                                onChange={(e: any) => setDistance(e.target.value)}
                                icon={<ArrowRight size={10} />}
                            />
                        )}
                        {(selectedExercise.type === ExerciseType.HIGH_JUMP) && (
                            <FilledInput
                                label={t('height_cm', lang)}
                                value={height}
                                onChange={(e: any) => setHeight(e.target.value)}
                                icon={<ArrowUp size={10} />}
                            />
                        )}
                    </div>

                    <button
                        onClick={onLogSet}
                        className={`w-full h-14 font-medium text-lg rounded-full shadow-elevation-2 hover:shadow-elevation-3 active:scale-[0.98] transition-all flex items-center justify-center gap-2 ${isSporadic && sporadicSuccess
                                ? 'bg-green-500 text-white'
                                : 'bg-primary-container text-on-primary-container'
                            }`}
                    >
                        {isSporadic && sporadicSuccess ? <CheckCircle size={24} /> : (isSporadic ? <Plus size={24} /> : <CheckCircle size={24} />)}
                        <span>{isSporadic && sporadicSuccess ? t('saved', lang) : t('log_set', lang)}</span>
                    </button>
                </div>
            )}
        </div>
    );
};

export default SetLogger;