// Subtle animated node graph inspired by the IR Soluciones logomark.
// Deliberately abstract — does NOT recreate the logo; just echoes the visual language.
const { useEffect, useRef } = React;

function Graph({ visible = true }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!visible) return;
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    let w, h;

    const nodes = [];
    const NODE_COUNT = 18;
    const seedRand = (s) => () => {
      s = (s * 9301 + 49297) % 233280;
      return s / 233280;
    };
    const rand = seedRand(42);
    for (let i = 0; i < NODE_COUNT; i++) {
      nodes.push({
        x: rand(),
        y: rand(),
        vx: (rand() - 0.5) * 0.00045,
        vy: (rand() - 0.5) * 0.00045,
        r: 2.2 + rand() * 2.5,
        pulsePhase: rand() * Math.PI * 2,
        hero: i === 3 || i === 11
      });
    }

    const resize = () => {
      const rect = canvas.getBoundingClientRect();
      w = rect.width; h = rect.height;
      canvas.width = w * devicePixelRatio;
      canvas.height = h * devicePixelRatio;
      ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
    };
    resize();
    window.addEventListener('resize', resize);

    let t = 0;
    const draw = () => {
      t += 0.012;
      ctx.clearRect(0, 0, w, h);

      // Move nodes with gentle drift + bouncing
      nodes.forEach((n) => {
        n.x += n.vx;
        n.y += n.vy;
        if (n.x < 0.04 || n.x > 0.96) n.vx *= -1;
        if (n.y < 0.04 || n.y > 0.96) n.vy *= -1;
      });

      // Draw connections between nearby nodes
      ctx.lineWidth = 1;
      for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
          const a = nodes[i], b = nodes[j];
          const dx = (a.x - b.x) * w;
          const dy = (a.y - b.y) * h;
          const d = Math.sqrt(dx*dx + dy*dy);
          const max = Math.min(w, h) * 0.3;
          if (d < max) {
            const baseAlpha = (1 - d / max);
            // Pulse a signal along certain edges
            const pulse = 0.5 + 0.5 * Math.sin(t * 0.8 + i * 0.7 + j * 0.3);
            const alpha = baseAlpha * (0.14 + pulse * 0.14);
            if (a.hero || b.hero) {
              ctx.strokeStyle = `rgba(30, 58, 255, ${alpha * 1.2})`;
            } else {
              ctx.strokeStyle = `rgba(20, 20, 59, ${alpha})`;
            }
            ctx.beginPath();
            ctx.moveTo(a.x * w, a.y * h);
            ctx.lineTo(b.x * w, b.y * h);
            ctx.stroke();
          }
        }
      }

      // Draw nodes
      nodes.forEach((n) => {
        const cx = n.x * w, cy = n.y * h;
        const pulse = 0.5 + 0.5 * Math.sin(t * 1.2 + n.pulsePhase);
        if (n.hero) {
          const halo = n.r * 3 + pulse * 4;
          ctx.fillStyle = `rgba(30, 58, 255, ${0.12 + pulse * 0.1})`;
          ctx.beginPath(); ctx.arc(cx, cy, halo, 0, Math.PI * 2); ctx.fill();
          ctx.fillStyle = '#1e3aff';
          ctx.beginPath(); ctx.arc(cx, cy, n.r + 0.5, 0, Math.PI * 2); ctx.fill();
        } else {
          ctx.fillStyle = `rgba(20, 20, 59, ${0.35 + pulse * 0.15})`;
          ctx.beginPath(); ctx.arc(cx, cy, n.r, 0, Math.PI * 2); ctx.fill();
          ctx.fillStyle = '#f6f5f1';
          ctx.beginPath(); ctx.arc(cx, cy, Math.max(n.r - 1.2, 0.6), 0, Math.PI * 2); ctx.fill();
        }
      });

      // Occasional data packet traveling along a connection
      const packetCount = 3;
      for (let p = 0; p < packetCount; p++) {
        const phase = (t * 0.25 + p / packetCount) % 1;
        const aIdx = (p * 5) % nodes.length;
        const bIdx = (p * 5 + 3) % nodes.length;
        const a = nodes[aIdx], b = nodes[bIdx];
        const px = (a.x + (b.x - a.x) * phase) * w;
        const py = (a.y + (b.y - a.y) * phase) * h;
        ctx.fillStyle = 'rgba(30, 58, 255, 0.7)';
        ctx.beginPath(); ctx.arc(px, py, 1.6, 0, Math.PI * 2); ctx.fill();
      }

      raf = requestAnimationFrame(draw);
    };
    draw();

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

  if (!visible) return null;
  return (
    <canvas
      ref={canvasRef}
      className="hero-graph"
      aria-hidden="true"
      style={{ width: '100%', height: '100%' }}
    />
  );
}

window.Graph = Graph;