"use client"

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

import confetti from "../assets/Confetti.gif"

import { getRouteCourses } from "../shared/consts/router"
import { getRouteHome } from "../shared/consts/router"

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

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

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

  return (



    <div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] flex items-center justify-center">
      {/* Basket Animation */}

<div className="absolute top-0">
  
  <img
    src={confetti}
    className="w-full h-120 object-cover"
    alt="Описание GIF"
  />
</div>


<div className="min-h-screen p-4 relative overflow-hidden max-w-4xl mx-auto">
      <div className="absolute inset-0 flex items-start justify-center top-30">
        <svg xmlns="http://www.w3.org/2000/svg" width="218" height="159" viewBox="0 0 218 159" fill="none">
          <path d="M197.875 0.625H20.125C14.887 0.625 9.86348 2.7058 6.15964 6.40964C2.4558 10.1135 0.375 15.137 0.375 20.375V138.875C0.375 144.113 2.4558 149.137 6.15964 152.84C9.86348 156.544 14.887 158.625 20.125 158.625H39.875V119.125H178.125V158.625H197.875C203.113 158.625 208.137 156.544 211.84 152.84C215.544 149.137 217.625 144.113 217.625 138.875V20.375C217.625 15.137 215.544 10.1135 211.84 6.40964C208.137 2.7058 203.113 0.625 197.875 0.625ZM158.375 99.375H138.625V69.75H79.375V99.375H59.625V69.75C59.625 64.512 61.7058 59.4885 65.4096 55.7846C69.1135 52.0808 74.137 50 79.375 50H138.625C143.863 50 148.887 52.0808 152.59 55.7846C156.294 59.4885 158.375 64.512 158.375 69.75V99.375Z" fill="#1A6974" />
        </svg>

      </div>
<div
  className={`absolute inset-0 flex items-start justify-center top-50 transition-all duration-500 delay-100 ${
animationPhase >= 2 ? "scale-80" : "scale-100"} ${animationPhase >= 3 ? "-translate-y-10 scale-0" : "opacity-100 translate-y-0 scale-80"}`}
>
        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="70" viewBox="0 0 99 70" fill="none">
          <path d="M94.25 4.5V33.9307L86.6484 60.5352L72.3066 46.1934L69.125 43.0107L65.9434 46.1934L49.375 62.7617L32.8066 46.1934L29.625 43.0107L26.4434 46.1934L12.1006 60.5352L4.5 33.9307V4.5H94.25Z" stroke="#1A6974" stroke-width="9" />
        </svg>
      </div>

      {/* Main Content */}
      <div className="text-center z-10 max-w-md">
        {/* Ball */}
        <div
          className={`transition-all duration-500 delay-100 opacity-0 ${animationPhase >= 1 ? "opacity-100 -translate-y-1/2 scale-15 translate-x-5" : "opacity-0 translate-y-60 scale-80 -translate-x-60"
            } ${animationPhase >= 2 ? "opacity-100 translate-y-400 scale-15" : "opacity-100 -translate-y-100 scale-15"} ` }
        >

          <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 50 50" fill="none">
            <rect width="50" height="50" rx="25" fill="#FF8D28" />
          </svg>

        </div>

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

        </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(getRouteCourses())}
            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(getRouteHome())}
            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>
    </div >
  )
}

export default CourseComplete