/* AgentBrain Hero — Abstract neural visualization
   Pure canvas, monochrome, slow elegant motion. */
const { useEffect, useRef } = React;

function BrainCanvas({ dark = false }) {
  const ref = useRef(null);

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

    const NODE_COUNT = 60;
    const nodes = [];

    function resize() {
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      const rect = canvas.parentElement.getBoundingClientRect();
      w = rect.width; h = rect.height;
      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);
    }

    function init() {
      nodes.length = 0;
      const cx = w / 2, cy = h / 2;
      const baseR = Math.min(w, h) * 0.32;
      for (let i = 0; i < NODE_COUNT; i++) {
        // Distribute roughly in concentric ellipsoid
        const a = Math.random() * Math.PI * 2;
        const r = baseR * (0.35 + Math.random() * 0.85);
        const jitterX = (Math.random() - 0.5) * 80;
        const jitterY = (Math.random() - 0.5) * 80;
        nodes.push({
          x: cx + Math.cos(a) * r + jitterX,
          y: cy + Math.sin(a) * r * 0.7 + jitterY,
          ox: cx + Math.cos(a) * r + jitterX,
          oy: cy + Math.sin(a) * r * 0.7 + jitterY,
          phase: Math.random() * Math.PI * 2,
          speed: 0.0004 + Math.random() * 0.0008,
          amp: 8 + Math.random() * 22,
          size: 1 + Math.random() * 2.4,
          weight: Math.random(),
        });
      }
    }

    let mouseX = 0.5, mouseY = 0.5;
    let targetMX = 0.5, targetMY = 0.5;
    function onMove(e) {
      const rect = canvas.getBoundingClientRect();
      targetMX = (e.clientX - rect.left) / rect.width;
      targetMY = (e.clientY - rect.top) / rect.height;
    }

    let t0 = performance.now();
    function frame() {
      const t = performance.now() - t0;
      mouseX += (targetMX - mouseX) * 0.05;
      mouseY += (targetMY - mouseY) * 0.05;

      ctx.clearRect(0, 0, w, h);

      // Update positions
      for (const n of nodes) {
        n.x = n.ox + Math.cos(t * n.speed + n.phase) * n.amp + (mouseX - 0.5) * 30 * n.weight;
        n.y = n.oy + Math.sin(t * n.speed * 1.2 + n.phase) * n.amp + (mouseY - 0.5) * 30 * n.weight;
      }

      // Draw connections
      const maxDist = Math.min(w, h) * 0.18;
      const lineColor = dark ? '255,255,255' : '0,0,0';
      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, dy = a.y - b.y;
          const d = Math.sqrt(dx*dx + dy*dy);
          if (d < maxDist) {
            const alpha = (1 - d / maxDist) * 0.22;
            ctx.strokeStyle = `rgba(${lineColor},${alpha})`;
            ctx.beginPath();
            ctx.moveTo(a.x, a.y);
            ctx.lineTo(b.x, b.y);
            ctx.stroke();
          }
        }
      }

      // Draw nodes
      for (const n of nodes) {
        const pulse = 0.7 + Math.sin(t * 0.0015 + n.phase * 2) * 0.3;
        ctx.fillStyle = `rgba(${lineColor}, ${0.55 * pulse})`;
        ctx.beginPath();
        ctx.arc(n.x, n.y, n.size, 0, Math.PI * 2);
        ctx.fill();
      }

      // Center glow — soft radial
      const cx = w / 2, cy = h / 2;
      const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.min(w, h) * 0.5);
      if (dark) {
        grad.addColorStop(0, 'rgba(255,255,255,0.04)');
        grad.addColorStop(1, 'rgba(0,0,0,0)');
      } else {
        grad.addColorStop(0, 'rgba(0,102,255,0.04)');
        grad.addColorStop(0.5, 'rgba(0,0,0,0.02)');
        grad.addColorStop(1, 'rgba(255,255,255,0)');
      }
      ctx.fillStyle = grad;
      ctx.fillRect(0, 0, w, h);

      raf = requestAnimationFrame(frame);
    }

    resize(); init();
    window.addEventListener('resize', () => { resize(); init(); });
    window.addEventListener('mousemove', onMove);
    frame();
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
    };
  }, [dark]);

  return <canvas ref={ref} className="brain-canvas" style={{ width: '100%', height: '100%', display: 'block' }} />;
}

window.BrainCanvas = BrainCanvas;