import React, { useEffect } from 'react';
import { motion } from 'motion/react';
import { Wallet, CreditCard, Shield, Users, Sparkles, TrendingUp } from 'lucide-react';
import { ImageWithFallback } from './figma/ImageWithFallback';
import enamelLogo from 'figma:asset/2e2e3fad7673e8eef9a255215dd6ac2cf27cc590.png';

interface WelcomeScreenProps {
  onComplete: () => void;
}

export function WelcomeScreen({ onComplete }: WelcomeScreenProps) {
  useEffect(() => {
    const timer = setTimeout(() => {
      onComplete();
    }, 5000);

    return () => clearTimeout(timer);
  }, [onComplete]);

  const logoVariants = {
    hidden: { scale: 0, rotate: -180, opacity: 0 },
    visible: { 
      scale: 1, 
      rotate: 0, 
      opacity: 1,
      transition: { 
        duration: 1.2, 
        type: "spring", 
        stiffness: 100,
        damping: 15
      }
    }
  };

  const textVariants = {
    hidden: { y: 50, opacity: 0 },
    visible: { 
      y: 0, 
      opacity: 1,
      transition: { duration: 0.8, delay: 0.8, ease: "easeOut" }
    }
  };

  const taglineVariants = {
    hidden: { y: 30, opacity: 0 },
    visible: { 
      y: 0, 
      opacity: 1,
      transition: { duration: 0.8, delay: 1.2, ease: "easeOut" }
    }
  };

  const floatingIconVariants = {
    animate: {
      y: [0, -12, 0],
      rotate: [0, 3, -3, 0],
      transition: {
        duration: 4,
        repeat: Infinity,
        ease: "easeInOut"
      }
    }
  };

  const glowVariants = {
    animate: {
      scale: [1, 1.1, 1],
      opacity: [0.6, 1, 0.6],
      transition: {
        duration: 3,
        repeat: Infinity,
        ease: "easeInOut"
      }
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-600 via-primary-700 to-primary-800 flex items-center justify-center relative overflow-hidden">
      {/* Professional Background Pattern */}
      <div className="absolute inset-0 overflow-hidden">
        {/* Geometric background elements */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 0.1 }}
          transition={{ duration: 2 }}
          className="absolute top-0 left-0 w-full h-full"
        >
          <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs>
              <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
                <path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#grid)" />
          </svg>
        </motion.div>

        {/* Floating Professional Icons */}
        <motion.div
          variants={floatingIconVariants}
          animate="animate"
          className="absolute top-20 left-16 text-white/15"
          style={{ animationDelay: '0s' }}
        >
          <CreditCard size={48} strokeWidth={1.5} />
        </motion.div>
        <motion.div
          variants={floatingIconVariants}
          animate="animate"
          className="absolute top-32 right-20 text-white/15"
          style={{ animationDelay: '1s' }}
        >
          <Shield size={42} strokeWidth={1.5} />
        </motion.div>
        <motion.div
          variants={floatingIconVariants}
          animate="animate"
          className="absolute bottom-40 left-24 text-white/15"
          style={{ animationDelay: '2s' }}
        >
          <Users size={44} strokeWidth={1.5} />
        </motion.div>
        <motion.div
          variants={floatingIconVariants}
          animate="animate"
          className="absolute bottom-32 right-16 text-white/15"
          style={{ animationDelay: '3s' }}
        >
          <TrendingUp size={40} strokeWidth={1.5} />
        </motion.div>
        <motion.div
          variants={floatingIconVariants}
          animate="animate"
          className="absolute top-1/2 left-8 text-white/10"
          style={{ animationDelay: '1.5s' }}
        >
          <Sparkles size={36} strokeWidth={1.5} />
        </motion.div>
      </div>

      {/* Main Content */}
      <div className="text-center z-10 px-8 max-w-lg">
        {/* Animated logo with professional styling */}
        <motion.div
          variants={logoVariants}
          initial="hidden"
          animate="visible"
          className="mb-12 relative"
        >
          <div className="relative">
            {/* Glowing background effect */}
            <motion.div
              variants={glowVariants}
              animate="animate"
              className="absolute inset-0 w-40 h-40 mx-auto bg-white/20 rounded-full blur-xl"
            />
            
            {/* Main logo container */}
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="relative w-40 h-40 bg-white/95 backdrop-blur-sm rounded-3xl flex items-center justify-center mx-auto shadow-2xl border border-white/20"
            >
              <div className="w-24 h-24 relative">
                <ImageWithFallback
                  src={enamelLogo}
                  alt="Enamel Wallets Logo"
                  className="w-full h-full object-contain"
                />
              </div>
            </motion.div>

            {/* Sparkle effects around logo */}
            <motion.div
              animate={{ 
                rotate: [0, 360],
                scale: [1, 1.1, 1]
              }}
              transition={{ 
                duration: 8, 
                repeat: Infinity, 
                ease: "linear" 
              }}
              className="absolute inset-0 w-40 h-40 mx-auto"
            >
              {[...Array(6)].map((_, i) => (
                <motion.div
                  key={i}
                  className="absolute w-2 h-2 bg-white/60 rounded-full"
                  style={{
                    top: '50%',
                    left: '50%',
                    transform: `rotate(${i * 60}deg) translateY(-85px) translateX(-4px)`,
                  }}
                  animate={{
                    opacity: [0.3, 1, 0.3],
                    scale: [0.5, 1, 0.5]
                  }}
                  transition={{
                    duration: 2,
                    repeat: Infinity,
                    delay: i * 0.3
                  }}
                />
              ))}
            </motion.div>
          </div>
        </motion.div>

        {/* Professional App name */}
        <motion.div
          variants={textVariants}
          initial="hidden"
          animate="visible"
          className="mb-8"
        >
          <h1 className="text-5xl md:text-6xl font-extrabold text-white mb-3 tracking-tight">
            ENAMEL
          </h1>
          <h2 className="text-3xl md:text-4xl font-light text-blue-100 mb-2 tracking-wide">
            WALLETS
          </h2>
          <div className="w-24 h-1 bg-gradient-to-r from-transparent via-white to-transparent mx-auto rounded-full" />
        </motion.div>

        {/* Enhanced Tagline */}
        <motion.div
          variants={taglineVariants}
          initial="hidden"
          animate="visible"
          className="mb-12"
        >
          <p className="text-xl text-blue-100 font-light tracking-wide mb-2">
            Smart Savings for Modern Nigeria
          </p>
          <p className="text-lg text-blue-200/80 font-light">
            Secure • Simple • Reliable
          </p>
        </motion.div>

        {/* Professional loading indicator */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 2.5 }}
          className="space-y-4"
        >
          {/* Loading dots */}
          <div className="flex justify-center space-x-3">
            {[0, 1, 2].map((i) => (
              <motion.div
                key={i}
                animate={{ 
                  scale: [1, 1.4, 1],
                  opacity: [0.5, 1, 0.5]
                }}
                transition={{ 
                  duration: 1, 
                  repeat: Infinity, 
                  delay: i * 0.2,
                  ease: "easeInOut"
                }}
                className="w-3 h-3 bg-white/70 rounded-full"
              />
            ))}
          </div>
          
          {/* Loading progress bar */}
          <div className="w-48 h-1 bg-white/20 rounded-full mx-auto overflow-hidden">
            <motion.div
              initial={{ width: 0 }}
              animate={{ width: "100%" }}
              transition={{ duration: 4.5, ease: "easeInOut" }}
              className="h-full bg-gradient-to-r from-white/60 to-white rounded-full"
            />
          </div>
          
          {/* Loading text */}
          <motion.p
            animate={{
              opacity: [0.6, 1, 0.6]
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              ease: "easeInOut"
            }}
            className="text-blue-100/80 text-sm font-medium tracking-wide"
          >
            Initializing your financial journey...
          </motion.p>
        </motion.div>
      </div>

      {/* Professional corner branding */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 3, duration: 0.8 }}
        className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
      >
        <div className="flex items-center space-x-2 text-blue-100/60 text-sm">
          <span>🇳🇬</span>
          <span>Made for Nigeria</span>
        </div>
      </motion.div>
    </div>
  );
}