/**
 * DottedSurface — versão Canvas 2D (vanilla) do componente shadcn que
 * usa Three.js. Desenha uma malha de pontos animados em onda senoidal,
 * dando uma sensação de "superfície ondulando".
 *
 * Adaptado pra projeto sem build step / sem deps. Pode ser sobreposto
 * a qualquer section como background absoluto.
 *
 * Props:
 *   color    — cor RGBA dos pontos (default '20,30,25,0.30' — escuro pra fundos claros)
 *   density  — espaçamento dos pontos em px (default 26)
 */
const DottedSurface = ({ className, color = '20,30,25,0.32', density = 26 }) => {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const dpr = window.devicePixelRatio || 1;
    let raf;
    let count = 0;

    const resize = () => {
      const rect = canvas.getBoundingClientRect();
      canvas.width = Math.max(1, Math.round(rect.width * dpr));
      canvas.height = Math.max(1, Math.round(rect.height * dpr));
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.scale(dpr, dpr);
    };
    resize();

    const SEPARATION = density;
    const SEPARATION_Y = Math.round(density * 0.85);

    const animate = () => {
      const w = canvas.clientWidth;
      const h = canvas.clientHeight;
      ctx.clearRect(0, 0, w, h);

      const cols = Math.ceil(w / SEPARATION) + 2;
      const rows = Math.ceil(h / SEPARATION_Y) + 2;

      for (let ix = 0; ix < cols; ix++) {
        for (let iy = 0; iy < rows; iy++) {
          const baseX = ix * SEPARATION;
          const baseY = iy * SEPARATION_Y;

          // Onda senoidal X+time / Y+time — mesma fórmula do componente original
          const offset =
            Math.sin((ix + count) * 0.30) * 6 +
            Math.sin((iy + count) * 0.50) * 6;
          const y = baseY + offset;

          // Tamanho do dot pulsa levemente em função das mesmas ondas
          const sizeWave = (Math.sin((ix + iy + count) * 0.30) + 1) * 0.5; // 0..1
          const size = 0.9 + sizeWave * 1.1;

          // Opacidade também varia pra dar "respiração"
          const op = 0.55 + sizeWave * 0.45;

          ctx.fillStyle = `rgba(${color.split(',').slice(0, 3).join(',')}, ${
            (parseFloat(color.split(',')[3] || '0.3') * op).toFixed(3)
          })`;
          ctx.beginPath();
          ctx.arc(baseX, y, size, 0, Math.PI * 2);
          ctx.fill();
        }
      }

      count += 0.06;
      raf = requestAnimationFrame(animate);
    };

    animate();

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

    return () => {
      cancelAnimationFrame(raf);
      ro.disconnect();
    };
  }, [color, density]);

  return <canvas ref={canvasRef} className={`dotted-surface ${className || ''}`} />;
};

window.DottedSurface = DottedSurface;