// Add this to Tracker.tsx imports (line 9, after api import):
import { logSporadicSet } from '../services/sporadicSets';

// Add this to TrackerProps interface (after onUpdateSet, around line 21):
onSporadicSetAdded?: () => void;

// Update component function signature (line 28):
const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, activePlan, onSessionStart, onSessionEnd, onSessionQuit, onSetAdded, onRemoveSet, onUpdateSet, onSporadicSetAdded, lang }) => {

// Add these state variables (after editHeight state, around line 69):
const [isSporadicMode, setIsSporadicMode] = useState(false);
const [sporadicSuccess, setSporadicSuccess] = useState(false);

// Add this handler function (after handleCancelEdit, around line 289):
const handleLogSporadicSet = async () => {
    if (!selectedExercise) return;
    
    const setData: any = { exerciseId: selectedExercise.id };
    
    switch (selectedExercise.type) {
        case ExerciseType.STRENGTH:
            if (weight) setData.weight = parseFloat(weight);
            if (reps) setData.reps = parseInt(reps);
            break;
        case ExerciseType.BODYWEIGHT:
            if (weight) setData.weight = parseFloat(weight);
            if (reps) setData.reps = parseInt(reps);
            setData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
            break;
        case ExerciseType.CARDIO:
            if (duration) setData.durationSeconds = parseInt(duration);
            if (distance) setData.distanceMeters = parseFloat(distance);
            break;
        case ExerciseType.STATIC:
            if (duration) setData.durationSeconds = parseInt(duration);
            setData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
            break;
        case ExerciseType.HIGH_JUMP:
            if (height) setData.height = parseFloat(height);
            break;
        case ExerciseType.LONG_JUMP:
            if (distance) setData.distanceMeters = parseFloat(distance);
            break;
        case ExerciseType.PLYOMETRIC:
            if (reps) setData.reps = parseInt(reps);
            break;
    }
    
    const result = await logSporadicSet(setData);
    if (result) {
        setSporadicSuccess(true);
        setTimeout(() => setSporadicSuccess(false), 2000);
        
        // Reset form
        setWeight(''); setReps(''); setDuration('');
        setDistance(''); setHeight('');
        setSelectedExercise(null);
        setSearchQuery('');
        
        if (onSporadicSetAdded) onSporadicSetAdded();
    }
};

// Replace the single "Free Workout" button section (around line 347-355) with:
<div className="w-full max-w-xs space-y-3">
    <button
        onClick={() => handleStart()}
        className="w-full h-16 rounded-full bg-primary text-on-primary font-medium text-lg shadow-elevation-2 hover:shadow-elevation-3 active:shadow-elevation-1 transition-all flex items-center justify-center gap-2"
    >
        <PlayCircle size={24} />
        {t('free_workout', lang)}
    </button>
    <button
        onClick={() => setIsSporadicMode(true)}
        className="w-full h-16 rounded-full bg-secondary-container text-on-secondary-container font-medium text-lg shadow-elevation-1 hover:shadow-elevation-2 transition-all flex items-center justify-center gap-2"
    >
        <CheckCircle size={24} />
        {t('quick_log', lang)}
    </button>
</div>

// Add this new section after the "no active session" return statement (after line 396, before the main return):
if (!activeSession && isSporadicMode) {
    return (
        <div className="flex flex-col h-full p-4 md:p-8 overflow-y-auto bg-surface">
            {/* Header */}
            <div className="flex items-center gap-4 mb-6">
                <button 
                    onClick={() => {
                        setIsSporadicMode(false);
                        setSelectedExercise(null);
                        setSearchQuery('');
                    }}
                    className="p-2 rounded-full hover:bg-surface-container-high transition-colors"
                >
                    <X size={24} className="text-on-surface" />
                </button>
                <h2 className="text-2xl font-normal text-on-surface">{t('quick_log', lang)}</h2>
            </div>

            {/* Success Message */}
            {sporadicSuccess && (
                <div className="mb-4 p-4 bg-primary-container text-on-primary-container rounded-xl animate-in fade-in slide-in-from-top-2">
                    {t('log_sporadic_success', lang)}
                </div>
            )}

            {/* Exercise Selection and Form - reuse existing components */}
            <div className="space-y-6">
                <div className="relative">
                    <FilledInput
                        label={t('select_exercise', lang)}
                        value={searchQuery}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                            setSearchQuery(e.target.value);
                            setShowSuggestions(true);
                        }}
                        onFocus={() => 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">
                            {filteredExercises.length > 0 ? (
                                filteredExercises.map(ex => (
                                    <button
                                        key={ex.id}
                                        onClick={() => {
                                            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="space-y-4">
                        <div className="grid grid-cols-2 gap-4">
                            {(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT) && (
                                <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
                                />
                            )}
                            {(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} />}
                                />
                            )}
                            {(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={<Footprints size={10} />}
                                />
                            )}
                            {selectedExercise.type === ExerciseType.HIGH_JUMP && (
                                <FilledInput
                                    label={t('height_cm', lang)}
                                    value={height}
                                    onChange={(e: any) => setHeight(e.target.value)}
                                    icon={<Ruler size={10} />}
                                />
                            )}
                        </div>

                        <button
                            onClick={handleLogSporadicSet}
                            className="w-full h-14 rounded-full bg-primary text-on-primary font-medium text-lg shadow-elevation-2 hover:shadow-elevation-3 active:shadow-elevation-1 transition-all"
                        >
                            {t('log_set', lang)}
                        </button>
                    </div>
                )}
            </div>

            {/* Exercise Modal */}
            {isCreating && (
                <ExerciseModal
                    onClose={() => setIsCreating(false)}
                    onCreate={handleCreateExercise}
                    lang={lang}
                />
            )}
        </div>
    );
}