Rehab_React_Vite/src/pages/CourseComplete.tsx

"use client"

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

const CourseComplete: React.FC = () => {
  const history = useHistory()
  const [animationPhase, setAnimationPhase] = useState(0)

  useEffect(() => {
    const timer1 = setTimeout(() => setAnimationPhase(1), 500)
    const timer2 = setTimeout(() => setAnimationPhase(2), 1500)
    const timer3 = setTimeout(() => setAnimationPhase(3), 2500)

    return () => {
      clearTimeout(timer1)
      clearTimeout(timer2)
      clearTimeout(timer3)
    }
  }, [])

  return (
    <div className="min-h-screen bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex items-center justify-center p-4 relative overflow-hidden">
      {/* Background Animation */}
      <div className="absolute inset-0">
        <div className="absolute top-20 left-10 w-20 h-20 bg-white/10 rounded-full animate-pulse"></div>
        <div className="absolute bottom-32 right-16 w-16 h-16 bg-white/10 rounded-full animate-bounce"></div>
        <div className="absolute top-1/2 left-1/4 w-12 h-12 bg-white/10 rounded-full animate-ping"></div>
      </div>

      {/* Main Content */}
      <div className="text-center z-10 max-w-md">
        {/* Volleyball Animation */}
        <div className="relative mb-8 h-40">
          {/* Net */}
          <div
            className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 transition-all duration-1000 ${
              animationPhase >= 1 ? "opacity-100" : "opacity-0"
            }`}
          >
            <div className="w-32 h-20 border-2 border-white/60 border-b-0">
              <div className="grid grid-cols-8 h-full">
                {Array.from({ length: 8 }).map((_, i) => (
                  <div key={i} className="border-r border-white/40 last:border-r-0"></div>
                ))}
              </div>
              <div className="grid grid-rows-4 h-full absolute inset-0">
                {Array.from({ length: 4 }).map((_, i) => (
                  <div key={i} className="border-b border-white/40 last:border-b-0"></div>
                ))}
              </div>
            </div>
          </div>

          {/* Volleyball */}
          <div
            className={`absolute transition-all duration-2000 ${
              animationPhase >= 2
                ? "bottom-8 left-1/2 transform -translate-x-1/2 scale-75"
                : "bottom-32 left-8 scale-100"
            }`}
          >
            <div
              className={`w-16 h-16 rounded-full bg-white flex items-center justify-center text-2xl shadow-lg ${
                animationPhase >= 2 ? "animate-bounce" : ""
              }`}
            >
              🏐
            </div>
          </div>

          {/* Success particles */}
          {animationPhase >= 3 && (
            <div className="absolute inset-0">
              <div className="absolute top-4 left-8 animate-ping">⭐</div>
              <div className="absolute top-8 right-12 animate-pulse">✨</div>
              <div className="absolute bottom-16 left-16 animate-bounce">🎉</div>
              <div className="absolute bottom-12 right-8 animate-ping">🏆</div>
            </div>
          )}
        </div>

        {/* Congratulations */}
        <div
          className={`transition-all duration-1000 delay-500 ${
            animationPhase >= 2 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
          }`}
        >
          <h1 className="text-4xl font-bold text-white mb-4">Поздравляем! 🎉</h1>
          <p className="text-white/90 text-lg mb-2">Вы успешно завершили курс</p>
          <p className="text-white/80 text-xl font-semibold mb-6">"Восстановление колена"</p>
        </div>

        {/* Stats */}
        <div
          className={`bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20 mb-8 transition-all duration-1000 delay-1000 ${
            animationPhase >= 3 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
          }`}
        >
          <div className="grid grid-cols-3 gap-4 text-center">
            <div>
              <div className="text-2xl font-bold text-white">12</div>
              <div className="text-white/70 text-sm">Упражнений</div>
            </div>
            <div>
              <div className="text-2xl font-bold text-white">4</div>
              <div className="text-white/70 text-sm">Недели</div>
            </div>
            <div>
              <div className="text-2xl font-bold text-white">100%</div>
              <div className="text-white/70 text-sm">Завершено</div>
            </div>
          </div>
        </div>

        {/* Action Buttons */}
        <div
          className={`space-y-4 transition-all duration-1000 delay-1500 ${
            animationPhase >= 3 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
          }`}
        >
          <button
            onClick={() => history.push("/courses")}
            className="w-full bg-white/20 backdrop-blur-lg hover:bg-white/30 text-white font-semibold py-3 px-6 rounded-xl border border-white/30 transition-all duration-200 transform hover:scale-105"
          >
            Выбрать новый курс
          </button>
          <button
            onClick={() => history.push("/home")}
            className="w-full bg-transparent border-2 border-white/50 hover:bg-white/10 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200"
          >
            На главную
          </button>
        </div>
      </div>
    </div>
  )
}

export default CourseComplete