import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight, Plus, Minus, Edit2, Save, X, Calendar, Target, TrendingUp } from 'lucide-react';

const WorkoutPlannerApp = () => {
  const [currentWeek, setCurrentWeek] = useState(1);
  const [editingExercise, setEditingExercise] = useState(null);
  const [completedWorkouts, setCompletedWorkouts] = useState({});
  
  // Базовая программа на 12 недель
  const [workoutPlan, setWorkoutPlan] = useState({
    1: {
      name: 'Неделя 1-2: Адаптация и техника',
      workouts: {
        'Понедельник': {
          name: 'Грудь, Плечи, Трицепс',
          exercises: [
            { id: 1, name: 'Жим штанги лежа', sets: 4, reps: '8-10', weight: 50, muscleGroup: 'chest', completed: false },
            { id: 2, name: 'Жим гантелей на наклонной', sets: 3, reps: '10-12', weight: 22.5, muscleGroup: 'chest', completed: false },
            { id: 3, name: 'Жим штанги стоя', sets: 4, reps: '8-10', weight: 35, muscleGroup: 'shoulders', completed: false },
            { id: 4, name: 'Махи гантелями в стороны', sets: 3, reps: '12-15', weight: 10, muscleGroup: 'shoulders', completed: false },
            { id: 5, name: 'Французский жим', sets: 3, reps: '10-12', weight: 25, muscleGroup: 'triceps', completed: false }
          ]
        },
        'Среда': {
          name: 'Спина, Бицепс',
          exercises: [
            { id: 6, name: 'Подтягивания/Тяга верхнего блока', sets: 4, reps: '8-10', weight: 45, muscleGroup: 'back', completed: false },
            { id: 7, name: 'Тяга штанги в наклоне', sets: 4, reps: '8-10', weight: 45, muscleGroup: 'back', completed: false },
            { id: 8, name: 'Тяга гантели в наклоне', sets: 3, reps: '10-12', weight: 25, muscleGroup: 'back', completed: false },
            { id: 9, name: 'Подъем штанги на бицепс', sets: 3, reps: '10-12', weight: 25, muscleGroup: 'biceps', completed: false },
            { id: 10, name: 'Молотки с гантелями', sets: 3, reps: '12-15', weight: 12, muscleGroup: 'biceps', completed: false }
          ]
        },
        'Пятница': {
          name: 'Ноги, Пресс',
          exercises: [
            { id: 11, name: 'Приседания со штангой', sets: 4, reps: '8-10', weight: 60, muscleGroup: 'legs', completed: false },
            { id: 12, name: 'Румынская тяга', sets: 4, reps: '8-10', weight: 50, muscleGroup: 'legs', completed: false },
            { id: 13, name: 'Выпады с гантелями', sets: 3, reps: '12 на ногу', weight: 15, muscleGroup: 'legs', completed: false },
            { id: 14, name: 'Подъемы на носки', sets: 4, reps: '15-20', weight: 40, muscleGroup: 'legs', completed: false },
            { id: 15, name: 'Планка', sets: 3, reps: '45-60 сек', weight: 0, muscleGroup: 'abs', completed: false }
          ]
        }
      }
    },
    5: {
      name: 'Неделя 5-6: Увеличение интенсивности',
      workouts: {
        'Понедельник': {
          name: 'Грудь, Плечи, Трицепс',
          exercises: [
            { id: 16, name: 'Жим штанги лежа', sets: 4, reps: '6-8', weight: 60, muscleGroup: 'chest', completed: false },
            { id: 17, name: 'Жим гантелей на наклонной', sets: 4, reps: '8-10', weight: 27.5, muscleGroup: 'chest', completed: false },
            { id: 18, name: 'Отжимания на брусьях', sets: 3, reps: '10-12', weight: 10, muscleGroup: 'chest', completed: false },
            { id: 19, name: 'Жим штанги стоя', sets: 4, reps: '6-8', weight: 40, muscleGroup: 'shoulders', completed: false },
            { id: 20, name: 'Махи гантелями в стороны', sets: 4, reps: '12-15', weight: 12.5, muscleGroup: 'shoulders', completed: false },
            { id: 21, name: 'Жим узким хватом', sets: 3, reps: '8-10', weight: 45, muscleGroup: 'triceps', completed: false }
          ]
        },
        'Вторник': {
          name: 'Спина, Бицепс',
          exercises: [
            { id: 22, name: 'Становая тяга', sets: 4, reps: '5-6', weight: 80, muscleGroup: 'back', completed: false },
            { id: 23, name: 'Подтягивания с весом', sets: 4, reps: '6-8', weight: 10, muscleGroup: 'back', completed: false },
            { id: 24, name: 'Тяга штанги в наклоне', sets: 4, reps: '6-8', weight: 55, muscleGroup: 'back', completed: false },
            { id: 25, name: 'Подъем штанги на бицепс', sets: 4, reps: '8-10', weight: 30, muscleGroup: 'biceps', completed: false },
            { id: 26, name: 'Подъемы на скамье Скотта', sets: 3, reps: '10-12', weight: 22.5, muscleGroup: 'biceps', completed: false }
          ]
        },
        'Четверг': {
          name: 'Ноги, Пресс',
          exercises: [
            { id: 27, name: 'Приседания со штангой', sets: 5, reps: '5-6', weight: 80, muscleGroup: 'legs', completed: false },
            { id: 28, name: 'Фронтальные приседания', sets: 3, reps: '8-10', weight: 50, muscleGroup: 'legs', completed: false },
            { id: 29, name: 'Румынская тяга', sets: 4, reps: '6-8', weight: 65, muscleGroup: 'legs', completed: false },
            { id: 30, name: 'Болгарские выпады', sets: 3, reps: '10 на ногу', weight: 20, muscleGroup: 'legs', completed: false },
            { id: 31, name: 'Подъемы ног в висе', sets: 3, reps: '12-15', weight: 0, muscleGroup: 'abs', completed: false }
          ]
        },
        'Суббота': {
          name: 'Плечи, Руки',
          exercises: [
            { id: 32, name: 'Жим гантелей сидя', sets: 4, reps: '8-10', weight: 25, muscleGroup: 'shoulders', completed: false },
            { id: 33, name: 'Махи в наклоне', sets: 3, reps: '12-15', weight: 10, muscleGroup: 'shoulders', completed: false },
            { id: 34, name: 'Суперсет: Бицепс + Трицепс', sets: 3, reps: '10-12', weight: 25, muscleGroup: 'arms', completed: false },
            { id: 35, name: 'Обратные отжимания', sets: 3, reps: '12-15', weight: 15, muscleGroup: 'triceps', completed: false }
          ]
        }
      }
    },
    9: {
      name: 'Неделя 9-10: Пиковая нагрузка',
      workouts: {
        'Понедельник': {
          name: 'Грудь, Плечи, Трицепс',
          exercises: [
            { id: 36, name: 'Жим штанги лежа', sets: 5, reps: '4-6', weight: 70, muscleGroup: 'chest', completed: false },
            { id: 37, name: 'Жим гантелей на наклонной', sets: 4, reps: '6-8', weight: 32.5, muscleGroup: 'chest', completed: false },
            { id: 38, name: 'Отжимания на брусьях с весом', sets: 4, reps: '8-10', weight: 15, muscleGroup: 'chest', completed: false },
            { id: 39, name: 'Жим штанги стоя', sets: 5, reps: '4-6', weight: 50, muscleGroup: 'shoulders', completed: false },
            { id: 40, name: 'Жим узким хватом', sets: 4, reps: '6-8', weight: 55, muscleGroup: 'triceps', completed: false }
          ]
        },
        'Вторник': {
          name: 'Спина, Бицепс',
          exercises: [
            { id: 41, name: 'Становая тяга', sets: 5, reps: '3-5', weight: 100, muscleGroup: 'back', completed: false },
            { id: 42, name: 'Подтягивания с весом', sets: 4, reps: '5-7', weight: 20, muscleGroup: 'back', completed: false },
            { id: 43, name: 'Тяга Т-грифа', sets: 4, reps: '6-8', weight: 60, muscleGroup: 'back', completed: false },
            { id: 44, name: 'Подъем штанги на бицепс', sets: 4, reps: '6-8', weight: 37.5, muscleGroup: 'biceps', completed: false },
            { id: 45, name: 'Подъемы на скамье Скотта', sets: 3, reps: '8-10', weight: 27.5, muscleGroup: 'biceps', completed: false }
          ]
        },
        'Четверг': {
          name: 'Ноги, Пресс',
          exercises: [
            { id: 46, name: 'Приседания со штангой', sets: 5, reps: '3-5', weight: 100, muscleGroup: 'legs', completed: false },
            { id: 47, name: 'Фронтальные приседания', sets: 4, reps: '6-8', weight: 60, muscleGroup: 'legs', completed: false },
            { id: 48, name: 'Румынская тяга', sets: 4, reps: '5-7', weight: 80, muscleGroup: 'legs', completed: false },
            { id: 49, name: 'Выпады с штангой', sets: 3, reps: '8 на ногу', weight: 30, muscleGroup: 'legs', completed: false },
            { id: 50, name: 'Подъемы ног с весом', sets: 3, reps: '10-12', weight: 5, muscleGroup: 'abs', completed: false }
          ]
        },
        'Пятница': {
          name: 'Плечи, Руки',
          exercises: [
            { id: 51, name: 'Жим гантелей сидя', sets: 4, reps: '6-8', weight: 32.5, muscleGroup: 'shoulders', completed: false },
            { id: 52, name: 'Тяга к подбородку', sets: 3, reps: '10-12', weight: 35, muscleGroup: 'shoulders', completed: false },
            { id: 53, name: 'Суперсет: Бицепс + Трицепс', sets: 4, reps: '8-10', weight: 30, muscleGroup: 'arms', completed: false },
            { id: 54, name: 'Французский жим стоя', sets: 3, reps: '8-10', weight: 32.5, muscleGroup: 'triceps', completed: false }
          ]
        }
      }
    },
    12: {
      name: 'Неделя 11-12: Deload и восстановление',
      workouts: {
        'Понедельник': {
          name: 'Полное тело - легкая нагрузка',
          exercises: [
            { id: 55, name: 'Жим лежа', sets: 3, reps: '10-12', weight: 45, muscleGroup: 'chest', completed: false },
            { id: 56, name: 'Тяга верхнего блока', sets: 3, reps: '12-15', weight: 35, muscleGroup: 'back', completed: false },
            { id: 57, name: 'Приседания', sets: 3, reps: '12-15', weight: 50, muscleGroup: 'legs', completed: false },
            { id: 58, name: 'Жим гантелей сидя', sets: 3, reps: '12-15', weight: 20, muscleGroup: 'shoulders', completed: false }
          ]
        },
        'Четверг': {
          name: 'Полное тело - восстановительная',
          exercises: [
            { id: 59, name: 'Отжимания от пола', sets: 3, reps: '15-20', weight: 0, muscleGroup: 'chest', completed: false },
            { id: 60, name: 'Подтягивания', sets: 3, reps: '8-12', weight: 0, muscleGroup: 'back', completed: false },
            { id: 61, name: 'Приседания с гантелью', sets: 3, reps: '15-20', weight: 20, muscleGroup: 'legs', completed: false },
            { id: 62, name: 'Планка', sets: 3, reps: '60 сек', weight: 0, muscleGroup: 'abs', completed: false }
          ]
        }
      }
    }
  });

  const muscleGroupColors = {
    chest: 'bg-red-100 text-red-800',
    back: 'bg-blue-100 text-blue-800',
    shoulders: 'bg-yellow-100 text-yellow-800',
    arms: 'bg-purple-100 text-purple-800',
    biceps: 'bg-purple-100 text-purple-800',
    triceps: 'bg-indigo-100 text-indigo-800',
    legs: 'bg-green-100 text-green-800',
    abs: 'bg-orange-100 text-orange-800'
  };

  const muscleGroupNames = {
    chest: 'Грудь',
    back: 'Спина',
    shoulders: 'Плечи',
    arms: 'Руки',
    biceps: 'Бицепс',
    triceps: 'Трицепс',
    legs: 'Ноги',
    abs: 'Пресс'
  };

  const updateExercise = (weekNum, day, exerciseId, field, value) => {
    setWorkoutPlan(prev => {
      const newPlan = { ...prev };
      if (!newPlan[weekNum] || !newPlan[weekNum].workouts[day]) return prev;
      
      const exercise = newPlan[weekNum].workouts[day].exercises.find(ex => ex.id === exerciseId);
      if (exercise) {
        exercise[field] = value;
      }
      return newPlan;
    });
  };

  const addExercise = (weekNum, day) => {
    const newExercise = {
      id: Date.now(),
      name: 'Новое упражнение',
      sets: 3,
      reps: '10-12',
      weight: 20,
      muscleGroup: 'chest',
      completed: false
    };
    
    setWorkoutPlan(prev => {
      const newPlan = { ...prev };
      if (!newPlan[weekNum]) {
        newPlan[weekNum] = { name: `Неделя ${weekNum}`, workouts: {} };
      }
      if (!newPlan[weekNum].workouts[day]) {
        newPlan[weekNum].workouts[day] = { name: day, exercises: [] };
      }
      newPlan[weekNum].workouts[day].exercises.push(newExercise);
      return newPlan;
    });
  };

  const removeExercise = (weekNum, day, exerciseId) => {
    setWorkoutPlan(prev => {
      const newPlan = { ...prev };
      if (newPlan[weekNum] && newPlan[weekNum].workouts[day]) {
        newPlan[weekNum].workouts[day].exercises = newPlan[weekNum].workouts[day].exercises.filter(ex => ex.id !== exerciseId);
      }
      return newPlan;
    });
  };

  const toggleExerciseComplete = (weekNum, day, exerciseId) => {
    const currentExercise = workoutPlan[weekNum]?.workouts[day]?.exercises.find(ex => ex.id === exerciseId);
    if (currentExercise) {
      updateExercise(weekNum, day, exerciseId, 'completed', !currentExercise.completed);
    }
  };

  const getWeekProgress = (weekNum) => {
    if (!workoutPlan[weekNum]) return 0;
    const totalExercises = Object.values(workoutPlan[weekNum].workouts).reduce((acc, workout) => acc + workout.exercises.length, 0);
    const completedExercises = Object.values(workoutPlan[weekNum].workouts).reduce((acc, workout) => 
      acc + workout.exercises.filter(ex => ex.completed).length, 0);
    return totalExercises > 0 ? Math.round((completedExercises / totalExercises) * 100) : 0;
  };

  const currentWeekData = workoutPlan[currentWeek];

  return (
    <div className="max-w-6xl mx-auto p-6 bg-gray-50 min-h-screen">
      <div className="bg-white rounded-xl shadow-lg overflow-hidden">
        {/* Заголовок */}
        <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold mb-2">Персональный план тренировок</h1>
              <p className="text-blue-100">3-месячная программа прогрессивной нагрузки</p>
            </div>
            <div className="text-right">
              <div className="text-2xl font-bold">{getWeekProgress(currentWeek)}%</div>
              <div className="text-sm text-blue-100">прогресс недели</div>
            </div>
          </div>
        </div>

        {/* Навигация по неделям */}
        <div className="bg-white p-4 border-b">
          <div className="flex items-center justify-between mb-4">
            <button
              onClick={() => setCurrentWeek(Math.max(1, currentWeek - 1))}
              className={`flex items-center px-4 py-2 rounded-lg ${
                currentWeek === 1 
                  ? 'bg-gray-200 text-gray-400 cursor-not-allowed' 
                  : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
              }`}
              disabled={currentWeek === 1}
            >
              <ChevronLeft className="w-4 h-4 mr-2" />
              Предыдущая
            </button>
            
            <div className="text-center">
              <h2 className="text-xl font-bold">Неделя {currentWeek}</h2>
              <p className="text-gray-600">{currentWeekData?.name || `Неделя ${currentWeek}`}</p>
            </div>
            
            <button
              onClick={() => setCurrentWeek(Math.min(12, currentWeek + 1))}
              className={`flex items-center px-4 py-2 rounded-lg ${
                currentWeek === 12 
                  ? 'bg-gray-200 text-gray-400 cursor-not-allowed' 
                  : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
              }`}
              disabled={currentWeek === 12}
            >
              Следующая
              <ChevronRight className="w-4 h-4 ml-2" />
            </button>
          </div>

          {/* Прогресс бар недель */}
          <div className="flex space-x-1">
            {Array.from({length: 12}, (_, i) => i + 1).map(week => (
              <div
                key={week}
                className={`flex-1 h-2 rounded cursor-pointer transition-colors ${
                  week === currentWeek 
                    ? 'bg-blue-600' 
                    : week < currentWeek 
                      ? 'bg-green-400' 
                      : 'bg-gray-200'
                }`}
                onClick={() => setCurrentWeek(week)}
                title={`Неделя ${week}`}
              />
            ))}
          </div>
        </div>

        {/* Тренировочные дни */}
        <div className="p-6">
          {currentWeekData ? (
            <div className="grid gap-6">
              {Object.entries(currentWeekData.workouts).map(([day, workout]) => (
                <div key={day} className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
                  <div className="flex items-center justify-between mb-4">
                    <div>
                      <h3 className="text-xl font-bold text-gray-800">{day}</h3>
                      <p className="text-gray-600">{workout.name}</p>
                    </div>
                    <button
                      onClick={() => addExercise(currentWeek, day)}
                      className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                    >
                      <Plus className="w-4 h-4 mr-2" />
                      Добавить упражнение
                    </button>
                  </div>

                  <div className="space-y-3">
                    {workout.exercises.map((exercise) => (
                      <div
                        key={exercise.id}
                        className={`flex items-center justify-between p-4 border rounded-lg transition-all ${
                          exercise.completed ? 'bg-green-50 border-green-200' : 'bg-gray-50 hover:bg-gray-100'
                        }`}
                      >
                        <div className="flex items-center space-x-4 flex-1">
                          <input
                            type="checkbox"
                            checked={exercise.completed}
                            onChange={() => toggleExerciseComplete(currentWeek, day, exercise.id)}
                            className="w-5 h-5 text-green-600 rounded"
                          />
                          
                          <div className="flex-1">
                            {editingExercise === exercise.id ? (
                              <input
                                type="text"
                                value={exercise.name}
                                onChange={(e) => updateExercise(currentWeek, day, exercise.id, 'name', e.target.value)}
                                className="text-lg font-medium bg-white border rounded px-2 py-1 w-full"
                                onBlur={() => setEditingExercise(null)}
                                onKeyDown={(e) => {
                                  if (e.key === 'Enter') setEditingExercise(null);
                                  if (e.key === 'Escape') setEditingExercise(null);
                                }}
                                autoFocus
                              />
                            ) : (
                              <h4 
                                className={`text-lg font-medium cursor-pointer hover:text-blue-600 transition-colors ${
                                  exercise.completed ? 'line-through text-gray-500' : ''
                                }`}
                                onClick={() => setEditingExercise(exercise.id)}
                              >
                                {exercise.name}
                              </h4>
                            )}
                            <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium mt-1 ${
                              muscleGroupColors[exercise.muscleGroup] || 'bg-gray-100 text-gray-800'
                            }`}>
                              {muscleGroupNames[exercise.muscleGroup] || exercise.muscleGroup}
                            </span>
                          </div>
                        </div>

                        <div className="flex items-center space-x-4">
                          <div className="flex items-center space-x-2">
                            <span className="text-sm text-gray-600 whitespace-nowrap">Подходы:</span>
                            <button
                              onClick={() => updateExercise(currentWeek, day, exercise.id, 'sets', Math.max(1, exercise.sets - 1))}
                              className="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300 transition-colors"
                            >
                              <Minus className="w-3 h-3" />
                            </button>
                            <span className="w-8 text-center font-medium">{exercise.sets}</span>
                            <button
                              onClick={() => updateExercise(currentWeek, day, exercise.id, 'sets', exercise.sets + 1)}
                              className="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300 transition-colors"
                            >
                              <Plus className="w-3 h-3" />
                            </button>
                          </div>

                          <div className="flex items-center space-x-2">
                            <span className="text-sm text-gray-600 whitespace-nowrap">Повторы:</span>
                            <input
                              type="text"
                              value={exercise.reps}
                              onChange={(e) => updateExercise(currentWeek, day, exercise.id, 'reps', e.target.value)}
                              className="w-16 px-2 py-1 text-center border rounded text-sm"
                            />
                          </div>

                          <div className="flex items-center space-x-2">
                            <span className="text-sm text-gray-600 whitespace-nowrap">Вес:</span>
                            <button
                              onClick={() => updateExercise(currentWeek, day, exercise.id, 'weight', Math.max(0, exercise.weight - 2.5))}
                              className="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300 transition-colors"
                            >
                              <Minus className="w-3 h-3" />
                            </button>
                            <span className="w-14 text-center font-medium text-sm">{exercise.weight}кг</span>
                            <button
                              onClick={() => updateExercise(currentWeek, day, exercise.id, 'weight', exercise.weight + 2.5)}
                              className="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300 transition-colors"
                            >
                              <Plus className="w-3 h-3" />
                            </button>
                          </div>

                          <button
                            onClick={() => removeExercise(currentWeek, day, exercise.id)}
                            className="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center hover:bg-red-200 transition-colors"
                          >
                            <X className="w-4 h-4" />
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-12">
              <Calendar className="w-16 h-16 text-gray-400 mx-auto mb-4" />
              <h3 className="text-xl font-medium text-gray-600 mb-2">Неделя в разработке</h3>
              <p className="text-gray-500 mb-4">Программа тренировок для этой недели скоро будет доступна</p>
              <button
                onClick={() => addExercise(currentWeek, 'Понедельник')}
                className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                Создать тренировку
              </button>
            </div>
          )}
        </div>

        {/* Статистика */}
        <div className="bg-gray-50 p-6 border-t">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center">
              <div className="text-2xl font-bold text-blue-600">{currentWeek}/12</div>
              <div className="text-gray-600">Недель пройдено</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-green-600">
                {currentWeekData ? Object.values(currentWeekData.workouts).reduce((acc, w) => acc + w.exercises.filter(e => e.completed).length, 0) : 0}
              </div>
              <div className="text-gray-600">Упражнений выполнено</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-purple-600">
                {currentWeekData ? Math.round(Object.values(currentWeekData.workouts).reduce((acc, w) => acc + w.exercises.reduce((sum, e) => sum + (e.weight * e.sets), 0), 0)) : 0}
              </div>
              <div className="text-gray-600">Общий тоннаж (кг)</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WorkoutPlannerApp;