'use client';

import { useEffect, useRef } from 'react';
import { useTheme } from '@mui/material';

export default function ParticleBackground() {
  const canvasRef = useRef(null);
  const theme = useTheme();

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let animationFrameId;
    let particles = [];
    let mousePosition = { x: 0, y: 0 };
    let hoverRadius = 150; // 增加鼠标影响范围
    let mouseSpeed = { x: 0, y: 0 }; // 跟踪鼠标速度
    let lastMousePosition = { x: 0, y: 0 }; // 上一帧鼠标位置

    // 设置画布大小为窗口大小
    const handleResize = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      initParticles();
    };

    // 跟踪鼠标位置和速度
    const handleMouseMove = event => {
      // 计算鼠标速度
      mouseSpeed.x = event.clientX - mousePosition.x;
      mouseSpeed.y = event.clientY - mousePosition.y;

      // 更新鼠标位置
      lastMousePosition.x = mousePosition.x;
      lastMousePosition.y = mousePosition.y;
      mousePosition.x = event.clientX;
      mousePosition.y = event.clientY;
    };

    // 触摸设备支持
    const handleTouchMove = event => {
      if (event.touches.length > 0) {
        // 计算触摸速度
        mouseSpeed.x = event.touches[0].clientX - mousePosition.x;
        mouseSpeed.y = event.touches[0].clientY - mousePosition.y;

        // 更新触摸位置
        lastMousePosition.x = mousePosition.x;
        lastMousePosition.y = mousePosition.y;
        mousePosition.x = event.touches[0].clientX;
        mousePosition.y = event.touches[0].clientY;
      }
    };

    // 生成随机颜色
    const getRandomColor = () => {
      // 主题色调
      const colors =
        theme.palette.mode === 'dark'
          ? [
              'rgba(255, 255, 255, 0.5)', // 白色
              'rgba(100, 181, 246, 0.5)', // 蓝色
              'rgba(156, 39, 176, 0.4)', // 紫色
              'rgba(121, 134, 203, 0.5)' // 靛蓝色
            ]
          : [
              'rgba(42, 92, 170, 0.5)', // 主蓝色
              'rgba(66, 165, 245, 0.4)', // 浅蓝色
              'rgba(94, 53, 177, 0.3)', // 深紫色
              'rgba(3, 169, 244, 0.4)' // 天蓝色
            ];

      return colors[Math.floor(Math.random() * colors.length)];
    };

    // 初始化粒子
    const initParticles = () => {
      particles = [];
      // 增加粒子数量，但保持性能平衡
      const particleCount = Math.min(Math.floor(window.innerWidth / 8), 150);

      for (let i = 0; i < particleCount; i++) {
        // 创建不同大小和速度的粒子
        const size = Math.random();
        const speedFactor = Math.max(0.1, size); // 较大的粒子移动较慢

        particles.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          // 粒子大小更加多样化
          radius: size * 3 + 0.5,
          // 使用随机颜色
          color: getRandomColor(),
          // 添加发光效果
          glow: Math.random() * 10 + 5,
          // 调整速度范围，使运动更加自然
          speedX: (Math.random() * 0.6 - 0.3) * speedFactor,
          speedY: (Math.random() * 0.6 - 0.3) * speedFactor,
          originalSpeedX: (Math.random() * 0.6 - 0.3) * speedFactor,
          originalSpeedY: (Math.random() * 0.6 - 0.3) * speedFactor,
          // 添加脉动效果
          pulseSpeed: Math.random() * 0.02 + 0.01,
          pulseDirection: Math.random() > 0.5 ? 1 : -1,
          pulseAmount: 0,
          // 粒子透明度
          opacity: Math.random() * 0.5 + 0.5
        });
      }
    };

    // 绘制粒子
    const drawParticles = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 计算鼠标速度衰减
      mouseSpeed.x *= 0.95;
      mouseSpeed.y *= 0.95;

      // 绘制粒子之间的连线
      drawLines();

      particles.forEach(particle => {
        // 计算粒子与鼠标的距离
        const dx = mousePosition.x - particle.x;
        const dy = mousePosition.y - particle.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        // 脉动效果
        particle.pulseAmount += particle.pulseSpeed * particle.pulseDirection;
        if (Math.abs(particle.pulseAmount) > 0.5) {
          particle.pulseDirection *= -1;
        }

        // 如果粒子在鼠标影响范围内，调整其速度
        if (distance < hoverRadius) {
          const angle = Math.atan2(dy, dx);
          const force = (hoverRadius - distance) / hoverRadius;
          const mouseFactor = 3; // 增强鼠标影响力度

          // 粒子远离鼠标，并受鼠标速度影响
          particle.speedX = -Math.cos(angle) * force * mouseFactor + particle.originalSpeedX + mouseSpeed.x * 0.05;
          particle.speedY = -Math.sin(angle) * force * mouseFactor + particle.originalSpeedY + mouseSpeed.y * 0.05;
        } else {
          // 逐渐恢复原始速度
          particle.speedX = particle.speedX * 0.95 + particle.originalSpeedX * 0.05;
          particle.speedY = particle.speedY * 0.95 + particle.originalSpeedY * 0.05;
        }

        // 更新粒子位置
        particle.x += particle.speedX;
        particle.y += particle.speedY;

        // 边界检查
        if (particle.x < 0) particle.x = canvas.width;
        if (particle.x > canvas.width) particle.x = 0;
        if (particle.y < 0) particle.y = canvas.height;
        if (particle.y > canvas.height) particle.y = 0;

        // 应用脉动效果到粒子大小
        const currentRadius = particle.radius * (1 + particle.pulseAmount * 0.2);

        // 绘制发光效果
        const gradient = ctx.createRadialGradient(particle.x, particle.y, 0, particle.x, particle.y, particle.glow);
        gradient.addColorStop(0, particle.color);
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

        // 绘制粒子
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, currentRadius, 0, Math.PI * 2);
        ctx.fillStyle = particle.color;
        ctx.fill();

        // 添加发光效果
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.glow, 0, Math.PI * 2);
        ctx.fillStyle = gradient;
        ctx.globalAlpha = 0.3 * particle.opacity;
        ctx.fill();
        ctx.globalAlpha = 1.0;
      });

      animationFrameId = requestAnimationFrame(drawParticles);
    };

    // 绘制粒子之间的连线
    const drawLines = () => {
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x;
          const dy = particles[i].y - particles[j].y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          // 增加连线的最大距离
          const maxDistance = 120;

          if (distance < maxDistance) {
            // 只在粒子距离小于maxDistance时绘制连线
            ctx.beginPath();
            ctx.moveTo(particles[i].x, particles[i].y);
            ctx.lineTo(particles[j].x, particles[j].y);

            // 根据距离设置线条透明度
            const opacity = 1 - distance / maxDistance;

            // 根据主题设置线条颜色
            const lineColor =
              theme.palette.mode === 'dark'
                ? `rgba(255, 255, 255, ${opacity * 0.2})`
                : `rgba(42, 92, 170, ${opacity * 0.2})`;

            ctx.strokeStyle = lineColor;
            ctx.lineWidth = opacity * 1.5; // 根据距离调整线宽
            ctx.stroke();
          }
        }
      }
    };

    // 初始化
    handleResize();
    window.addEventListener('resize', handleResize);
    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('touchmove', handleTouchMove);

    // 开始动画
    drawParticles();

    // 清理函数
    return () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('touchmove', handleTouchMove);
      cancelAnimationFrame(animationFrameId);
    };
  }, [theme.palette.mode]);

  return (
    <canvas
      ref={canvasRef}
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        pointerEvents: 'none', // 确保不会干扰下方元素的交互
        zIndex: 0
      }}
    />
  );
}