/* global React */
const { useRef: useRefPC, useEffect: useEffectPC } = React;

function ProcessCanvas() {
  const mountRef = useRefPC(null);

  useEffectPC(() => {
    const canvas = mountRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');

    const resize = () => {
      canvas.width  = canvas.offsetWidth  || canvas.parentElement?.offsetWidth  || 800;
      canvas.height = canvas.offsetHeight || canvas.parentElement?.offsetHeight || 600;
    };
    resize();
    window.addEventListener('resize', resize, { passive: true });

    // Active rings pool
    const rings = [];

    const spawnRing = (x, y, color) => {
      rings.push({
        x,
        y,
        r:     2,
        maxR:  55 + Math.random() * 45,
        alpha: 0.48 + Math.random() * 0.22,
        speed: 1.5 + Math.random() * 1.0,
        color,
        lw:    0.7 + Math.random() * 0.55,
      });
    };

    const STEP_COLORS = ['0,212,170', '0,212,170', '0,212,170'];
    const spawnCounters = [0, 0, 0];
    const BASE_INTERVAL = 48; // frames between spawns at progress = 1

    let raf, last = 0;

    const tick = (now) => {
      raf = requestAnimationFrame(tick);
      if (now - last < 33) return; // ~30 fps
      last = now;

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      const canvasRect = canvas.getBoundingClientRect();
      const steps = document.querySelectorAll('.process-step');

      steps.forEach((step, i) => {
        const progress = parseFloat(step.style.getPropertyValue('--process-progress')) || 0;
        if (progress < 0.05) return;

        // Center the epicenter on the step-number label element
        const numEl = step.querySelector('.process-step-n');
        const nr = (numEl || step).getBoundingClientRect();
        const ex = nr.left - canvasRect.left + nr.width  * 0.40;
        const ey = nr.top  - canvasRect.top  + nr.height * 0.76;

        spawnCounters[i]++;
        const interval = Math.round(BASE_INTERVAL / Math.max(0.12, progress));
        if (spawnCounters[i] >= interval) {
          spawnCounters[i] = 0;
          spawnRing(ex, ey, STEP_COLORS[i]);
          // Occasionally spawn a second, slightly larger ring for density
          if (Math.random() < 0.35) spawnRing(ex, ey, STEP_COLORS[i]);
        }
      });

      // Update and draw all rings
      for (let i = rings.length - 1; i >= 0; i--) {
        const ring = rings[i];
        ring.speed *= 0.976;               // decelerate as ring expands
        ring.r     += Math.max(ring.speed, 0.18);
        const t     = ring.r / ring.maxR;
        const alpha = ring.alpha * (1 - t) * (1 - t); // quadratic fade-out

        if (t >= 1 || alpha < 0.004) { rings.splice(i, 1); continue; }

        ctx.beginPath();
        ctx.arc(ring.x, ring.y, ring.r, 0, Math.PI * 2);
        ctx.strokeStyle = `rgba(${ring.color},${alpha.toFixed(3)})`;
        ctx.lineWidth   = ring.lw * (1 - t * 0.6); // thin out as they expand
        ctx.stroke();
      }
    };

    requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
    };
  }, []);

  return (
    <canvas
      ref={mountRef}
      style={{
        position:      'absolute',
        inset:         0,
        width:         '100%',
        height:        '100%',
        pointerEvents: 'none',
        zIndex:        0,
      }}
    />
  );
}

window.ProcessCanvas = ProcessCanvas;