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

interface SporadicViewProps {
    tracker: ReturnType<typeof useTracker>;
    lang: Language;
    sporadicSets?: SporadicSet[];
}

const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang, sporadicSets }) => {
    const {
        searchQuery,
        setSearchQuery,
        setShowSuggestions,
        showSuggestions,
        filteredExercises,
        setSelectedExercise,
        selectedExercise,
        weight,
        setWeight,
        reps,
        setReps,
        duration,
        setDuration,
        distance,
        setDistance,
        height,
        setHeight,
        handleLogSporadicSet,
        sporadicSuccess,
        setIsSporadicMode,
        isCreating,
        setIsCreating,
        handleCreateExercise,
        exercises,
        resetForm
    } = tracker;

    const [todaysSets, setTodaysSets] = useState<SporadicSet[]>([]);

    useEffect(() => {
        if (sporadicSets) {
            const startOfDay = new Date();
            startOfDay.setHours(0, 0, 0, 0);
            const todayS = sporadicSets.filter(s => s.timestamp >= startOfDay.getTime());
            setTodaysSets(todayS.sort((a, b) => b.timestamp - a.timestamp));
        }
    }, [sporadicSets]);

    const renderSetMetrics = (set: SporadicSet) => {
        const metrics: string[] = [];
        if (set.weight) metrics.push(`${set.weight} ${t('weight_kg', lang)}`);
        if (set.reps) metrics.push(`${set.reps} ${t('reps', lang)}`);
        if (set.durationSeconds) metrics.push(`${set.durationSeconds} ${t('time_sec', lang)}`);
        if (set.distanceMeters) metrics.push(`${set.distanceMeters} ${t('dist_m', lang)}`);
        if (set.height) metrics.push(`${set.height} ${t('height_cm', lang)}`);
        return metrics.join(' / ');
    };

    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">
                <button
                    onClick={() => {
                        resetForm();
                        setIsSporadicMode(false);
                    }}
                    className="text-error font-medium text-sm hover:opacity-80 transition-opacity"
                >
                    {t('quit', lang)}
                </button>
                <div className="flex flex-col items-center">
                    <h2 className="text-title-medium text-on-surface flex items-center gap-2 font-medium">
                        <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
                        {t('quick_log', lang)}
                    </h2>
                </div>
                <button
                    onClick={handleLogSporadicSet}
                    className={`px-5 py-2 rounded-full text-sm font-medium transition-all ${selectedExercise
                        ? 'bg-primary-container text-on-primary-container hover:opacity-90 shadow-elevation-1'
                        : 'bg-surface-container-high text-on-surface-variant opacity-50 cursor-not-allowed'
                        }`}
                    disabled={!selectedExercise}
                >
                    {t('log_set', lang)}
                </button>
            </div>

            <div className="flex-1 overflow-y-auto p-4 pb-32 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-3 px-2 py-3 bg-surface-container rounded-xl">
                                <input
                                    type="checkbox"
                                    id="sameValuesBothSidesSporadic"
                                    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="sameValuesBothSidesSporadic" 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} />}
                                    />
                                )}
                                {(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={handleLogSporadicSet}
                            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 ${sporadicSuccess
                                ? 'bg-green-500 text-white'
                                : 'bg-primary-container text-on-primary-container'
                                }`}
                        >
                            {sporadicSuccess ? <CheckCircle size={24} /> : <Plus size={24} />}
                            <span>{sporadicSuccess ? t('saved', lang) : t('log_set', lang)}</span>
                        </button>
                    </div>
                )}

                {/* History Section */}
                {todaysSets.length > 0 && (
                    <div className="mt-6">
                        <h3 className="text-title-medium font-medium mb-3">{t('history_section', lang)}</h3>
                        <div className="space-y-2">
                            {todaysSets.map(set => (
                                <div key={set.id} className="bg-surface-container rounded-lg p-3 flex items-center justify-between shadow-elevation-1 animate-in fade-in">
                                    <div>
                                        <p className="font-medium text-on-surface">{set.exerciseName}</p>
                                        <p className="text-sm text-on-surface-variant">{renderSetMetrics(set)}</p>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        {/* Edit and Delete buttons can be added here in the future */}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                )}
            </div>

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

export default SporadicView;