"use client"

import type React from "react"
import { useState } from "react"
import { useHistory, useParams } from "react-router-dom"
import BottomNavigation from "../components/BottomNavigation"

const CourseExercises: React.FC = () => {
  const history = useHistory()
  const { id } = useParams<{ id: string }>()
  const [currentSlide, setCurrentSlide] = useState(0)

  const exercises = [
    {
      id: 1,
      name: "Подъемы ног лежа",
      duration: "15 мин",
      sets: 3,
      reps: 12,
      image: "/placeholder.svg?height=200&width=300",
      difficulty: "Легкий",
      description: "Укрепление мышц бедра и улучшение подвижности коленного сустава",
      calories: 45,
    },
    {
      id: 2,
      name: "Приседания у стены",
      duration: "10 мин",
      sets: 2,
      reps: 15,
      image: "/placeholder.svg?height=200&width=300",
      difficulty: "Средний",
      description: "Безопасные приседания для восстановления силы ног",
      calories: 60,
    },
    {
      id: 3,
      name: "Растяжка квадрицепса",
      duration: "8 мин",
      sets: 1,
      reps: 30,
      image: "/placeholder.svg?height=200&width=300",
      difficulty: "Легкий",
      description: "Улучшение гибкости и снятие напряжения",
      calories: 25,
    },
    {
      id: 4,
      name: "Укрепление икр",
      duration: "12 мин",
      sets: 3,
      reps: 20,
      image: "/placeholder.svg?height=200&width=300",
      difficulty: "Средний",
      description: "Развитие силы и выносливости икроножных мышц",
      calories: 40,
    },
  ]

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % exercises.length)
  }

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + exercises.length) % exercises.length)
  }

  const currentExercise = exercises[currentSlide]

  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case "Легкий":
        return "bg-gradient-to-r from-emerald-400 to-green-500"
      case "Средний":
        return "bg-gradient-to-r from-amber-400 to-orange-500"
      case "Сложный":
        return "bg-gradient-to-r from-red-400 to-pink-500"
      default:
        return "bg-gradient-to-r from-gray-400 to-gray-500"
    }
  }

  return (




    <div className="max-w-4xl mx-auto overflow-y-auto scrollable-content">
      {/* Header */}
      <div className="fixed top-0 left-0 right-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] p-4 z-50 shadow-lg rounded-b-3xl">
        <div className="absolute inset-0 bg-gradient-to-r from-black/10 to-transparent"></div>
        <div className="relative px-4 sm:px-6 py-4 max-w-4xl mx-auto ">
                <p className="text-cyan-100 text-sm font-medium">Курс упражнений</p>
                <h1 className="text-xl sm:text-2xl font-semibold text-white">Восстановление колена</h1>
        </div>
      </div>



      {/* Exercise Slider */}
      <div className="px-4 sm:px-6 mt-34 mb-10">
        <div className="glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl">
          {/* Exercise Image */}
          <div className="relative">
            <img
              src={currentExercise.image || "/placeholder.svg"}
              alt={currentExercise.name}
              className="w-full h-56 sm:h-64 object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-black/10"></div>

            {/* Difficulty Badge */}
            <div className="absolute top-4 right-4">
              <div
                className={`px-4 py-2 rounded-full text-xs font-bold text-white shadow-lg backdrop-blur-sm ${getDifficultyColor(currentExercise.difficulty)}`}
              >
                {currentExercise.difficulty}
              </div>
            </div>

            {/* Navigation arrows */}
            <button
              onClick={prevSlide}
              className="absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/20 backdrop-blur-xl rounded-full flex items-center justify-center text-white hover:bg-black/30 transition-all duration-300 shadow-lg border border-white/20"
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <button
              onClick={nextSlide}
              className="absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/20 backdrop-blur-xl rounded-full flex items-center justify-center text-white hover:bg-black/30 transition-all duration-300 shadow-lg border border-white/20"
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </button>

            {/* Play Button Overlay */}
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="w-20 h-20 bg-white/90 backdrop-blur-xl rounded-full flex items-center justify-center shadow-2xl hover:bg-white transition-all duration-300 transform hover:scale-110 border border-white/50">
                <svg className="w-8 h-8 text-gray-800 ml-1" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z" />
                </svg>
              </div>
            </div>
          </div>

          {/* Exercise Info */}
          <div className="p-6">
            <h3 className="text-xl font-semibold text-gray-600 mb-3">{currentExercise.name}</h3>

           

            <button
              onClick={() => history.push(`/exercise/${currentExercise.id}`)}
              className="w-full bg-gradient-to-r bg-orange-400 text-white font-semibold py-4 px-6 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 shadow-lg backdrop-blur-sm"
            >
              Начать упражнение
            </button>
          </div>
        </div>

        {/* Slide indicators */}
        <div className="flex justify-center mt-6 space-x-2">
          {exercises.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentSlide(index)}
              className={`h-2 rounded-full transition-all duration-300 ${
                index === currentSlide
                  ? "bg-gradient-to-r from-[#2BACBE] to-cyan-600 w-8 shadow-lg"
                  : "bg-gray-300 w-2 hover:bg-gray-400"
              }`}
            />
          ))}
        </div>
      </div>

      {/* Exercise List */}
      <div className="px-4 sm:px-6 mb-50">
        <h2 className="text-xl sm:text-2xl font-semibold text-gray-800 mb-6">Все упражнения курса</h2>
        <div className="space-y-4">
          {exercises.map((exercise, index) => (
            <div
              key={exercise.id}
              onClick={() => history.push(`/exercise/${exercise.id}`)}
              className={`glass-morphism rounded-2xl p-4 sm:p-6 border border-white/50 shadow-lg cursor-pointer transition-all duration-300 hover:shadow-2xl transform hover:scale-[1.02] backdrop-blur-xl ${
                index === currentSlide ? "ring-2 ring-[#2BACBE] bg-cyan-50/20" : ""
              }`}
            >
              <div className="flex items-center space-x-4">
                <div className="relative">
                  <div className="w-14 h-14 sm:w-16 sm:h-16 border-2 border-cyan-500 rounded-2xl flex items-center justify-center text-cyan-500 font-semibold text-lg sm:text-xl shadow-xl">
                    {index + 1}
                  </div>

                </div>
                <div className="flex-1 min-w-0">
                  <h3 className="font-semibold text-gray-800 text-lg sm:text-xl truncate">{exercise.name}</h3>
                  <p className="text-gray-600 text-sm mb-2 line-clamp-2">{exercise.description}</p>

                </div>
                <div className="text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <BottomNavigation />
    </div>
  )
}

export default CourseExercises