import React, { useState } from 'react';
import { Calendar, Clock, TrendingUp, Gauge, Pencil, Trash2, X, Save, ArrowRight, ArrowUp, Timer, Activity, Dumbbell, Percent } from 'lucide-react';
import { WorkoutSession, ExerciseType, WorkoutSet, Language } from '../types';
import { t } from '../services/i18n';

interface HistoryProps {
    sessions: WorkoutSession[];
    onUpdateSession?: (session: WorkoutSession) => void;
    onDeleteSession?: (sessionId: string) => void;
    lang: Language;
}

const History: React.FC<HistoryProps> = ({ sessions, onUpdateSession, onDeleteSession, lang }) => {
    const [editingSession, setEditingSession] = useState<WorkoutSession | null>(null);
    const [deletingId, setDeletingId] = useState<string | null>(null);

    const calculateSessionWork = (session: WorkoutSession) => {
        const bw = session.userBodyWeight || 70;
        return session.sets.reduce((acc, set) => {
            let w = 0;
            if (set.type === ExerciseType.STRENGTH) {
                w = (set.weight || 0) * (set.reps || 0);
            }
            if (set.type === ExerciseType.BODYWEIGHT) {
                const percent = set.bodyWeightPercentage || 100;
                const effectiveBw = bw * (percent / 100);
                w = (effectiveBw + (set.weight || 0)) * (set.reps || 0);
            }
            return acc + Math.max(0, w);
        }, 0);
    };

    const formatDateForInput = (timestamp: number) => {
        const d = new Date(timestamp);
        const pad = (n: number) => n < 10 ? '0' + n : n;
        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
    };

    const parseDateFromInput = (value: string) => {
        return new Date(value).getTime();
    };

    const formatDuration = (startTime: number, endTime?: number) => {
        if (!endTime || isNaN(endTime) || isNaN(startTime)) return '';
        const durationMs = endTime - startTime;
        if (durationMs < 0 || isNaN(durationMs)) return '';

        const hours = Math.floor(durationMs / 3600000);
        const minutes = Math.floor((durationMs % 3600000) / 60000);

        if (hours > 0) {
            return `${hours}h ${minutes}m`;
        }
        if (minutes < 1) {
            return '<1m';
        }
        return `${minutes}m`;
    };

    const handleSaveEdit = () => {
        if (editingSession && onUpdateSession) {
            onUpdateSession(editingSession);
            setEditingSession(null);
        }
    };

    const handleUpdateSet = (setId: string, field: keyof WorkoutSet, value: number) => {
        if (!editingSession) return;
        const updatedSets = editingSession.sets.map(s =>
            s.id === setId ? { ...s, [field]: value } : s
        );
        setEditingSession({ ...editingSession, sets: updatedSets });
    };

    const handleDeleteSet = (setId: string) => {
        if (!editingSession) return;
        setEditingSession({
            ...editingSession,
            sets: editingSession.sets.filter(s => s.id !== setId)
        });
    };

    const handleConfirmDelete = () => {
        if (deletingId && onDeleteSession) {
            onDeleteSession(deletingId);
            setDeletingId(null);
        }
    }

    if (sessions.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center h-full text-on-surface-variant p-8 text-center">
                <Clock size={48} className="mb-4 opacity-50" />
                <p>{t('history_empty', lang)}</p>
            </div>
        );
    }

    return (
        <div className="h-full flex flex-col bg-surface">
            <div className="p-4 bg-surface-container shadow-elevation-1 z-10">
                <h2 className="text-2xl font-normal text-on-surface">{t('tab_history', lang)}</h2>
            </div>

            <div className="flex-1 overflow-y-auto p-4 space-y-4 pb-20">
                {sessions.map((session) => {
                    const totalWork = calculateSessionWork(session);

                    return (
                        <div
                            key={session.id}
                            className="bg-surface-container rounded-xl p-5 shadow-elevation-1 border border-outline-variant/20 cursor-pointer hover:bg-surface-container-high transition-colors"
                            onClick={() => setEditingSession(JSON.parse(JSON.stringify(session)))}
                        >
                            <div className="flex justify-between items-start">
                                <div className="flex-1">
                                    <div className="flex items-center gap-3 flex-wrap">
                                        <span className="font-medium text-on-surface text-lg">
                                            {new Date(session.startTime).toISOString().split('T')[0]}
                                        </span>
                                        <span className="text-sm text-on-surface-variant">
                                            {new Date(session.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                        </span>
                                        {session.endTime && (
                                            <span className="text-sm text-on-surface-variant">
                                                {formatDuration(session.startTime, session.endTime)}
                                            </span>
                                        )}
                                        <span className="text-sm text-on-surface-variant">
                                            {session.planName || t('no_plan', lang)}
                                        </span>
                                        {session.userBodyWeight && (
                                            <span className="px-2 py-0.5 rounded-full bg-surface-container-high text-on-surface text-xs">
                                                {session.userBodyWeight}kg
                                            </span>
                                        )}
                                    </div>
                                    <div className="mt-2 text-xs text-on-surface-variant flex items-center">
                                        <span className="inline-flex items-center">
                                            {t('sets_count', lang)}: <span className="text-on-surface font-medium ml-1">{session.sets.length}</span>
                                        </span>
                                        {totalWork > 0 && (
                                            <span className="ml-4 inline-flex items-center gap-1">
                                                <Gauge size={12} />
                                                {(totalWork / 1000).toFixed(1)}t
                                            </span>
                                        )}
                                    </div>
                                </div>

                                <div className="flex gap-1">
                                    <button
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            setEditingSession(JSON.parse(JSON.stringify(session)));
                                        }}
                                        className="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-container-high rounded-full transition-colors"
                                    >
                                        <Pencil size={20} />
                                    </button>
                                    <button
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            setDeletingId(session.id);
                                        }}
                                        className="p-2 text-on-surface-variant hover:text-error hover:bg-surface-container-high rounded-full transition-colors"
                                    >
                                        <Trash2 size={20} />
                                    </button>
                                </div>
                            </div>
                        </div>
                    )
                })}
            </div>

            {/* DELETE CONFIRMATION DIALOG (MD3) */}
            {deletingId && (
                <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
                    <div className="bg-surface-container w-full max-w-xs rounded-[28px] p-6 shadow-elevation-3">
                        <h3 className="text-xl font-normal text-on-surface mb-2">{t('delete_workout', lang)}</h3>
                        <p className="text-sm text-on-surface-variant mb-8">{t('delete_confirm', lang)}</p>
                        <div className="flex justify-end gap-2">
                            <button
                                onClick={() => setDeletingId(null)}
                                className="px-4 py-2 rounded-full text-primary font-medium hover:bg-white/5"
                            >
                                {t('cancel', lang)}
                            </button>
                            <button
                                onClick={handleConfirmDelete}
                                className="px-4 py-2 rounded-full bg-error-container text-on-error-container font-medium"
                            >
                                {t('delete', lang)}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* EDIT SESSION FULLSCREEN DIALOG */}
            {editingSession && (
                <div className="fixed inset-0 z-[60] bg-surface flex flex-col animate-in slide-in-from-bottom-10 duration-200">
                    <div className="px-4 py-3 border-b border-outline-variant flex justify-between items-center bg-surface-container shadow-elevation-1">
                        <button onClick={() => setEditingSession(null)} className="text-on-surface-variant hover:text-on-surface">
                            <X />
                        </button>
                        <h2 className="text-lg font-medium text-on-surface">{t('edit', lang)}</h2>
                        <button onClick={handleSaveEdit} className="text-primary font-medium flex items-center gap-2">
                            {t('save', lang)}
                        </button>
                    </div>

                    <div className="flex-1 overflow-y-auto p-4 space-y-6">
                        {/* Meta Info */}
                        <div className="bg-surface-container p-4 rounded-xl border border-outline-variant/20 space-y-4">
                            <div className="grid grid-cols-2 gap-3">
                                <div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
                                    <label className="text-[10px] text-on-surface-variant font-bold block">{t('start_time', lang)}</label>
                                    <input
                                        type="datetime-local"
                                        value={formatDateForInput(editingSession.startTime)}
                                        onChange={(e) => setEditingSession({ ...editingSession, startTime: parseDateFromInput(e.target.value) })}
                                        className="w-full bg-transparent text-on-surface focus:outline-none text-sm mt-1"
                                    />
                                </div>
                                <div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
                                    <label className="text-[10px] text-on-surface-variant font-bold block">{t('end_time', lang)}</label>
                                    <input
                                        type="datetime-local"
                                        value={editingSession.endTime ? formatDateForInput(editingSession.endTime) : ''}
                                        onChange={(e) => setEditingSession({ ...editingSession, endTime: parseDateFromInput(e.target.value) })}
                                        className="w-full bg-transparent text-on-surface focus:outline-none text-sm mt-1"
                                    />
                                </div>
                            </div>
                            <div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
                                <label className="text-[10px] text-on-surface-variant font-bold block">{t('weight_kg', lang)}</label>
                                <input
                                    type="number"
                                    value={editingSession.userBodyWeight || ''}
                                    onChange={(e) => setEditingSession({ ...editingSession, userBodyWeight: parseFloat(e.target.value) })}
                                    className="w-full bg-transparent text-on-surface focus:outline-none text-lg mt-1"
                                />
                            </div>
                        </div>

                        <div className="space-y-3">
                            <h3 className="text-sm font-medium text-primary ml-1">{t('sets_count', lang)} ({editingSession.sets.length})</h3>
                            {editingSession.sets.map((set, idx) => (
                                <div key={set.id} className="bg-surface-container p-3 rounded-xl border border-outline-variant/20 flex flex-col gap-3 shadow-sm">
                                    <div className="flex justify-between items-center border-b border-outline-variant pb-2">
                                        <div className="flex items-center gap-2">
                                            <span className="w-6 h-6 rounded-full bg-secondary-container text-on-secondary-container text-xs font-bold flex items-center justify-center">{idx + 1}</span>
                                            <span className="font-medium text-on-surface text-sm">{set.exerciseName}</span>
                                        </div>
                                        <button
                                            onClick={() => handleDeleteSet(set.id)}
                                            className="text-on-surface-variant hover:text-error p-1 rounded hover:bg-error-container/10 transition-colors"
                                            title={t('delete', lang)}
                                        >
                                            <Trash2 size={18} />
                                        </button>
                                    </div>

                                    <div className="grid grid-cols-3 gap-2">
                                        {(set.type === ExerciseType.STRENGTH || set.type === ExerciseType.BODYWEIGHT || set.type === ExerciseType.STATIC) && (
                                            <div className="bg-surface-container-high rounded px-2 py-1">
                                                <label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Dumbbell size={10} /> {t('weight_kg', lang)}</label>
                                                <input
                                                    type="number"
                                                    className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
                                                    value={set.weight === 0 ? '' : (set.weight ?? '')}
                                                    onChange={(e) => handleUpdateSet(set.id, 'weight', parseFloat(e.target.value))}
                                                />
                                            </div>
                                        )}
                                        {(set.type === ExerciseType.STRENGTH || set.type === ExerciseType.BODYWEIGHT || set.type === ExerciseType.PLYOMETRIC) && (
                                            <div className="bg-surface-container-high rounded px-2 py-1">
                                                <label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Activity size={10} /> {t('reps', lang)}</label>
                                                <input
                                                    type="number"
                                                    className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
                                                    value={set.reps === 0 ? '' : (set.reps ?? '')}
                                                    onChange={(e) => handleUpdateSet(set.id, 'reps', parseInt(e.target.value))}
                                                />
                                            </div>
                                        )}
                                        {(set.type === ExerciseType.BODYWEIGHT || set.type === ExerciseType.STATIC) && (
                                            <div className="bg-surface-container-high rounded px-2 py-1">
                                                <label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Percent size={10} /> {t('body_weight_percent', lang)}</label>
                                                <input
                                                    type="number"
                                                    className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
                                                    value={set.bodyWeightPercentage === 0 ? '' : (set.bodyWeightPercentage ?? 100)}
                                                    onChange={(e) => handleUpdateSet(set.id, 'bodyWeightPercentage', parseFloat(e.target.value))}
                                                />
                                            </div>
                                        )}
                                        {(set.type === ExerciseType.CARDIO || set.type === ExerciseType.STATIC) && (
                                            <div className="bg-surface-container-high rounded px-2 py-1">
                                                <label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Timer size={10} /> {t('time_sec', lang)}</label>
                                                <input
                                                    type="number"
                                                    className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
                                                    value={set.durationSeconds === 0 ? '' : (set.durationSeconds ?? '')}
                                                    onChange={(e) => handleUpdateSet(set.id, 'durationSeconds', parseFloat(e.target.value))}
                                                />
                                            </div>
                                        )}
                                        {(set.type === ExerciseType.CARDIO || set.type === ExerciseType.LONG_JUMP) && (
                                            <div className="bg-surface-container-high rounded px-2 py-1">
                                                <label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><ArrowRight size={10} /> {t('dist_m', lang)}</label>
                                                <input
                                                    type="number"
                                                    className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
                                                    value={set.distanceMeters === 0 ? '' : (set.distanceMeters ?? '')}
                                                    onChange={(e) => handleUpdateSet(set.id, 'distanceMeters', parseFloat(e.target.value))}
                                                />
                                            </div>
                                        )}
                                        {(set.type === ExerciseType.HIGH_JUMP) && (
                                            <div className="bg-surface-container-high rounded px-2 py-1">
                                                <label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><ArrowUp size={10} /> {t('height_cm', lang)}</label>
                                                <input
                                                    type="number"
                                                    className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
                                                    value={set.height === 0 ? '' : (set.height ?? '')}
                                                    onChange={(e) => handleUpdateSet(set.id, 'height', parseFloat(e.target.value))}
                                                />
                                            </div>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default History;