"use client"

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

const Home: React.FC = () => {
  const history = useHistory()
  const currentDate = new Date().toLocaleDateString("ru-RU", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  })

  const courses = [
    { id: 1, name: "Восстановление колена", progress: 75, color: "from-[#2BACBE] to-[#2BACBE]/80" },
    { id: 2, name: "Укрепление спины", progress: 45, color: "from-[#5F5C5C] to-[#5F5C5C]/80" },
    { id: 3, name: "Реабилитация плеча", progress: 90, color: "from-[#2BACBE]/80 to-[#5F5C5C]" },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-20 overflow-y-auto max-w-4xl mx-auto">


      {/* Analytics Cards */}
      <div className="px-6 mb-8">
        <div className="grid grid-cols-2 gap-4">
          <div className="bg-white/30 backdrop-blur-2xl rounded-2xl p-5 border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105">
            <div className="text-center">
              <div className="text-3xl font-black text-[#2BACBE] mb-1">12</div>
              <div className="text-sm text-[#5F5C5C] font-semibold">Дней подряд</div>
            </div>
          </div>
          <div className="bg-white/30 backdrop-blur-2xl rounded-2xl p-5 border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105">
            <div className="text-center">
              <div className="text-3xl font-black text-[#2BACBE] mb-1">85%</div>
              <div className="text-sm text-[#5F5C5C] font-semibold">Прогресс</div>
            </div>
          </div>
        </div>
      </div>

      {/* Current Exercise */}
      <div className="px-6 mb-8">
        <h2 className="text-xl font-black text-[#5F5C5C] mb-4">Текущее упражнение</h2>
        <div className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300">
          <div className="flex items-center space-x-5">
            <div className="w-20 h-20 bg-gradient-to-br from-[#2BACBE] to-[#2BACBE]/80 rounded-2xl flex items-center justify-center shadow-lg">
              <span className="text-3xl filter drop-shadow-sm">🦵</span>
            </div>
            <div className="flex-1">
              <h3 className="font-black text-[#5F5C5C] text-lg mb-1">Подъемы ног</h3>
              <p className="text-sm text-[#5F5C5C]/70 font-medium mb-3">Восстановление колена • 3 подхода</p>
              <div className="bg-white/50 rounded-full h-3 overflow-hidden">
                <div
                  className="bg-gradient-to-r from-[#2BACBE] to-[#2BACBE]/80 h-3 rounded-full shadow-sm transition-all duration-500"
                  style={{ width: "60%" }}
                ></div>
              </div>
            </div>
            <button
              onClick={() => history.push("/exercise/1")}
              className="bg-gradient-to-r from-[#2BACBE] to-[#2BACBE]/80 text-white px-6 py-3 rounded-2xl font-bold hover:shadow-xl transition-all duration-300 transform hover:scale-105 backdrop-blur-sm"
            >
              Продолжить
            </button>
          </div>
        </div>
      </div>

      {/* Courses */}
      <div className="px-6 mb-8">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-black text-[#5F5C5C]">Мои курсы</h2>
          <button onClick={() => history.push("/courses")} className="text-[#2BACBE] text-sm font-bold hover:underline">
            Все курсы
          </button>
        </div>
        <div className="space-y-4">
          {courses.map((course) => (
            <div
              key={course.id}
              onClick={() => history.push(`/course/${course.id}/exercises`)}
              className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]"
            >
              <div className="flex items-center space-x-5">
                <div
                  className={`w-16 h-16 bg-gradient-to-br ${course.color} rounded-2xl flex items-center justify-center shadow-lg`}
                >
                  <span className="text-2xl text-white filter drop-shadow-sm">💪</span>
                </div>
                <div className="flex-1">
                  <h3 className="font-black text-[#5F5C5C] text-lg mb-2">{course.name}</h3>
                  <div className="bg-white/50 rounded-full h-3 mb-2 overflow-hidden">
                    <div
                      className={`bg-gradient-to-r ${course.color} h-3 rounded-full transition-all duration-700 shadow-sm`}
                      style={{ width: `${course.progress}%` }}
                    ></div>
                  </div>
                  <p className="text-sm text-[#5F5C5C]/70 font-semibold">{course.progress}% завершено</p>
                </div>
                <div className="text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1">
                  <span className="text-2xl font-bold">→</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <BottomNavigation />
    </div>
  )
}

export default Home