import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';

interface ConfettiPiece {
  id: number;
  x: number;
  y: number;
  color: string;
  size: number;
  rotation: number;
  delay: number;
}

interface ConfettiEffectProps {
  isActive: boolean;
  duration?: number;
}

const ConfettiEffect: React.FC<ConfettiEffectProps> = ({ 
  isActive, 
  duration = 3000 
}) => {
  const [confetti, setConfetti] = useState<ConfettiPiece[]>([]);
  const [showEffect, setShowEffect] = useState(false);

  const colors = [
    '#FFD700', // 金色
    '#FF6B6B', // 红色
    '#4ECDC4', // 青色
    '#45B7D1', // 蓝色
    '#96CEB4', // 绿色
    '#FFEAA7', // 黄色
    '#DDA0DD', // 紫色
    '#FFA07A', // 橙色
  ];

  useEffect(() => {
    if (isActive) {
      setShowEffect(true);
      
      // 生成撒花粒子
      const pieces: ConfettiPiece[] = [];
      for (let i = 0; i < 50; i++) {
        pieces.push({
          id: i,
          x: Math.random() * window.innerWidth,
          y: -20,
          color: colors[Math.floor(Math.random() * colors.length)],
          size: Math.random() * 8 + 4,
          rotation: Math.random() * 360,
          delay: Math.random() * 1000,
        });
      }
      setConfetti(pieces);

      // 设置效果持续时间
      const timer = setTimeout(() => {
        setShowEffect(false);
        setConfetti([]);
      }, duration);

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

  if (!showEffect) {
    return null;
  }

  return (
    <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
      {confetti.map((piece) => (
        <motion.div
          key={piece.id}
          className="absolute"
          style={{
            left: piece.x,
            top: piece.y,
            width: piece.size,
            height: piece.size,
            backgroundColor: piece.color,
            borderRadius: Math.random() > 0.5 ? '50%' : '0%',
          }}
          initial={{
            y: -20,
            rotate: piece.rotation,
            opacity: 1,
          }}
          animate={{
            y: window.innerHeight + 100,
            rotate: piece.rotation + 720,
            opacity: 0,
            x: piece.x + (Math.random() - 0.5) * 200,
          }}
          transition={{
            duration: 3,
            delay: piece.delay / 1000,
            ease: 'easeOut',
          }}
        />
      ))}
      
      {/* 额外的星星特效 */}
      {Array.from({ length: 20 }).map((_, i) => (
        <motion.div
          key={`star-${i}`}
          className="absolute text-yellow-400 text-2xl"
          style={{
            left: Math.random() * window.innerWidth,
            top: Math.random() * 100,
          }}
          initial={{
            scale: 0,
            rotate: 0,
            opacity: 0,
          }}
          animate={{
            scale: [0, 1.5, 0],
            rotate: 360,
            opacity: [0, 1, 0],
          }}
          transition={{
            duration: 2,
            delay: Math.random() * 1000 / 1000,
            repeat: 1,
          }}
        >
          ⭐
        </motion.div>
      ))}
      
      {/* 烟花爆炸效果 */}
      <motion.div
        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
        initial={{ scale: 0, opacity: 0 }}
        animate={{ 
          scale: [0, 2, 0],
          opacity: [0, 1, 0],
        }}
        transition={{
          duration: 1.5,
          times: [0, 0.3, 1],
        }}
      >
        <div className="text-6xl">🎉</div>
      </motion.div>
    </div>
  );
};

export default React.memo(ConfettiEffect);