import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, AlertTriangle, Info } from 'lucide-react';

export function DemoDisclaimerModal() {
  const [isOpen, setIsOpen] = useState(false);
  const [isClosing, setIsClosing] = useState(false);

  useEffect(() => {
    // 检查是否需要显示免责声明（每天上午和下午各一次）
    const checkShouldShow = () => {
      const now = new Date();
      const currentHour = now.getHours();
      const today = now.toDateString();

      // 判断当前是上午还是下午
      const isMorning = currentHour >= 6 && currentHour < 12;
      const isAfternoon = currentHour >= 12 && currentHour < 24;

      // 获取上次显示记录
      const lastShown = localStorage.getItem('demo_disclaimer_shown');
      let shouldShow = false;

      if (!lastShown) {
        // 从未显示过，需要显示
        shouldShow = true;
      } else {
        const lastShownData = JSON.parse(lastShown);
        const lastDate = lastShownData.date;
        const lastPeriod = lastShownData.period; // 'morning' | 'afternoon'

        if (lastDate !== today) {
          // 今天还没显示过
          shouldShow = true;
        } else if (isAfternoon && lastPeriod === 'morning') {
          // 上午已显示，现在是下午
          shouldShow = true;
        }
      }

      return { shouldShow, period: isMorning ? 'morning' : 'afternoon' };
    };

    const { shouldShow, period } = checkShouldShow();

    if (shouldShow) {
      const timer = setTimeout(() => {
        setIsOpen(true);
        // 记录显示时间
        const today = new Date().toDateString();
        localStorage.setItem('demo_disclaimer_shown', JSON.stringify({
          date: today,
          period: period
        }));
      }, 500);
      return () => clearTimeout(timer);
    }
  }, []);

  const handleAccept = () => {
    setIsClosing(true);
    setTimeout(() => {
      setIsOpen(false);
      setIsClosing(false);
    }, 300);
  };

  const handleClose = () => {
    setIsClosing(true);
    setTimeout(() => {
      setIsOpen(false);
      setIsClosing(false);
      // 跳转到必应
      window.location.href = 'https://www.bing.com';
    }, 300);
  };

  if (!isOpen) return null;

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: isClosing ? 0 : 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[9999] p-4"
          onClick={(e) => e.stopPropagation()}
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: isClosing ? 0 : 1, scale: isClosing ? 0.95 : 1, y: isClosing ? 20 : 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 20 }}
            transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
            className="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            {/* 头部 */}
            <div className="bg-gradient-to-r from-amber-500 via-orange-500 to-amber-600 p-4 sm:p-6">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
                  <AlertTriangle className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h2 className="text-xl sm:text-2xl font-bold text-white">昱森（Demo版）</h2>
                  <p className="text-amber-100 text-sm">演示阶段免责声明</p>
                </div>
              </div>
            </div>

            {/* 内容 */}
            <div className="p-4 sm:p-6 space-y-4">
              <div className="flex items-start gap-3 bg-amber-50 rounded-xl p-4 border border-amber-200">
                <Info className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
                <div className="text-sm text-amber-800">
                  <p className="font-medium mb-1">当前为演示版本</p>
                  <p>本系统目前处于Demo阶段，仅供功能演示和体验使用。</p>
                </div>
              </div>

              <div className="space-y-3 text-sm text-gray-600">
                <div className="flex items-start gap-2">
                  <span className="w-1.5 h-1.5 bg-amber-500 rounded-full mt-2 flex-shrink-0" />
                  <p>演示数据可能会定期清理，请勿存储重要业务数据</p>
                </div>
                <div className="flex items-start gap-2">
                  <span className="w-1.5 h-1.5 bg-amber-500 rounded-full mt-2 flex-shrink-0" />
                  <p>部分功能可能尚未完善或存在已知问题</p>
                </div>
                <div className="flex items-start gap-2">
                  <span className="w-1.5 h-1.5 bg-amber-500 rounded-full mt-2 flex-shrink-0" />
                  <p>系统性能和稳定性仍在优化中</p>
                </div>
                <div className="flex items-start gap-2">
                  <span className="w-1.5 h-1.5 bg-amber-500 rounded-full mt-2 flex-shrink-0" />
                  <p>正式版本发布前，功能和界面可能会有较大调整</p>
                </div>
              </div>

              <div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
                <p className="text-xs text-gray-500 leading-relaxed">
                  使用本系统即表示您了解并同意以上条款。如遇问题或有建议，欢迎反馈给我们。
                </p>
              </div>
            </div>

            {/* 按钮 */}
            <div className="p-4 sm:p-6 pt-0 flex gap-3">
              <motion.button
                whileHover={{ scale: 1.03, y: -2 }}
                whileTap={{ scale: 0.97 }}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.4, duration: 0.3 }}
                onClick={handleClose}
                className="flex-1 py-3 border-2 border-gray-300 text-gray-700 rounded-xl font-medium hover:bg-gray-50 hover:border-gray-400 hover:shadow-lg transition-all text-sm sm:text-base relative overflow-hidden group"
              >
                <span className="relative z-10">稍后再说</span>
                <motion.div
                  className="absolute inset-0 bg-gradient-to-r from-gray-100 to-gray-200 opacity-0 group-hover:opacity-100"
                  initial={{ x: '-100%' }}
                  whileHover={{ x: '100%' }}
                  transition={{ duration: 0.5 }}
                />
              </motion.button>
              <motion.button
                whileHover={{ scale: 1.03, y: -2, boxShadow: '0 10px 30px rgba(245, 158, 11, 0.4)' }}
                whileTap={{ scale: 0.97 }}
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.4, duration: 0.3 }}
                onClick={handleAccept}
                className="flex-1 py-3 bg-gradient-to-r from-amber-500 via-orange-500 to-amber-600 text-white rounded-xl font-medium hover:from-amber-600 hover:via-orange-600 hover:to-amber-700 transition-all shadow-lg shadow-amber-500/30 text-sm sm:text-base relative overflow-hidden"
              >
                <motion.span
                  className="flex items-center justify-center gap-2"
                  animate={{ x: [0, 2, 0] }}
                  transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
                >
                  我知道了
                  <motion.svg
                    className="w-4 h-4"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    animate={{ x: [0, 3, 0] }}
                    transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.2 }}
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                  </motion.svg>
                </motion.span>
                {/* 脉冲光环效果 */}
                <motion.div
                  className="absolute inset-0 rounded-xl"
                  animate={{
                    boxShadow: [
                      '0 0 0 0 rgba(251, 191, 36, 0)',
                      '0 0 0 8px rgba(251, 191, 36, 0.2)',
                      '0 0 0 0 rgba(251, 191, 36, 0)'
                    ]
                  }}
                  transition={{
                    duration: 2,
                    repeat: Infinity,
                    ease: "easeOut"
                  }}
                />
              </motion.button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
