import { useEffect, useState, useRef } from 'react';
import gsap from 'gsap';

export default function LoadingScreen() {
  const [isLoading, setIsLoading] = useState(true);
  const containerRef = useRef<HTMLDivElement>(null);
  const progressRef = useRef<HTMLDivElement>(null);
  const textRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Simulate loading progress
    const tl = gsap.timeline({
      onComplete: () => {
        // Exit animation
        gsap.to(containerRef.current, {
          scale: 2,
          opacity: 0,
          duration: 0.8,
          ease: 'power2.inOut',
          onComplete: () => setIsLoading(false),
        });
      },
    });

    // Reduced motion: skip the artificial loading animation faster
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    // Progress animation
    tl.to(progressRef.current, {
      width: '100%',
      duration: prefersReducedMotion ? 0.2 : 0.6,
      ease: 'power2.inOut',
    });

    // Text scramble effect
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    const originalText = 'MFA TOOLS PRO';
    let iteration = 0;

    const interval = setInterval(() => {
      if (textRef.current) {
        textRef.current.innerText = originalText
          .split('')
          .map((_, index) => {
            if (index < iteration) {
              return originalText[index];
            }
            return chars[Math.floor(Math.random() * chars.length)];
          })
          .join('');
      }

      if (iteration >= originalText.length) {
        clearInterval(interval);
      }

      iteration += 1 / 3;
    }, 30);

    return () => {
      clearInterval(interval);
      tl.kill();
    };
  }, []);

  if (!isLoading) return null;

  return (
    <div
      ref={containerRef}
      className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#050505]"
    >
      {/* Logo Text */}
      <div
        ref={textRef}
        className="mb-8 font-['Orbitron'] text-4xl font-bold tracking-wider text-[#CCFF00] md:text-6xl"
        role="status"
        aria-live="polite"
      >
        MFA TOOLS PRO
      </div>

      {/* Progress Bar Container */}
      <div className="w-64 overflow-hidden rounded-full bg-white/10 md:w-96">
        <div
          ref={progressRef}
          className="h-2 w-0 rounded-full bg-gradient-to-r from-[#CCFF00] to-[#00FFFF]"
          style={{
            boxShadow: '0 0 20px #CCFF00',
          }}
        />
      </div>

      {/* Loading Text */}
      <div className="mt-4 font-['Rajdhani'] text-sm tracking-widest text-white/50">
        INITIALIZING...
      </div>

      {/* Decorative Elements */}
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-1/4 left-1/4 w-32 h-32 border border-[#CCFF00]/20 rounded-full animate-pulse" />
        <div className="absolute bottom-1/4 right-1/4 w-48 h-48 border border-[#00FFFF]/20 rounded-full animate-pulse" style={{ animationDelay: '0.5s' }} />
      </div>
    </div>
  );
}