import React from 'react';
import { MoreVertical, X, CheckSquare, ChevronUp, ChevronDown, Scale, Dumbbell, Plus, Activity, Timer as TimerIcon, ArrowRight, ArrowUp, CheckCircle, Edit, Trash2 } from 'lucide-react';
import { ExerciseType, Language, WorkoutSet } from '../../types';
import { t } from '../../services/i18n';
import FilledInput from '../FilledInput';
import ExerciseModal from '../ExerciseModal';
import { useTracker } from './useTracker';

interface ActiveSessionViewProps {
    tracker: ReturnType<typeof useTracker>;
    activeSession: any; // Using any to avoid strict type issues with the complex session object for now, but ideally should be WorkoutSession
    lang: Language;
    onSessionEnd: () => void;
    onSessionQuit: () => void;
    onRemoveSet: (setId: string) => void;
}

const ActiveSessionView: React.FC<ActiveSessionViewProps> = ({ tracker, activeSession, lang, onSessionEnd, onSessionQuit, onRemoveSet }) => {
    const {
        elapsedTime,
        showFinishConfirm,
        setShowFinishConfirm,
        showQuitConfirm,
        setShowQuitConfirm,
        showMenu,
        setShowMenu,
        activePlan, // This comes from useTracker props but we might need to pass it explicitly if not in hook return
        currentStepIndex,
        showPlanList,
        setShowPlanList,
        jumpToStep,
        searchQuery,
        setSearchQuery,
        setShowSuggestions,
        showSuggestions,
        filteredExercises,
        setSelectedExercise,
        selectedExercise,
        weight,
        setWeight,
        reps,
        setReps,
        duration,
        setDuration,
        distance,
        setDistance,
        height,
        setHeight,
        handleAddSet,
        editingSetId,
        editWeight,
        setEditWeight,
        editReps,
        setEditReps,
        editDuration,
        setEditDuration,
        editDistance,
        setEditDistance,
        editHeight,
        setEditHeight,
        handleCancelEdit,
        handleSaveEdit,
        handleEditSet,
        isCreating,
        setIsCreating,
        handleCreateExercise,
        exercises
    } = tracker;

    // We need activePlan from the hook or props. The hook returns 'plans' but not 'activePlan'.
    // Actually useTracker takes activePlan as prop but doesn't return it.
    // We should probably pass activePlan as a prop to this component directly from the parent.
    // Let's assume the parent passes it or we modify the hook.
    // For now, let's use the activePlan passed to the hook if possible, but the hook doesn't expose it.
    // I will modify the hook to return activePlan or just accept it as prop here.
    // The hook accepts activePlan as argument, so I can return it.
    // Let's modify useTracker to return activePlan in the next step if needed, or just pass it here.
    // Wait, I can't modify useTracker easily now without rewriting it.
    // I'll pass activePlan as a prop to ActiveSessionView.

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

    return (
        <div className="flex flex-col h-full max-h-full overflow-hidden relative bg-surface">
            <div className="px-4 py-3 bg-surface-container shadow-elevation-1 z-20 flex justify-between items-center">
                <div className="flex flex-col">
                    <h2 className="text-title-medium text-on-surface flex items-center gap-2 font-medium">
                        <span className="w-2 h-2 rounded-full bg-error animate-pulse" />
                        {activePlan ? activePlan.name : t('free_workout', lang)}
                    </h2>
                    <span className="text-xs text-on-surface-variant font-mono mt-0.5 flex items-center gap-2">
                        <span className="bg-surface-container-high px-1.5 py-0.5 rounded text-on-surface font-bold">{elapsedTime}</span>
                        {activeSession.userBodyWeight ? ` • ${activeSession.userBodyWeight}kg` : ''}
                    </span>
                </div>
                <div className="flex items-center gap-2 relative">
                    <button
                        onClick={() => setShowFinishConfirm(true)}
                        className="px-5 py-2 rounded-full bg-error-container text-on-error-container text-sm font-medium hover:opacity-90 transition-opacity"
                    >
                        {t('finish', lang)}
                    </button>
                    <button
                        onClick={() => setShowMenu(!showMenu)}
                        className="p-2 rounded-full bg-surface-container-high text-on-surface hover:bg-surface-container-highest transition-colors"
                    >
                        <MoreVertical size={20} />
                    </button>
                    {showMenu && (
                        <>
                            <div
                                className="fixed inset-0 z-30"
                                onClick={() => setShowMenu(false)}
                            />
                            <div className="absolute right-0 top-full mt-2 bg-surface-container rounded-xl shadow-elevation-3 overflow-hidden z-40 min-w-[200px]">
                                <button
                                    onClick={() => {
                                        setShowMenu(false);
                                        setShowQuitConfirm(true);
                                    }}
                                    className="w-full px-4 py-3 text-left text-error hover:bg-error-container/20 transition-colors flex items-center gap-2"
                                >
                                    <X size={18} />
                                    {t('quit_no_save', lang)}
                                </button>
                            </div>
                        </>
                    )}
                </div>
            </div>

            {activePlan && (
                <div className="bg-surface-container-low border-b border-outline-variant">
                    <button
                        onClick={() => setShowPlanList(!showPlanList)}
                        className="w-full px-4 py-3 flex justify-between items-center"
                    >
                        <div className="flex flex-col items-start">
                            {isPlanFinished ? (
                                <div className="flex items-center gap-2 text-primary">
                                    <CheckSquare size={18} />
                                    <span className="font-bold">{t('plan_completed', lang)}</span>
                                </div>
                            ) : (
                                <>
                                    <span className="text-[10px] text-primary font-medium tracking-wider">{t('step', lang)} {currentStepIndex + 1} {t('of', lang)} {activePlan.steps.length}</span>
                                    <div className="font-medium text-on-surface flex items-center gap-2">
                                        {activePlan.steps[currentStepIndex].exerciseName}
                                        {activePlan.steps[currentStepIndex].isWeighted && <Scale size={12} className="text-primary" />}
                                    </div>
                                </>
                            )}
                        </div>
                        {showPlanList ? <ChevronUp size={20} className="text-on-surface-variant" /> : <ChevronDown size={20} className="text-on-surface-variant" />}
                    </button>

                    {showPlanList && (
                        <div className="max-h-48 overflow-y-auto bg-surface-container-high p-2 space-y-1 animate-in slide-in-from-top-2">
                            {activePlan.steps.map((step, idx) => (
                                <button
                                    key={step.id}
                                    onClick={() => jumpToStep(idx)}
                                    className={`w-full text-left px-4 py-3 rounded-full text-sm flex items-center justify-between transition-colors ${idx === currentStepIndex
                                        ? 'bg-primary-container text-on-primary-container font-medium'
                                        : idx < currentStepIndex
                                            ? 'text-on-surface-variant opacity-50'
                                            : 'text-on-surface hover:bg-white/5'
                                        }`}
                                >
                                    <span>{idx + 1}. {step.exerciseName}</span>
                                    {step.isWeighted && <Scale size={14} />}
                                </button>
                            ))}
                        </div>
                    )}
                </div>
            )}

            <div className="flex-1 overflow-y-auto p-4 pb-32 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={() => {
                            setSearchQuery('');
                            setShowSuggestions(true);
                        }}
                        onBlur={() => setTimeout(() => setShowSuggestions(false), 100)} // Delay hiding to allow click
                        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(); // Prevent input blur
                                            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-3 px-2 py-3 bg-surface-container rounded-xl">
                                <input
                                    type="checkbox"
                                    id="sameValuesBothSides"
                                    checked={tracker.sameValuesBothSides}
                                    onChange={(e) => tracker.handleToggleSameValues(e.target.checked)}
                                    className="w-5 h-5 rounded border-2 border-outline bg-surface-container-high checked:bg-primary checked:border-primary cursor-pointer"
                                />
                                <label htmlFor="sameValuesBothSides" className="text-sm text-on-surface cursor-pointer flex-1">
                                    {t('same_values_both_sides', lang)}
                                </label>
                            </div>
                        )}

                        {/* Input Forms */}
                        {selectedExercise.isUnilateral && !tracker.sameValuesBothSides ? (
                            /* Separate Left/Right Inputs */
                            <div className="space-y-4">
                                {/* Left Side */}
                                <div className="space-y-2">
                                    <div className="text-sm font-medium text-primary flex items-center gap-2 px-2">
                                        <span className="w-6 h-6 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center text-xs font-bold">L</span>
                                        {t('left', lang)}
                                    </div>
                                    <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={tracker.weightLeft}
                                                step="0.1"
                                                onChange={(e: any) => tracker.setWeightLeft(e.target.value)}
                                                icon={<Scale size={10} />}
                                            />
                                        )}
                                        {(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.PLYOMETRIC) && (
                                            <FilledInput
                                                label={t('reps', lang)}
                                                value={tracker.repsLeft}
                                                onChange={(e: any) => tracker.setRepsLeft(e.target.value)}
                                                icon={<Activity size={10} />}
                                                type="number"
                                            />
                                        )}
                                        {(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.STATIC) && (
                                            <FilledInput
                                                label={t('time_sec', lang)}
                                                value={tracker.durationLeft}
                                                onChange={(e: any) => tracker.setDurationLeft(e.target.value)}
                                                icon={<TimerIcon size={10} />}
                                            />
                                        )}
                                        {(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.LONG_JUMP) && (
                                            <FilledInput
                                                label={t('dist_m', lang)}
                                                value={tracker.distanceLeft}
                                                onChange={(e: any) => tracker.setDistanceLeft(e.target.value)}
                                                icon={<ArrowRight size={10} />}
                                            />
                                        )}
                                        {(selectedExercise.type === ExerciseType.HIGH_JUMP) && (
                                            <FilledInput
                                                label={t('height_cm', lang)}
                                                value={tracker.heightLeft}
                                                onChange={(e: any) => tracker.setHeightLeft(e.target.value)}
                                                icon={<ArrowUp size={10} />}
                                            />
                                        )}
                                    </div>
                                </div>

                                {/* Right Side */}
                                <div className="space-y-2">
                                    <div className="text-sm font-medium text-secondary flex items-center gap-2 px-2">
                                        <span className="w-6 h-6 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center text-xs font-bold">R</span>
                                        {t('right', lang)}
                                    </div>
                                    <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={tracker.weightRight}
                                                step="0.1"
                                                onChange={(e: any) => tracker.setWeightRight(e.target.value)}
                                                icon={<Scale size={10} />}
                                            />
                                        )}
                                        {(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.PLYOMETRIC) && (
                                            <FilledInput
                                                label={t('reps', lang)}
                                                value={tracker.repsRight}
                                                onChange={(e: any) => tracker.setRepsRight(e.target.value)}
                                                icon={<Activity size={10} />}
                                                type="number"
                                            />
                                        )}
                                        {(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.STATIC) && (
                                            <FilledInput
                                                label={t('time_sec', lang)}
                                                value={tracker.durationRight}
                                                onChange={(e: any) => tracker.setDurationRight(e.target.value)}
                                                icon={<TimerIcon size={10} />}
                                            />
                                        )}
                                        {(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.LONG_JUMP) && (
                                            <FilledInput
                                                label={t('dist_m', lang)}
                                                value={tracker.distanceRight}
                                                onChange={(e: any) => tracker.setDistanceRight(e.target.value)}
                                                icon={<ArrowRight size={10} />}
                                            />
                                        )}
                                        {(selectedExercise.type === ExerciseType.HIGH_JUMP) && (
                                            <FilledInput
                                                label={t('height_cm', lang)}
                                                value={tracker.heightRight}
                                                onChange={(e: any) => tracker.setHeightRight(e.target.value)}
                                                icon={<ArrowUp size={10} />}
                                            />
                                        )}
                                    </div>
                                </div>
                            </div>
                        ) : (
                            /* Single Input Form (for bilateral or unilateral with same values) */
                            <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={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={handleAddSet}
                            className="w-full h-14 bg-primary-container text-on-primary-container 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"
                        >
                            <CheckCircle size={24} />
                            <span>{t('log_set', lang)}</span>
                        </button>
                    </div>
                )}

                {activeSession.sets.length > 0 && (
                    <div className="pt-4">
                        <h3 className="text-sm text-primary font-medium px-2 mb-3 tracking-wide">{t('history_section', lang)}</h3>
                        <div className="flex flex-col gap-2">
                            {[...activeSession.sets].reverse().map((set: WorkoutSet, idx: number) => {
                                const setNumber = activeSession.sets.length - idx;
                                const isEditing = editingSetId === set.id;
                                return (
                                    <div key={set.id} className="flex justify-between items-center p-4 bg-surface-container rounded-xl shadow-elevation-1 animate-in fade-in slide-in-from-bottom-2">
                                        <div className="flex items-center gap-4 flex-1">
                                            <div className="w-8 h-8 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center text-xs font-bold">
                                                {setNumber}
                                            </div>
                                            {isEditing ? (
                                                <div className="flex-1">
                                                    <div className="text-base font-medium text-on-surface mb-2">{set.exerciseName}</div>
                                                    <div className="grid grid-cols-2 gap-2">
                                                        {set.weight !== undefined && (
                                                            <input
                                                                type="number"
                                                                step="0.1"
                                                                value={editWeight}
                                                                onChange={(e) => setEditWeight(e.target.value)}
                                                                className="px-2 py-1 bg-surface-container-high rounded text-sm text-on-surface border border-outline-variant focus:border-primary focus:outline-none"
                                                                placeholder="Weight (kg)"
                                                            />
                                                        )}
                                                        {set.reps !== undefined && (
                                                            <input
                                                                type="number"
                                                                value={editReps}
                                                                onChange={(e) => setEditReps(e.target.value)}
                                                                className="px-2 py-1 bg-surface-container-high rounded text-sm text-on-surface border border-outline-variant focus:border-primary focus:outline-none"
                                                                placeholder="Reps"
                                                            />
                                                        )}
                                                        {set.durationSeconds !== undefined && (
                                                            <input
                                                                type="number"
                                                                value={editDuration}
                                                                onChange={(e) => setEditDuration(e.target.value)}
                                                                className="px-2 py-1 bg-surface-container-high rounded text-sm text-on-surface border border-outline-variant focus:border-primary focus:outline-none"
                                                                placeholder="Duration (s)"
                                                            />
                                                        )}
                                                        {set.distanceMeters !== undefined && (
                                                            <input
                                                                type="number"
                                                                step="0.1"
                                                                value={editDistance}
                                                                onChange={(e) => setEditDistance(e.target.value)}
                                                                className="px-2 py-1 bg-surface-container-high rounded text-sm text-on-surface border border-outline-variant focus:border-primary focus:outline-none"
                                                                placeholder="Distance (m)"
                                                            />
                                                        )}
                                                        {set.height !== undefined && (
                                                            <input
                                                                type="number"
                                                                step="0.1"
                                                                value={editHeight}
                                                                onChange={(e) => setEditHeight(e.target.value)}
                                                                className="px-2 py-1 bg-surface-container-high rounded text-sm text-on-surface border border-outline-variant focus:border-primary focus:outline-none"
                                                                placeholder="Height (cm)"
                                                            />
                                                        )}
                                                    </div>
                                                </div>
                                            ) : (
                                                <div>
                                                    <div className="text-base font-medium text-on-surface">{set.exerciseName}</div>
                                                    <div className="text-sm text-on-surface-variant">
                                                        {set.type === ExerciseType.STRENGTH &&
                                                            `${set.weight ? `${set.weight}kg` : ''} ${set.reps ? `x ${set.reps}` : ''}`.trim()
                                                        }
                                                        {set.type === ExerciseType.BODYWEIGHT &&
                                                            `${set.weight ? `${set.weight}kg` : ''} ${set.reps ? `x ${set.reps}` : ''}`.trim()
                                                        }
                                                        {set.type === ExerciseType.CARDIO &&
                                                            `${set.durationSeconds ? `${set.durationSeconds}s` : ''} ${set.distanceMeters ? `/ ${set.distanceMeters}m` : ''}`.trim()
                                                        }
                                                        {set.type === ExerciseType.STATIC &&
                                                            `${set.durationSeconds ? `${set.durationSeconds}s` : ''}`.trim()
                                                        }
                                                        {set.type === ExerciseType.HIGH_JUMP &&
                                                            `${set.height ? `${set.height}cm` : ''}`.trim()
                                                        }
                                                        {set.type === ExerciseType.LONG_JUMP &&
                                                            `${set.distanceMeters ? `${set.distanceMeters}m` : ''}`.trim()
                                                        }
                                                        {set.type === ExerciseType.PLYOMETRIC &&
                                                            `${set.reps ? `x ${set.reps}` : ''}`.trim()
                                                        }
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                        <div className="flex items-center gap-2">
                                            {isEditing ? (
                                                <>
                                                    <button
                                                        onClick={handleCancelEdit}
                                                        className="p-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high rounded-full transition-colors"
                                                    >
                                                        <X size={20} />
                                                    </button>
                                                    <button
                                                        onClick={() => handleSaveEdit(set)}
                                                        className="p-2 text-primary hover:bg-primary-container/20 rounded-full transition-colors"
                                                    >
                                                        <CheckCircle size={20} />
                                                    </button>
                                                </>
                                            ) : (
                                                <>
                                                    <button
                                                        onClick={() => handleEditSet(set)}
                                                        className="p-2 text-on-surface-variant hover:text-primary hover:bg-primary-container/20 rounded-full transition-colors"
                                                    >
                                                        <Edit size={20} />
                                                    </button>
                                                    <button
                                                        onClick={() => onRemoveSet(set.id)}
                                                        className="p-2 text-on-surface-variant hover:text-error hover:bg-error-container/10 rounded-full transition-colors"
                                                    >
                                                        <Trash2 size={20} />
                                                    </button>
                                                </>
                                            )}
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                )}
            </div>

            {isCreating && (
                <ExerciseModal
                    isOpen={isCreating}
                    onClose={() => setIsCreating(false)}
                    onSave={handleCreateExercise}
                    lang={lang}
                    existingExercises={exercises}
                />
            )}

            {/* Finish Confirmation Dialog */}
            {showFinishConfirm && (
                <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-6 backdrop-blur-sm">
                    <div className="w-full max-w-sm bg-surface-container rounded-[28px] p-6 shadow-elevation-3">
                        <h3 className="text-2xl font-normal text-on-surface mb-2">{t('finish_confirm_title', lang)}</h3>
                        <p className="text-on-surface-variant text-sm mb-8">{t('finish_confirm_msg', lang)}</p>
                        <div className="flex justify-end gap-2">
                            <button
                                onClick={() => setShowFinishConfirm(false)}
                                className="px-6 py-2.5 rounded-full text-primary font-medium hover:bg-white/5"
                            >
                                {t('cancel', lang)}
                            </button>
                            <button
                                onClick={() => {
                                    setShowFinishConfirm(false);
                                    onSessionEnd();
                                }}
                                className="px-6 py-2.5 rounded-full bg-green-600 text-white font-medium hover:bg-green-700"
                            >
                                {t('confirm', lang)}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* Quit Without Saving Confirmation Dialog */}
            {showQuitConfirm && (
                <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-6 backdrop-blur-sm">
                    <div className="w-full max-w-sm bg-surface-container rounded-[28px] p-6 shadow-elevation-3">
                        <h3 className="text-2xl font-normal text-error mb-2">{t('quit_confirm_title', lang)}</h3>
                        <p className="text-on-surface-variant text-sm mb-8">{t('quit_confirm_msg', lang)}</p>
                        <div className="flex justify-end gap-2">
                            <button
                                onClick={() => setShowQuitConfirm(false)}
                                className="px-6 py-2.5 rounded-full text-primary font-medium hover:bg-white/5"
                            >
                                {t('cancel', lang)}
                            </button>
                            <button
                                onClick={() => {
                                    setShowQuitConfirm(false);
                                    onSessionQuit();
                                }}
                                className="px-6 py-2.5 rounded-full bg-green-600 text-white font-medium hover:bg-green-700"
                            >
                                {t('confirm', lang)}
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default ActiveSessionView;