"use client"

import { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";

import { CalendarIcon } from "../components/icons/CalendarIcon";
import { DumbbellIcon } from "../components/icons/DumbbellIcon";


import HeaderNav from "../components/HeaderNav";
import BottomNavigation from "../components/BottomNavigation";
import CircularProgressDisplay from "../components/CircularProgressDisplay";


import { StatCardHome } from "../components/cards/StatCardHome";
import { WorkoutCardHome } from "../components/cards/WorkoutCardHome";

import { getRouteExercise } from "../shared/consts/router";
import { getRouteCourses } from "../shared/consts/router";
import { getRouteCourseExercises } from "../shared/consts/router";

export default function Home() {
  const history = useHistory()
  const [currentDate, setCurrentDate] = useState("")

  useEffect(() => {
    setCurrentDate(
      new Date().toLocaleDateString("ru-RU", {
        year: "numeric",
        month: "long",
        day: "numeric",
      }),
    )
  }, [])

  const courses = [
    {
      id: 1,
      name: "Восстановление колена",
      progress: 75,
      color: "from-[#2BACBE] to-cyan-600",
      exercises: 12,
      nextExercise: "Подъемы ног лежа",
    },
    {
      id: 2,
      name: "Укрепление спины",
      progress: 45,
      color: "from-emerald-500 to-green-600",
      exercises: 8,
      nextExercise: "Планка",
    },
    {
      id: 3,
      name: "Реабилитация плеча",
      progress: 90,
      color: "from-purple-500 to-pink-600",
      exercises: 10,
      nextExercise: "Вращения плечами",
    },
  ]

  // Calculate overall progress, total courses, total exercises
  const totalCourses = courses.length
  const totalExercises = courses.reduce((sum, course) => sum + course.exercises, 0)
  const overallProgress = Math.round(courses.reduce((sum, course) => sum + course.progress, 0) / totalCourses)

  const handleWorkoutClick = () => {
    history.push(getRouteExercise())
  }

  const handleBackClick = () => {
    history.goBack()
  }

  const handleCoursesClick = () => {
    history.push(getRouteCourses())
  }

  const handleExercisesClick = () => {
    history.push(getRouteCourseExercises(":id"))
  }

  return (
    <div className="bg-gray-50 w-full h-full overflow-auto">
      <div className="my-36 min-h-screen max-w-4xl mx-auto">
        <HeaderNav item="Прогресс" text={currentDate} />

        <div className="bg-white rounded-3xl p-6 shadow-lg mx-4 sm:mx-6">
          <div className="flex content-center items-center justify-between ">

            
          </div>
          <div className="flex justify-between items-center">
            <div className="flex flex-col gap-6">
              <div className="text-left">
                <div className="text-sm sm:text-base text-gray-800">Все курсы</div>
                <div className="text-2xl font-bold text-cyan-500">{totalCourses}/1</div>
              </div>
              <div className="text-left">
                <div className="text-sm sm:text-base text-gray-800">Все упражнения</div>
                <div className="text-2xl font-bold text-orange-400">{totalExercises}/4</div>
              </div>
            </div>
            <div className="flex justify-center items-center gap-8">
              <CircularProgressDisplay
                overallProgress={overallProgress}
                totalCourses={totalCourses}
                totalExercises={totalExercises}
              />
            </div>
          </div>
        </div>

        <div className="px-4 sm:px-6 space-y-6">
          {/* Current Exercise */}
          <WorkoutCardHome onBackClick={handleBackClick} onCardClick={handleWorkoutClick} />

          {/* Quick Stats (Total Exercises & Total Courses) */}
          <div className="grid grid-cols-2 gap-4 md:gap-5">
            <StatCardHome
              title="Курсы"
              subtitle="назначенные"
              icon={CalendarIcon}
              fill="#2BACBE"
              onClick={handleCoursesClick}
            />
            <StatCardHome
              title="Упражнения"
              subtitle="текущего курса"
              icon={DumbbellIcon}
              fill="#FF8D28"
              onClick={handleExercisesClick}
            />
          </div>
        </div>

        <BottomNavigation />
      </div>
    </div>
  )
}