import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Sparkles, Trophy, ArrowLeft } from 'lucide-react';
import { Link } from 'react-router-dom';
import ConfettiEffect from '../components/ConfettiEffect';
import LotteryAnimation from '../components/LotteryAnimation';
import { DrawResult } from '../store';

const ConfettiDemo: React.FC = () => {
  const [showConfetti, setShowConfetti] = useState(false);
  const [showLotteryAnimation, setShowLotteryAnimation] = useState(false);
  const [demoResult, setDemoResult] = useState<DrawResult | undefined>();

  // 模拟1等奖结果
  const mockFirstPrizeResult: DrawResult = {
    success: true,
    message: '恭喜中奖！',
    studentId: '2021001',
    formattedStudentId: '2021001',
    prize: {
      id: '1',
      name: '一等奖',
      level: 1
    },
    timestamp: Date.now()
  };

  // 触发单独的撒花特效
  const triggerConfetti = () => {
    setShowConfetti(true);
    setTimeout(() => {
      setShowConfetti(false);
    }, 4000);
  };

  // 触发完整的1等奖抽奖动画
  const triggerFullAnimation = () => {
    setDemoResult(mockFirstPrizeResult);
    setShowLotteryAnimation(true);
  };

  const handleAnimationComplete = () => {
    setShowLotteryAnimation(false);
    setDemoResult(undefined);
  };

  const handleCountdownComplete = () => {
    // 模拟抽奖完成后设置结果
    setTimeout(() => {
      setDemoResult(mockFirstPrizeResult);
    }, 1000);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 p-4">
      <div className="max-w-4xl mx-auto">
        {/* 头部导航 */}
        <div className="flex items-center justify-between mb-8">
          <Link 
            to="/" 
            className="flex items-center space-x-2 text-white hover:text-yellow-400 transition-colors"
          >
            <ArrowLeft size={24} />
            <span>返回首页</span>
          </Link>
          <h1 className="text-3xl font-bold text-white flex items-center space-x-2">
            <Sparkles className="text-yellow-400" />
            <span>撒花特效演示</span>
          </h1>
        </div>

        {/* 演示区域 */}
        <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 mb-8">
          <div className="text-center">
            <div className="mb-8">
              <Trophy className="w-24 h-24 text-yellow-400 mx-auto mb-4" />
              <h2 className="text-2xl font-bold text-white mb-2">一等奖撒花特效演示</h2>
              <p className="text-gray-300">点击下方按钮体验不同的撒花效果</p>
            </div>

            {/* 演示按钮 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* 单独撒花特效 */}
              <motion.button
                onClick={triggerConfetti}
                className="bg-gradient-to-r from-yellow-400 to-orange-500 text-black font-bold py-4 px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <div className="flex items-center justify-center space-x-2">
                  <Sparkles size={24} />
                  <span>触发撒花特效</span>
                </div>
                <div className="text-sm mt-1 opacity-80">
                  仅显示撒花动画
                </div>
              </motion.button>

              {/* 完整抽奖动画 */}
              <motion.button
                onClick={triggerFullAnimation}
                className="bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold py-4 px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <div className="flex items-center justify-center space-x-2">
                  <Trophy size={24} />
                  <span>完整抽奖动画</span>
                </div>
                <div className="text-sm mt-1 opacity-80">
                  包含倒计时和撒花
                </div>
              </motion.button>
            </div>
          </div>
        </div>

        {/* 说明文档 */}
        <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6">
          <h3 className="text-xl font-bold text-white mb-4">特效说明</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-gray-300">
            <div>
              <h4 className="font-semibold text-yellow-400 mb-2">撒花特效包含：</h4>
              <ul className="space-y-1 text-sm">
                <li>• 50个彩色粒子从顶部飘落</li>
                <li>• 20个星星闪烁动画</li>
                <li>• 中央烟花爆炸效果</li>
                <li>• 持续时间：4秒</li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-yellow-400 mb-2">触发条件：</h4>
              <ul className="space-y-1 text-sm">
                <li>• 抽中1等奖时自动触发</li>
                <li>• 奖品等级 level === 1</li>
                <li>• 在抽奖结果显示时播放</li>
                <li>• 全屏覆盖，不影响交互</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* 撒花特效组件 */}
      <ConfettiEffect 
        isActive={showConfetti} 
        duration={4000}
      />

      {/* 完整抽奖动画 */}
      <LotteryAnimation
        isVisible={showLotteryAnimation}
        onComplete={handleAnimationComplete}
        onCountdownComplete={handleCountdownComplete}
        result={demoResult}
      />
    </div>
  );
};

export default ConfettiDemo;