import React, { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Trophy, Sparkles } from 'lucide-react'
import { Prize } from '../store'

interface DrawAnimationProps {
  prizes: Prize[]
  duration: number
}

const DrawAnimation: React.FC<DrawAnimationProps> = ({ prizes, duration }) => {
  const [currentPrizeIndex, setCurrentPrizeIndex] = useState(0)
  const [isRolling, setIsRolling] = useState(true)
  const [showSparkles, setShowSparkles] = useState(false)
  
  useEffect(() => {
    if (prizes.length === 0) return
    
    // 滚动动画
    const rollInterval = setInterval(() => {
      setCurrentPrizeIndex(prev => (prev + 1) % prizes.length)
    }, 100) // 每100ms切换一次
    
    // 停止滚动并显示结果
    const stopTimer = setTimeout(() => {
      clearInterval(rollInterval)
      setIsRolling(false)
      setShowSparkles(true)
    }, duration - 500) // 提前500ms停止滚动
    
    return () => {
      clearInterval(rollInterval)
      clearTimeout(stopTimer)
    }
  }, [prizes, duration])
  
  if (prizes.length === 0) return null
  
  const currentPrize = prizes[currentPrizeIndex]
  
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
    >
      {/* 背景粒子效果 */}
      <div className="absolute inset-0 overflow-hidden">
        {Array.from({ length: 20 }).map((_, i) => (
          <motion.div
            key={i}
            className="absolute w-2 h-2 bg-yellow-400 rounded-full"
            initial={{
              x: Math.random() * window.innerWidth,
              y: Math.random() * window.innerHeight,
              scale: 0
            }}
            animate={{
              scale: [0, 1, 0],
              rotate: 360,
              x: Math.random() * window.innerWidth,
              y: Math.random() * window.innerHeight
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              delay: Math.random() * 2
            }}
          />
        ))}
      </div>
      
      {/* 主要动画容器 */}
      <motion.div
        initial={{ scale: 0, rotate: -180 }}
        animate={{ scale: 1, rotate: 0 }}
        exit={{ scale: 0, rotate: 180 }}
        transition={{ type: "spring", stiffness: 200, damping: 20 }}
        className="relative z-10 bg-gradient-to-br from-purple-600 via-blue-600 to-indigo-600 rounded-3xl p-12 shadow-2xl border-4 border-white/20 max-w-2xl w-full mx-4"
      >
        {/* 装饰性光环 */}
        <div className="absolute -inset-4 bg-gradient-to-r from-yellow-400 via-pink-500 to-purple-500 rounded-3xl blur-xl opacity-30 animate-pulse"></div>
        
        {/* 标题 */}
        <div className="text-center mb-8 relative z-10">
          <motion.div
            animate={{ rotate: 360 }}
            transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
            className="w-20 h-20 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-4"
          >
            <Trophy className="w-10 h-10 text-white" />
          </motion.div>
          
          <h2 className="text-4xl font-bold text-white mb-2">
            {isRolling ? '正在抽奖...' : '恭喜中奖！'}
          </h2>
          
          {isRolling && (
            <p className="text-white/80 text-lg">请稍候，正在为您抽取奖品</p>
          )}
        </div>
        
        {/* 奖品展示区 */}
        <div className="relative">
          {/* 滚动框架 */}
          <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border-2 border-white/20 relative overflow-hidden">
            {/* 滚动指示器 */}
            {isRolling && (
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-yellow-400 to-transparent animate-pulse"></div>
            )}
            
            {/* 奖品信息 */}
            <AnimatePresence mode="wait">
              <motion.div
                key={currentPrizeIndex}
                initial={{ y: 50, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                exit={{ y: -50, opacity: 0 }}
                transition={{ duration: 0.1 }}
                className="text-center"
              >
                {/* 奖品颜色指示器 */}
                <div 
                  className="w-24 h-24 rounded-full mx-auto mb-6 flex items-center justify-center shadow-lg bg-gradient-to-br from-purple-500 to-blue-500"
                >
                  <Trophy className="w-12 h-12 text-white" />
                </div>
                
                {/* 奖品名称 */}
                <h3 className="text-3xl font-bold text-white mb-2">
                  {currentPrize.name}
                </h3>
                
                {/* 剩余数量 */}
                <div className="flex items-center justify-center space-x-4 text-white/60">
                  <span>剩余: {currentPrize.remainingQuantity} 个</span>
                  <span>•</span>
                  <span>等级: {currentPrize.level}</span>
                </div>
              </motion.div>
            </AnimatePresence>
            
            {/* 滚动指示器底部 */}
            {isRolling && (
              <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-yellow-400 to-transparent animate-pulse"></div>
            )}
          </div>
          
          {/* 火花效果 */}
          <AnimatePresence>
            {showSparkles && (
              <>
                {Array.from({ length: 8 }).map((_, i) => (
                  <motion.div
                    key={i}
                    initial={{ scale: 0, rotate: 0 }}
                    animate={{ 
                      scale: [0, 1, 0], 
                      rotate: 360,
                      x: [0, (Math.random() - 0.5) * 200],
                      y: [0, (Math.random() - 0.5) * 200]
                    }}
                    transition={{ 
                      duration: 1.5, 
                      delay: i * 0.1,
                      ease: "easeOut"
                    }}
                    className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                  >
                    <Sparkles className="w-8 h-8 text-yellow-400" />
                  </motion.div>
                ))}
              </>
            )}
          </AnimatePresence>
        </div>
        
        {/* 进度条 */}
        <div className="mt-8 relative z-10">
          <div className="bg-white/20 rounded-full h-2 overflow-hidden">
            <motion.div
              className="bg-gradient-to-r from-yellow-400 to-orange-500 h-full rounded-full"
              initial={{ width: '0%' }}
              animate={{ width: '100%' }}
              transition={{ duration: duration / 1000, ease: "linear" }}
            />
          </div>
          
          <div className="flex justify-between items-center mt-2 text-white/60 text-sm">
            <span>抽奖进行中</span>
            <span>{Math.round(duration / 1000)}秒</span>
          </div>
        </div>
        
        {/* 装饰性元素 */}
        <div className="absolute top-4 right-4">
          <motion.div
            animate={{ rotate: 360 }}
            transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
            className="w-8 h-8 border-2 border-yellow-400 border-t-transparent rounded-full"
          />
        </div>
        
        <div className="absolute bottom-4 left-4">
          <motion.div
            animate={{ scale: [1, 1.2, 1] }}
            transition={{ duration: 1, repeat: Infinity }}
            className="w-6 h-6 bg-yellow-400 rounded-full opacity-60"
          />
        </div>
      </motion.div>
    </motion.div>
  )
}

export default React.memo(DrawAnimation)