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 = 8 * 1000;
    const animationEnd = Date.now() + duration;

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

    // Cracker explosion function - shoots upward then falls
    const fireCracker = (x: number, delay: number, colors: string[]) => {
      setTimeout(() => {
        // Initial burst - shoots upward like a firecracker
        confetti({
          particleCount: 120,
          spread: 360,
          origin: { x, y: 0.9 },
          colors: colors,
          shapes: ['circle', 'square', 'star'],
          scalar: randomInRange(1.2, 2.0),
          startVelocity: randomInRange(45, 65),
          gravity: 1.2,
          ticks: 150,
          drift: randomInRange(-1, 1),
          flat: false
        });

        // Secondary burst - shoots higher with different colors
        setTimeout(() => {
          confetti({
            particleCount: 80,
            spread: 360,
            origin: { x, y: 0.8 },
            colors: colors.slice().reverse(),
            shapes: ['circle', 'square'],
            scalar: randomInRange(1.0, 1.8),
            startVelocity: randomInRange(35, 55),
            gravity: 1.0,
            ticks: 120,
            drift: randomInRange(-0.5, 0.5),
            flat: false
          });
        }, 150);
      }, delay);
    };

    // Fire multiple crackers in sequence
    const crackerColors = [
      ['#FF0000', '#FFD700', '#FF6B6B', '#FFA500'], // Red/Gold
      ['#2E90FA', '#53B1FD', '#84CAFF', '#FFFFFF'], // Blue/White
      ['#00FF00', '#32CD32', '#90EE90', '#98FB98'], // Green
      ['#FF1493', '#FF69B4', '#FFB6C1', '#FFC0CB'], // Pink
      ['#FFD700', '#FFA500', '#FF8C00', '#FFFF00'], // Gold/Orange
      ['#9400D3', '#8A2BE2', '#9370DB', '#BA55D3'], // Purple
    ];

    // Launch crackers from different positions
    fireCracker(0.15, 0, crackerColors[0]);
    fireCracker(0.35, 300, crackerColors[1]);
    fireCracker(0.5, 600, crackerColors[2]);
    fireCracker(0.65, 900, crackerColors[3]);
    fireCracker(0.85, 1200, crackerColors[4]);
    fireCracker(0.25, 1500, crackerColors[5]);
    fireCracker(0.75, 1800, crackerColors[0]);
    fireCracker(0.45, 2100, crackerColors[2]);

    // Continuous secondary bursts for the duration
    const interval: any = setInterval(function() {
      const timeLeft = animationEnd - Date.now();

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

      // Random mini-crackers
      const miniCrackerX = randomInRange(0.1, 0.9);
      const miniColors = crackerColors[Math.floor(Math.random() * crackerColors.length)];

      confetti({
        particleCount: 40,
        spread: 360,
        origin: { x: miniCrackerX, y: 0.85 },
        colors: miniColors,
        shapes: ['circle', 'square', 'star'],
        scalar: randomInRange(0.8, 1.4),
        startVelocity: randomInRange(30, 50),
        gravity: 1.1,
        ticks: 100,
        drift: randomInRange(-0.8, 0.8),
        flat: false
      });

      // Occasional sparkle burst
      if (Math.random() > 0.7) {
        confetti({
          particleCount: 30,
          spread: 360,
          origin: { x: randomInRange(0.2, 0.8), y: 0.9 },
          colors: ['#FFFFFF', '#FFD700', '#C0C0C0'],
          shapes: ['star', 'circle'],
          scalar: randomInRange(0.5, 1.0),
          startVelocity: randomInRange(25, 40),
          gravity: 0.8,
          ticks: 80,
          drift: 0,
          flat: false
        });
      }
    }, 400);
  }, []);

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

  return (
    <div className="relative w-full h-screen overflow-hidden">
      {/* Elegant Garden Background */}
      <div 
        className="absolute inset-0"
        style={{
          background: `
            linear-gradient(180deg, 
              #e8f5e9 0%, 
              #c8e6c9 20%, 
              #a5d6a7 40%, 
              #81c784 60%, 
              #66bb6a 80%, 
              #4caf50 100%
            )
          `,
        }}
      />

      {/* Soft Nature Mesh Overlay */}
      <div className="absolute inset-0 opacity-40">
        <div 
          className="absolute inset-0"
          style={{
            background: `
              radial-gradient(circle at 30% 70%, rgba(255,255,255,0.4) 0%, transparent 40%),
              radial-gradient(circle at 70% 30%, rgba(200,230,201,0.5) 0%, transparent 35%),
              radial-gradient(circle at 50% 50%, rgba(255,248,225,0.3) 0%, transparent 50%),
              radial-gradient(circle at 20% 20%, rgba(232,245,233,0.4) 0%, transparent 30%),
              radial-gradient(circle at 80% 80%, rgba(165,214,167,0.4) 0%, transparent 40%)
            `,
            filter: 'blur(80px)',
            animation: 'gardenPulse 20s ease-in-out infinite'
          }}
        />
      </div>

      {/* Floating Petals */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        {[...Array(15)].map((_, i) => (
          <div
            key={`petal-${i}`}
            className="absolute"
            style={{
              width: `${Math.random() * 20 + 15}px`,
              height: `${Math.random() * 20 + 15}px`,
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              background: i % 3 === 0 
                ? 'radial-gradient(ellipse at center, rgba(255,182,193,0.7) 0%, rgba(255,192,203,0.3) 70%, transparent 100%)'
                : i % 3 === 1
                  ? 'radial-gradient(ellipse at center, rgba(255,255,224,0.7) 0%, rgba(255,250,205,0.3) 70%, transparent 100%)'
                  : 'radial-gradient(ellipse at center, rgba(221,160,221,0.6) 0%, rgba(216,191,216,0.3) 70%, transparent 100%)',
              borderRadius: '50% 0 50% 0',
              transform: `rotate(${Math.random() * 360}deg)`,
              animation: `floatPetal ${Math.random() * 12 + 15}s ease-in-out infinite`,
              animationDelay: `${Math.random() * 8}s`,
            }}
          />
        ))}
        
        {/* Floating Leaves */}
        {[...Array(12)].map((_, i) => (
          <div
            key={`leaf-${i}`}
            className="absolute"
            style={{
              width: `${Math.random() * 25 + 20}px`,
              height: `${Math.random() * 15 + 12}px`,
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              background: 'linear-gradient(45deg, rgba(76,175,80,0.4) 0%, rgba(129,199,132,0.3) 50%, rgba(165,214,167,0.2) 100%)',
              borderRadius: '0 50% 0 50%',
              transform: `rotate(${Math.random() * 360}deg)`,
              animation: `floatLeaf ${Math.random() * 10 + 12}s ease-in-out infinite`,
              animationDelay: `${Math.random() * 6}s`,
            }}
          />
        ))}
      </div>

      {/* Elegant Light Rays */}
      <div className="absolute inset-0 pointer-events-none">
        {[...Array(5)].map((_, i) => (
          <div
            key={i}
            className="absolute"
            style={{
              width: '2px',
              height: '100%',
              left: `${20 + i * 15}%`,
              background: 'linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.1) 70%, transparent 100%)',
              transform: `rotate(${-15 + i * 5}deg)`,
              transformOrigin: 'top center',
              animation: `lightRay ${8 + i * 2}s ease-in-out infinite`,
              animationDelay: `${i * 1.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-[#66bb6a] to-[#a5d6a7] 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%, #E8F5E9 25%, #FFFFFF 50%, #E8F5E9 75%, #FFFFFF 100%)',
                    backgroundSize: '200% auto',
                    textShadow: '0 0 40px rgba(76,175,80,0.4)',
                    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-[#4caf50] to-[#81c784] p-[2px]">
                  <div className="relative rounded-full bg-gradient-to-r from-[#4caf50] to-[#81c784] px-12 py-6">
                    {/* Animated Background on Hover */}
                    <div 
                      className="absolute inset-0 bg-gradient-to-r from-[#43a047] via-[#66bb6a] to-[#43a047] 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-[#c8e6c9] 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 - elegant garden green */}
                <div className="absolute -inset-8 bg-gradient-to-r from-[#66bb6a] to-[#81c784] 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-[#4caf50] to-[#81c784] 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 gardenPulse {
          0%, 100% { 
            opacity: 0.4;
            transform: scale(1);
          }
          50% { 
            opacity: 0.6;
            transform: scale(1.02);
          }
        }
        
        @keyframes floatPetal {
          0%, 100% { 
            transform: translateY(0) translateX(0) rotate(0deg);
            opacity: 0.6;
          }
          20% {
            transform: translateY(-40px) translateX(15px) rotate(45deg);
            opacity: 0.8;
          }
          40% { 
            transform: translateY(-25px) translateX(-20px) rotate(90deg);
            opacity: 0.5;
          }
          60% {
            transform: translateY(-60px) translateX(10px) rotate(135deg);
            opacity: 0.7;
          }
          80% {
            transform: translateY(-35px) translateX(-15px) rotate(180deg);
            opacity: 0.6;
          }
        }
        
        @keyframes floatLeaf {
          0%, 100% { 
            transform: translateY(0) translateX(0) rotate(0deg);
            opacity: 0.5;
          }
          25% {
            transform: translateY(-50px) translateX(20px) rotate(60deg);
            opacity: 0.7;
          }
          50% { 
            transform: translateY(-30px) translateX(-25px) rotate(120deg);
            opacity: 0.4;
          }
          75% {
            transform: translateY(-70px) translateX(15px) rotate(180deg);
            opacity: 0.6;
          }
        }
        
        @keyframes lightRay {
          0%, 100% { 
            opacity: 0.1;
            transform: rotate(-15deg) scaleY(1);
          }
          50% { 
            opacity: 0.3;
            transform: rotate(-15deg) scaleY(1.1);
          }
        }
        
        @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>
  );
}
