import React, { useState } from 'react';
import { Calendar, Clock, TrendingUp, Scale, 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 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">
            <div className="flex justify-between items-start mb-4 border-b border-outline-variant pb-3">
              <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-tertiary-container text-on-tertiary-container flex items-center justify-center">
                      <Calendar size={20} />
                  </div>
                  <div>
                      <div className="font-medium text-on-surface text-lg">
                          {new Date(session.startTime).toLocaleDateString(lang === 'ru' ? 'ru-RU' : 'en-US', { weekday: 'long', day: 'numeric', month: 'long' })}
                      </div>
                      <div className="text-xs text-on-surface-variant flex items-center gap-2">
                          <span>{new Date(session.startTime).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
                          {session.userBodyWeight && <span className="px-2 py-0.5 rounded-full bg-surface-container-high text-on-surface">{session.userBodyWeight}kg</span>}
                      </div>
                  </div>
              </div>
              
              <div className="flex gap-1">
                  <button 
                      onClick={() => 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={() => 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 className="space-y-2">
              {Array.from(new Set(session.sets.map(s => s.exerciseName))).slice(0, 4).map(exName => {
                  const sets = session.sets.filter(s => s.exerciseName === exName);
                  const count = sets.length;
                  const bestSet = sets[0];
                  let detail = "";
                  if (bestSet.type === ExerciseType.HIGH_JUMP) detail = `${t('max', lang)}: ${Math.max(...sets.map(s => s.height || 0))}cm`;
                  else if (bestSet.type === ExerciseType.LONG_JUMP) detail = `${t('max', lang)}: ${Math.max(...sets.map(s => s.distanceMeters || 0))}m`;
                  else if (bestSet.type === ExerciseType.STRENGTH) detail = `${t('upto', lang)} ${Math.max(...sets.map(s => s.weight || 0))}kg`;
                  
                  return (
                      <div key={exName} className="flex justify-between text-sm items-center">
                          <span className="text-on-surface">{exName}</span>
                          <span className="text-on-surface-variant flex gap-2 items-center">
                            {detail && <span className="text-[10px] bg-surface-container-high px-2 py-0.5 rounded text-on-surface-variant">{detail}</span>}
                            <span>{count}</span>
                          </span>
                      </div>
                  );
              })}
              {new Set(session.sets.map(s => s.exerciseName)).size > 4 && (
                  <div className="text-xs text-center text-on-surface-variant mt-2">
                      + ...
                  </div>
              )}
            </div>
            
            <div className="mt-4 pt-3 border-t border-outline-variant flex justify-between items-center">
                <div className="flex gap-4">
                    <span className="text-xs text-on-surface-variant">{t('sets_count', lang)}: <span className="text-on-surface font-medium">{session.sets.length}</span></span>
                    {totalWork > 0 && (
                        <span className="text-xs text-on-surface-variant flex items-center gap-1">
                            <Scale size={12} />
                            {(totalWork / 1000).toFixed(1)}t
                        </span>
                    )}
                </div>
                <div className="flex items-center gap-1 text-primary text-xs font-bold tracking-wide">
                    <TrendingUp size={14} />
                    {t('finished', lang)}
                </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">
                                    <X 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 ?? ''}
                                            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 ?? ''}
                                            onChange={(e) => handleUpdateSet(set.id, 'reps', parseFloat(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 ?? 100}
                                            onChange={(e) => handleUpdateSet(set.id, 'bodyWeightPercentage', parseFloat(e.target.value))}
                                        />
                                    </div>
                                )}
                                {/* Add other fields similarly styled if needed */}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
      )}
    </div>
  );
};

export default History;