import {motion} from 'motion/react';
import {useEffect, useState} from 'react';
import {Brain, Cpu, TrendingUp, Zap} from 'lucide-react';


const analysisSteps = [
  { dept: '组织架构', message: '发现重复劳动节点...', icon: '🎨' },
  { dept: 'AI替代方案', message: 'AI替代率 85%...', icon: '✍️' },
  { dept: 'AI优化方案', message: '智能接入可节省 70%...', icon: '💬' },
  { dept: 'AI优化空间', message: '数据分析优化空间 60%...', icon: '📊' },
  { dept: 'AI部署方案', message: '自动化流程提升 75%...', icon: '⚙️' },
];

export function Screen3Analysis() {
  const [currentStep, setCurrentStep] = useState(0);
  const [nodes, setNodes] = useState<Array<{ x: number; y: number; id: number }>>([]);

  useEffect(() => {
    // Generate random nodes
    const newNodes = Array.from({ length: 15 }, (_, i) => ({
      x: Math.random() * 100,
      y: Math.random() * 100,
      id: i,
    }));
    setNodes(newNodes);
  }, []);

  useEffect(() => {
    // Progress through analysis steps
    const timer = setInterval(() => {
      setCurrentStep((prev) => {
        if (prev < analysisSteps.length - 1) {
          return prev + 1;
        } else {
          clearInterval(timer);
          return prev;
        }
      });
    }, 800);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="min-h-screen flex flex-col items-center justify-center px-6 py-12 relative overflow-hidden">
      {/* Radar scanning effect */}
      <div className="absolute inset-0 flex items-center justify-center">
        <motion.div
          className="absolute w-96 h-96 border-2 border-[#00F0FF]/30 rounded-full"
          animate={{
            scale: [1, 1.5, 1],
            opacity: [0.5, 0, 0.5],
          }}
          transition={{
            duration: 2,
            repeat: Infinity,
            ease: 'easeOut',
          }}
        />
        <motion.div
          className="absolute w-96 h-96 border-2 border-[#7B61FF]/30 rounded-full"
          animate={{
            scale: [1, 1.5, 1],
            opacity: [0.5, 0, 0.5],
          }}
          transition={{
            duration: 2,
            repeat: Infinity,
            ease: 'easeOut',
            delay: 0.5,
          }}
        />

        {/* Rotating radar beam */}
        <motion.div
          className="absolute w-96 h-1 bg-gradient-to-r from-[#00F0FF]/0 via-[#00F0FF]/80 to-[#00F0FF]/0 origin-left"
          style={{ left: '50%', top: '50%' }}
          animate={{
            rotate: [0, 360],
          }}
          transition={{
            duration: 3,
            repeat: Infinity,
            ease: 'linear',
          }}
        />
      </div>

      {/* Node visualization */}
      <div className="absolute inset-0 pointer-events-none">
        {nodes.map((node) => (
          <motion.div
            key={node.id}
            className="absolute w-3 h-3 bg-[#00F0FF] rounded-full"
            style={{
              left: `${node.x}%`,
              top: `${node.y}%`,
            }}
            initial={{ scale: 0, opacity: 0 }}
            animate={{
              scale: [0, 1, 0.8],
              opacity: [0, 1, 0.6],
            }}
            transition={{
              duration: 1,
              delay: node.id * 0.1,
            }}
          >
            {/* Pulse effect */}
            <motion.div
              className="absolute inset-0 bg-[#00F0FF] rounded-full"
              animate={{
                scale: [1, 2, 1],
                opacity: [0.8, 0, 0.8],
              }}
              transition={{
                duration: 2,
                repeat: Infinity,
                delay: node.id * 0.1,
              }}
            />
          </motion.div>
        ))}
      </div>

      {/* Central AI brain */}
      <motion.div
        className="relative z-10 mb-12"
        initial={{ scale: 0, rotate: -180 }}
        animate={{ scale: 1, rotate: 0 }}
        transition={{ duration: 1, type: 'spring' }}
      >
        <div className="relative">
          <motion.div
            className="w-24 h-24 bg-gradient-to-br from-[#7B61FF] to-[#00F0FF] rounded-full flex items-center justify-center"
            animate={{
              boxShadow: [
                '0 0 20px rgba(123, 97, 255, 0.5)',
                '0 0 40px rgba(0, 240, 255, 0.8)',
                '0 0 20px rgba(123, 97, 255, 0.5)',
              ],
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
            }}
          >
            <Brain className="w-12 h-12 text-white" />
          </motion.div>

          {/* Orbiting icons */}
          {[Cpu, Zap, TrendingUp].map((Icon, index) => (
            <motion.div
              key={index}
              className="absolute top-1/2 left-1/2 w-8 h-8 -ml-4 -mt-4"
              animate={{
                rotate: [0, 360],
              }}
              transition={{
                duration: 5,
                repeat: Infinity,
                ease: 'linear',
                delay: index * 0.6,
              }}
            >
              <motion.div
                className="absolute"
                style={{
                  transform: `translateX(60px) rotate(-${index * 120}deg)`,
                }}
                animate={{
                  rotate: [0, -360],
                }}
                transition={{
                  duration: 5,
                  repeat: Infinity,
                  ease: 'linear',
                  delay: index * 0.6,
                }}
              >
                <div className="w-8 h-8 bg-[#0A0F24] border-2 border-[#00F0FF] rounded-full flex items-center justify-center">
                  <Icon className="w-4 h-4 text-[#00F0FF]" />
                </div>
              </motion.div>
            </motion.div>
          ))}
        </div>
      </motion.div>

      {/* Analysis progress */}
      <div className="relative z-10 w-full max-w-md space-y-4">
        {analysisSteps.map((step, index) => (
          <motion.div
            key={index}
            className={`flex items-center gap-4 p-4 rounded-xl backdrop-blur-sm transition-all ${
              index === currentStep
                ? 'bg-[#00F0FF]/20 border-2 border-[#00F0FF]'
                : index < currentStep
                ? 'bg-white/5 border border-gray-600'
                : 'bg-white/5 border border-gray-800 opacity-30'
            }`}
            initial={{ opacity: 0, x: -50 }}
            animate={{
              opacity: index <= currentStep ? 1 : 0.3,
              x: 0,
            }}
            transition={{ delay: index * 0.1 }}
          >
            <span className="text-2xl">{step.icon}</span>
            <div className="flex-1">
              <div className="text-sm text-gray-300">正在分析{step.dept}</div>
              <div className="text-xs text-[#00F0FF] mt-1">{step.message}</div>
            </div>
            {index === currentStep && (
              <motion.div
                className="w-6 h-6 border-2 border-[#00F0FF] border-t-transparent rounded-full"
                animate={{ rotate: 360 }}
                transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
              />
            )}
            {index < currentStep && (
              <div className="w-6 h-6 bg-[#00F0FF] rounded-full flex items-center justify-center">
                <svg className="w-4 h-4 text-[#0A0F24]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                </svg>
              </div>
            )}
          </motion.div>
        ))}
      </div>

      {/* Status text */}
      <motion.div
        className="mt-12 text-center"
        initial={{ opacity: 0 }}
        animate={{ opacity: [0, 1, 0] }}
        transition={{ duration: 2, repeat: Infinity }}
      >
        <p className="text-[#00F0FF] text-sm">AI深度分析中，请稍候...</p>
      </motion.div>

      {/* Progress bar */}
      <motion.div className="mt-6 w-64 h-1 bg-gray-800 rounded-full overflow-hidden">
        <motion.div
          className="h-full bg-gradient-to-r from-[#7B61FF] to-[#00F0FF]"
          initial={{ width: '0%' }}
          animate={{ width: `${((currentStep + 1) / analysisSteps.length) * 100}%` }}
          transition={{ duration: 0.5 }}
        />
      </motion.div>
    </div>
  );
}