import { useState, useCallback } from 'react';
import Scene from '../components/3d/Scene';
import confetti from 'canvas-confetti';

export default function Inauguration() {
  const [isCelebrating, setIsCelebrating] = useState(false);
  const [showWelcome, setShowWelcome] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  const triggerConfetti = useCallback(() => {
    const duration = 5 * 1000;
    const animationEnd = Date.now() + duration;
    const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

    const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;

    const interval: any = setInterval(function() {
      const timeLeft = animationEnd - Date.now();

      if (timeLeft <= 0) {
        return clearInterval(interval);
      }

      const particleCount = 50 * (timeLeft / duration);
      
      const colors = ['#2E90FA', '#53B1FD', '#84CAFF', '#1570EF', '#175CD3'];
      
      confetti({
        ...defaults, 
        particleCount,
        origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
        colors: colors,
        shapes: ['circle', 'square'],
        scalar: randomInRange(0.8, 1.5)
      });
      confetti({
        ...defaults, 
        particleCount,
        origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
        colors: colors,
        shapes: ['circle', 'square'],
        scalar: randomInRange(0.8, 1.5)
      });
    }, 250);
  }, []);

  const handleKickstart = () => {
    setIsCelebrating(true);
    triggerConfetti();
    
    setTimeout(() => {
      setShowWelcome(true);
    }, 2000);
  };

  return (
    <div className="relative w-full h-screen overflow-hidden">
      {/* Animated Gradient Background */}
      <div 
        className="absolute inset-0 animate-gradient-xy"
        style={{
          background: 'linear-gradient(135deg, #2E90FA 0%, #1570EF 25%, #53B1FD 50%, #84CAFF 75%, #2E90FA 100%)',
          backgroundSize: '400% 400%',
          animation: 'gradientShift 15s ease infinite'
        }}
      />

      {/* Animated Mesh Gradient Overlay */}
      <div className="absolute inset-0 opacity-60">
        <div 
          className="absolute inset-0 animate-pulse"
          style={{
            background: 'radial-gradient(circle at 20% 80%, #84CAFF 0%, transparent 50%), radial-gradient(circle at 80% 20%, #53B1FD 0%, transparent 50%), radial-gradient(circle at 40% 40%, #2E90FA 0%, transparent 40%)',
            filter: 'blur(60px)'
          }}
        />
      </div>

      {/* Floating Bubbles */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        {[...Array(20)].map((_, i) => (
          <div
            key={i}
            className="absolute rounded-full"
            style={{
              width: `${Math.random() * 100 + 50}px`,
              height: `${Math.random() * 100 + 50}px`,
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              background: `radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)`,
              animation: `floatBubble ${Math.random() * 10 + 10}s ease-in-out infinite`,
              animationDelay: `${Math.random() * 5}s`,
            }}
          />
        ))}
      </div>

      {/* 3D Scene */}
      <div className="absolute inset-0">
        <Scene isCelebrating={isCelebrating} />
      </div>

      {/* Main Content Container */}
      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
        
        {/* Logo Section */}
        <div 
          className={`text-center mb-8 transition-all duration-1000 ease-out ${showWelcome ? 'opacity-0 -translate-y-12' : 'opacity-100 translate-y-0'}`}
        >
          {/* Logo Container with Glassmorphism */}
          <div className="relative inline-block">
            {/* Glow Effect Behind Logo */}
            <div className="absolute -inset-4 bg-gradient-to-r from-[#2E90FA] to-[#84CAFF] rounded-3xl blur-2xl opacity-40 animate-pulse" />
            
            {/* Logo Text */}
            <div className="relative">
              <h1 className="text-8xl font-black tracking-tight">
                <span 
                  className="bg-clip-text text-transparent animate-shimmer"
                  style={{
                    backgroundImage: 'linear-gradient(90deg, #FFFFFF 0%, #E0F2FE 25%, #FFFFFF 50%, #E0F2FE 75%, #FFFFFF 100%)',
                    backgroundSize: '200% auto',
                    textShadow: '0 0 40px rgba(46,144,250,0.5)',
                    animation: 'shimmer 3s linear infinite'
                  }}
                >
                  FRESHYO
                </span>
              </h1>
              
              {/* Tagline */}
              <p className="text-2xl font-light text-white/90 mt-3 tracking-widest uppercase">
                Freshness Delivered
              </p>
            </div>
          </div>
        </div>

        {/* Center Content - CTA or Welcome Message */}
        <div className="relative z-10">
          {!showWelcome ? (
            /* CTA Button */
            <div 
              className={`transition-all duration-700 ease-out ${isCelebrating ? 'opacity-0 scale-90' : 'opacity-100 scale-100'}`}
              onMouseEnter={() => setIsHovered(true)}
              onMouseLeave={() => setIsHovered(false)}
            >
              <button
                onClick={handleKickstart}
                className="pointer-events-auto group relative"
              >
                {/* Outer Glow Rings */}
                <div className="absolute -inset-8 rounded-full bg-gradient-to-r from-[#1570EF] via-[#53B1FD] to-[#1570EF] opacity-30 blur-2xl group-hover:opacity-50 group-hover:blur-3xl transition-all duration-500 animate-pulse" />
                
                {/* Inner Glow Ring */}
                <div className="absolute -inset-4 rounded-full border-2 border-white/20 group-hover:border-white/40 transition-all duration-500" />
                
                {/* Button Container */}
                <div className="relative overflow-hidden rounded-full bg-gradient-to-r from-[#1570EF] to-[#53B1FD] p-[2px]">
                  <div className="relative rounded-full bg-gradient-to-r from-[#1570EF] to-[#53B1FD] px-12 py-6">
                    {/* Animated Background on Hover */}
                    <div 
                      className="absolute inset-0 bg-gradient-to-r from-[#2E90FA] via-[#53B1FD] to-[#2E90FA] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                      style={{ backgroundSize: '200% auto' }}
                    />
                    
                    {/* Button Content */}
                    <div className="relative flex items-center gap-4">
                      {/* Sparkle Icon */}
                      <svg 
                        className={`w-8 h-8 text-white transition-transform duration-300 ${isHovered ? 'rotate-12 scale-110' : ''}`}
                        fill="currentColor" 
                        viewBox="0 0 20 20"
                      >
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      
                      <span className="text-3xl font-bold text-white tracking-wide">
                        Launch Freshyo
                      </span>
                      
                      {/* Rocket Icon */}
                      <svg 
                        className={`w-8 h-8 text-white transition-all duration-300 ${isHovered ? 'translate-x-1 -translate-y-1' : ''}`}
                        fill="none" 
                        stroke="currentColor" 
                        viewBox="0 0 24 24"
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16 8l-6 6" />
                      </svg>
                    </div>
                  </div>
                </div>

                {/* Floating Particles Around Button */}
                <div className="absolute -top-2 -right-2 w-4 h-4 bg-white/60 rounded-full animate-float-fast" />
                <div className="absolute -bottom-2 -left-2 w-3 h-3 bg-[#84CAFF] rounded-full animate-float-delayed-fast" />
              </button>
              
              {/* Subtext under button */}
              <p className="text-white/60 text-sm mt-6 text-center font-medium tracking-wide">
                Click to celebrate our launch in Mahabubnagar
              </p>
            </div>
          ) : (
            /* Welcome Message */
            <div className="text-center animate-fade-in-up">
              <div className="relative inline-block">
                {/* Background glow */}
                <div className="absolute -inset-8 bg-gradient-to-r from-[#2E90FA] to-[#84CAFF] rounded-full blur-3xl opacity-40" />
                
                <div className="relative bg-white/10 backdrop-blur-lg rounded-3xl px-16 py-12 border border-white/20 shadow-2xl">
                  {/* Success Icon */}
                  <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-r from-[#2E90FA] to-[#53B1FD] flex items-center justify-center shadow-lg">
                    <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                    </svg>
                  </div>
                  
                  <h2 className="text-5xl font-black text-white mb-4">
                    Welcome to Freshyo!
                  </h2>
                  
                  <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-white/90">
                    <span>We're now live in</span>
                    <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#FFD700] to-[#FFA500] font-black">
                      Mahabubnagar
                    </span>
                  </div>
                  
                  {/* Decorative line */}
                  <div className="mt-8 flex items-center justify-center gap-4">
                    <div className="h-0.5 w-16 bg-gradient-to-r from-transparent to-white/40" />
                    <div className="w-2 h-2 rounded-full bg-white/60" />
                    <div className="h-0.5 w-16 bg-gradient-to-l from-transparent to-white/40" />
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Footer Info */}
        <div 
          className={`absolute bottom-12 left-0 right-0 text-center transition-all duration-1000 ${showWelcome ? 'opacity-0 translate-y-8' : 'opacity-100 translate-y-0'}`}
        >
          <div className="inline-flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-full px-6 py-3 border border-white/10">
            <div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
            <p className="text-white/80 text-sm font-medium">
              Bringing fresh groceries to your doorstep
            </p>
          </div>
        </div>
      </div>

      {/* Side Decorative Elements */}
      <div className="absolute left-8 top-1/2 -translate-y-1/2 pointer-events-none">
        <div className="flex flex-col gap-4">
          {[...Array(3)].map((_, i) => (
            <div 
              key={i}
              className="w-1 h-12 rounded-full bg-gradient-to-b from-white/40 to-transparent"
              style={{ animationDelay: `${i * 0.2}s` }}
            />
          ))}
        </div>
      </div>

      <div className="absolute right-8 top-1/2 -translate-y-1/2 pointer-events-none">
        <div className="flex flex-col gap-4">
          {[...Array(3)].map((_, i) => (
            <div 
              key={i}
              className="w-1 h-12 rounded-full bg-gradient-to-b from-white/40 to-transparent"
              style={{ animationDelay: `${i * 0.2}s` }}
            />
          ))}
        </div>
      </div>

      {/* Custom Styles */}
      <style>{`
        @keyframes gradientShift {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }
        
        @keyframes shimmer {
          0% { background-position: -200% center; }
          100% { background-position: 200% center; }
        }
        
        @keyframes floatBubble {
          0%, 100% { 
            transform: translateY(0) translateX(0) scale(1);
            opacity: 0.3;
          }
          25% {
            transform: translateY(-30px) translateX(10px) scale(1.1);
            opacity: 0.5;
          }
          50% { 
            transform: translateY(-20px) translateX(-10px) scale(0.9);
            opacity: 0.3;
          }
          75% {
            transform: translateY(-40px) translateX(5px) scale(1.05);
            opacity: 0.4;
          }
        }
        
        @keyframes float-fast {
          0%, 100% { transform: translateY(0) translateX(0); }
          50% { transform: translateY(-10px) translateX(5px); }
        }
        
        @keyframes float-delayed-fast {
          0%, 100% { transform: translateY(0) translateX(0); }
          50% { transform: translateY(8px) translateX(-5px); }
        }
        
        .animate-float-fast {
          animation: float-fast 2s ease-in-out infinite;
        }
        
        .animate-float-delayed-fast {
          animation: float-delayed-fast 2.5s ease-in-out infinite;
          animation-delay: 0.5s;
        }
        
        .animate-fade-in-up {
          animation: fadeInUp 0.8s ease-out forwards;
        }
        
        @keyframes fadeInUp {
          0% {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
          }
          100% {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }
      `}</style>
    </div>
  );
}