'use client'

import { useEffect, useState } from 'react'
import Image from "next/image"

import Logo from "@/img/KSALogo-1.png"

export function LoadingScreen() {
    const [progress, setProgress] = useState(0)
    const [isVisible, setIsVisible] = useState(true)

    useEffect(() => {
        const interval = setInterval(() => {
            setProgress((prev) => {
                if (prev >= 95) return prev
                return Math.min(prev + Math.random() * 30, 100)
            })
        }, 500)

        let hideTimeout: NodeJS.Timeout

        const timeout = setTimeout(() => {
            setProgress(100)
            hideTimeout = setTimeout(() => setIsVisible(false), 500)
        }, 10000)

        return () => {
            clearInterval(interval)
            clearTimeout(timeout)
            clearTimeout(hideTimeout)
        }
    }, [])

    if (!isVisible) return null

    return (
        <div style={{backgroundColor: '#1B3261'}} className="fixed inset-0 flex items-center justify-center bg--blue-900 z-50 transition-opacity duration-500">
            <div className="flex flex-col items-center justify-center gap-8">
                <div className="text-center">

                    <center>
                        <Image
                            src={Logo}
                            alt="Kigali Safety Academy"
                            width={100}
                            height={100}
                            className="rounded-2xl shadow-2xl"
                        />
                    </center>

                    <h1 className="text-2xl mt-4 font-bold text-white mb-4">
                        KIGALI SAFETY ACADEMY
                    </h1>
                    <p className="text-xl text-white font-semibold">
                        Empowering Safe Workforce
                    </p>
                </div>

                <div className="w-96 space-y-6">
                    <div className="flex items-center justify-between">
                        <p className="text-white text-sm tracking-wide">Welcome Back</p>
                        <p className="text-white font-bold text-2xl">
                            {Math.round(progress)}%
                        </p>
                    </div>

                    <div className="w-full h-2 bg-gray-700 rounded-full overflow-hidden">
                        <div
                            className="h-full bg-gradient-to-r from-green-500 via-blue-500 to-green-500 transition-all duration-300"
                            style={{ width: `${progress}%` }}
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}