"use client";
import { useEffect, useRef } from "react";

export function NeuralNetworkViz() {
  const nodes = [
    { id: 1, cx: 100, cy: 150 },
    { id: 2, cx: 100, cy: 250 },
    
    { id: 3, cx: 300, cy: 100 },
    { id: 4, cx: 300, cy: 200 },
    { id: 5, cx: 300, cy: 300 },
    
    { id: 6, cx: 500, cy: 150 },
    { id: 7, cx: 500, cy: 250 },
    
    { id: 8, cx: 700, cy: 200 },
  ];

  const connections = [
    [1,3], [1,4], [1,5],
    [2,3], [2,4], [2,5],
    
    [3,6], [3,7],
    [4,6], [4,7],
    [5,6], [5,7],
    
    [6,8], [7,8]
  ];

  return (
    <div className="flex items-center justify-center w-full h-[400px] bg-[#0a0a0a] rounded-xl border border-border relative overflow-hidden">
      <svg viewBox="0 0 800 400" className="w-full h-full opacity-80" preserveAspectRatio="xMidYMid meet">
        
        <defs>
          <radialGradient id="nodeGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(59, 130, 246, 0.8)" />
            <stop offset="100%" stopColor="rgba(59, 130, 246, 0)" />
          </radialGradient>
        </defs>

        {connections.map((conn, i) => {
          const n1 = nodes.find(n => n.id === conn[0])!;
          const n2 = nodes.find(n => n.id === conn[1])!;
          return (
            <g key={i}>
              <line 
                x1={n1.cx} y1={n1.cy} x2={n2.cx} y2={n2.cy} 
                stroke="#222" strokeWidth="2" 
              />
              <line 
                x1={n1.cx} y1={n1.cy} x2={n2.cx} y2={n2.cy} 
                stroke="#3b82f6" strokeWidth="2" 
                strokeDasharray="20 150"
                className="animate-[dash_3s_linear_infinite]"
                style={{
                  animationDelay: `${(i * 0.2) % 2}s`
                }}
              />
            </g>
          );
        })}

        {nodes.map((node, i) => (
          <g key={node.id} className="animate-pulse" style={{ animationDelay: `${(i * 0.15) % 1}s` }}>
            <circle cx={node.cx} cy={node.cy} r="30" fill="url(#nodeGlow)" />
            <circle cx={node.cx} cy={node.cy} r="5" fill="#fff" />
          </g>
        ))}

      </svg>

      <style dangerouslySetInnerHTML={{__html: `
        @keyframes dash {
          to {
            stroke-dashoffset: -300;
          }
        }
      `}} />
      <div className="absolute bottom-4 text-zinc-500 text-sm">Neural Network Data Flow</div>
    </div>
  );
}