// pixel-field.jsx — sparse drifting white pixels behind the dark UI.
// Canvas-based so it stays cheap. Renders as an absolutely-positioned
// layer that fills its parent. Pixels are tiny (1-2px), dim, and slow.

function PixelField({ count = 22, color = '#ffffff', maxOpacity = 0.55, speed = 1, enabled = true }) {
  const canvasRef = React.useRef(null);
  const rafRef = React.useRef(null);

  React.useEffect(() => {
    if (!enabled) return;
    const cv = canvasRef.current;
    if (!cv) return;
    const ctx = cv.getContext('2d');
    let w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
    const pixels = [];

    const seed = () => {
      pixels.length = 0;
      for (let i = 0; i < count; i++) {
        pixels.push({
          x: Math.random() * w,
          y: Math.random() * h,
          // 70% are 1px squares, 30% are 2px — visual rhythm
          s: Math.random() < 0.7 ? 1 : 2,
          // Slow drift
          vx: (Math.random() - 0.5) * 0.12 * speed,
          vy: (Math.random() - 0.5) * 0.12 * speed,
          // Twinkle phase
          phase: Math.random() * Math.PI * 2,
          // Twinkle speed
          ps: 0.4 + Math.random() * 0.8,
          // Base brightness multiplier
          a: 0.25 + Math.random() * 0.75,
        });
      }
    };

    const resize = () => {
      const r = cv.getBoundingClientRect();
      w = r.width; h = r.height;
      cv.width = Math.round(w * dpr);
      cv.height = Math.round(h * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      seed();
    };

    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(cv);

    let last = performance.now();
    const tick = (now) => {
      const dt = Math.min(80, now - last);
      last = now;
      ctx.clearRect(0, 0, w, h);
      const t = now / 1000;
      for (const p of pixels) {
        p.x += p.vx * dt; p.y += p.vy * dt;
        // Wrap
        if (p.x < -2) p.x = w + 2;
        if (p.x > w + 2) p.x = -2;
        if (p.y < -2) p.y = h + 2;
        if (p.y > h + 2) p.y = -2;
        const tw = 0.55 + 0.45 * Math.sin(t * p.ps + p.phase);
        const alpha = Math.max(0, Math.min(1, p.a * tw * maxOpacity));
        ctx.fillStyle = color;
        ctx.globalAlpha = alpha;
        ctx.fillRect(Math.round(p.x), Math.round(p.y), p.s, p.s);
      }
      ctx.globalAlpha = 1;
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(rafRef.current);
      ro.disconnect();
    };
  }, [count, color, maxOpacity, speed, enabled]);

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

Object.assign(window, { PixelField });