// Subtle chess-themed particle background
// Tiny pawns, dots, and crosses drifting behind everything. Mouse parallax is gentle.

function ChessParticles({ dark, accent }) {
  const canvasRef = React.useRef(null);
  const mouseRef = React.useRef({ x: 0, y: 0 });
  const particlesRef = React.useRef([]);
  const rafRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');

    let dpr = Math.min(window.devicePixelRatio || 1, 2);
    let W = 0, H = 0;

    const resize = () => {
      W = window.innerWidth;
      H = window.innerHeight;
      canvas.width = W * dpr;
      canvas.height = H * dpr;
      canvas.style.width = W + 'px';
      canvas.style.height = H + 'px';
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };

    const SHAPES = ['dot', 'dot', 'dot', 'dot', 'cross', 'cross', 'square']; // dots dominate
    const initParticles = () => {
      const count = Math.min(40, Math.floor((W * H) / 38000));
      particlesRef.current = Array.from({ length: count }, () => ({
        x: Math.random() * W,
        y: Math.random() * H,
        vx: (Math.random() - 0.5) * 0.08,
        vy: -0.04 - Math.random() * 0.08, // gentle upward drift
        r: 0.8 + Math.random() * 1.6,
        shape: SHAPES[Math.floor(Math.random() * SHAPES.length)],
        a: 0.05 + Math.random() * 0.18,
        phase: Math.random() * Math.PI * 2,
        speed: 0.0008 + Math.random() * 0.0014,
      }));
    };

    const onMouse = (e) => {
      mouseRef.current.x = (e.clientX / W - 0.5) * 2; // -1..1
      mouseRef.current.y = (e.clientY / H - 0.5) * 2;
    };

    const drawParticle = (p, t) => {
      const mx = mouseRef.current.x * 8; // very subtle parallax
      const my = mouseRef.current.y * 8;
      const wob = Math.sin(t * p.speed + p.phase) * 0.6;
      const x = p.x + mx;
      const y = p.y + my + wob;
      const c = dark ? '255,255,255' : '20,18,30';
      ctx.fillStyle = `rgba(${c},${p.a})`;
      ctx.strokeStyle = `rgba(${c},${p.a})`;
      ctx.lineWidth = 0.8;

      if (p.shape === 'dot') {
        ctx.beginPath();
        ctx.arc(x, y, p.r, 0, Math.PI * 2);
        ctx.fill();
      } else if (p.shape === 'square') {
        ctx.fillRect(x - p.r, y - p.r, p.r * 2, p.r * 2);
      } else if (p.shape === 'cross') {
        ctx.beginPath();
        ctx.moveTo(x - p.r, y); ctx.lineTo(x + p.r, y);
        ctx.moveTo(x, y - p.r); ctx.lineTo(x, y + p.r);
        ctx.stroke();
      }
    };

    let last = performance.now();
    const tick = (now) => {
      const dt = Math.min(50, now - last);
      last = now;
      ctx.clearRect(0, 0, W, H);

      const ps = particlesRef.current;
      for (let i = 0; i < ps.length; i++) {
        const p = ps[i];
        p.x += p.vx * dt;
        p.y += p.vy * dt;
        // wrap
        if (p.y < -10) { p.y = H + 10; p.x = Math.random() * W; }
        if (p.x < -10) p.x = W + 10;
        if (p.x > W + 10) p.x = -10;
        drawParticle(p, now);
      }

      rafRef.current = requestAnimationFrame(tick);
    };

    resize();
    initParticles();
    rafRef.current = requestAnimationFrame(tick);
    window.addEventListener('resize', () => { resize(); initParticles(); });
    window.addEventListener('mousemove', onMouse, { passive: true });

    return () => {
      cancelAnimationFrame(rafRef.current);
      window.removeEventListener('mousemove', onMouse);
    };
  }, [dark, accent]);

  return (
    <canvas ref={canvasRef} aria-hidden="true" style={{
      position: 'fixed', inset: 0, zIndex: 0,
      pointerEvents: 'none',
      mixBlendMode: dark ? 'screen' : 'multiply',
    }} />
  );
}

window.ChessParticles = ChessParticles;