import React, { useEffect } from 'react';
import './ClickParticle.css';

const ClickParticle = () => {
  useEffect(() => {
    const handleClick = (e) => {
      const colors = [
        '#ffd8cc', '#fbc4ab', '#f5c4d0', '#f4a574', '#e8897a',
        '#ffb4a2', '#fce8e4', '#fdbcb4', '#ff9a8b',
        '#ff6b9d', '#c44569', '#ee5a6f', '#fc5c65',
        '#f8b500', '#ffd93d', '#fed330', '#fa8231',
        '#fd79a8', '#f472b6', '#e07a5f', '#f59e0b',
      ];

      // 更密集的均匀辐射（一次点击，360°均匀分布）
      const particleCount = 16 + Math.floor(Math.random() * 8); // 16-24

      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'click-particle';

        // 均匀角度，无随机抖动，形成整齐的环形辐射
        const angle = (Math.PI * 2 * i) / particleCount;

        // 半径随机，营造层次
        const distance = 90 + Math.random() * 80; // 90-170px
        const targetX = Math.cos(angle) * distance;
        const targetY = Math.sin(angle) * distance;

        // 初始位置（固定坐标系更准确贴合视窗）
        particle.style.left = e.clientX + 'px';
        particle.style.top = e.clientY + 'px';

        // 配色与尺寸
        particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        const size = 4 + Math.random() * 6; // 4-10px
        particle.style.width = size + 'px';
        particle.style.height = size + 'px';

        // 传递目标位移参数
        particle.style.setProperty('--target-x', targetX + 'px');
        particle.style.setProperty('--target-y', targetY + 'px');

        // 动画时长（更自然的缓出）
        const durationMs = 600 + Math.round(Math.random() * 400); // 600-1000ms
        particle.style.animationDuration = durationMs / 1000 + 's';

        document.body.appendChild(particle);

        // 动画完成后清理
        setTimeout(() => {
          particle.remove();
        }, durationMs + 50);
      }

      // 中心爆炸涟漪
      const centerBurst = document.createElement('div');
      centerBurst.className = 'click-burst';
      centerBurst.style.left = e.clientX + 'px';
      centerBurst.style.top = e.clientY + 'px';
      document.body.appendChild(centerBurst);
      setTimeout(() => centerBurst.remove(), 600);
    };

    document.addEventListener('click', handleClick, { passive: true });
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);

  return null;
};

export default ClickParticle;
