/* FauxPathViz — CSS-rendered path visualization matching Fish-Eye's dark theme */

const PathNode = ({ x, y, color, label, latency }) => (
  <g>
    <circle cx={x} cy={y} r={12} fill={`${color}20`} stroke={color} strokeWidth={2} />
    <circle cx={x} cy={y} r={5} fill={color} />
    {label && <text x={x} y={y - 20} textAnchor="middle" fill="#94a3b8" fontSize="8" fontFamily="'JetBrains Mono', monospace">{label}</text>}
    {latency && <text x={x} y={y + 24} textAnchor="middle" fill="#64748b" fontSize="7" fontFamily="'JetBrains Mono', monospace">{latency}</text>}
  </g>
);

const FauxPathViz = () => {
  const nodes = [
    { x: 40, y: 80, color: '#0ea5e9', label: 'Source', latency: '' },
    { x: 120, y: 60, color: '#22c55e', label: '10.0.0.1', latency: '1.2ms' },
    { x: 210, y: 50, color: '#22c55e', label: '172.16.0.1', latency: '3.8ms' },
    { x: 300, y: 70, color: '#22c55e', label: '192.168.1.1', latency: '8.4ms' },
    { x: 390, y: 45, color: '#22c55e', label: '10.10.0.1', latency: '12.1ms' },
    { x: 480, y: 65, color: '#f97316', label: '10.20.0.1', latency: '34.7ms' },
    { x: 570, y: 55, color: '#ef4444', label: '10.30.0.1', latency: '89.2ms' },
    { x: 660, y: 50, color: '#ef4444', label: '10.40.0.1', latency: '112.4ms' },
    { x: 750, y: 70, color: '#22c55e', label: '10.50.0.1', latency: '28.3ms' },
    { x: 840, y: 60, color: '#22c55e', label: '10.60.0.1', latency: '22.1ms' },
    { x: 920, y: 80, color: '#0ea5e9', label: 'Target', latency: '' },
  ];

  // Branch path
  const branch = [
    { x: 300, y: 70 },
    { x: 340, y: 130, color: '#22c55e', label: '10.15.0.1', latency: '15.6ms' },
    { x: 420, y: 150, color: '#f97316', label: '10.15.0.2', latency: '42.3ms' },
    { x: 500, y: 130, color: '#22c55e', label: '10.15.0.3', latency: '19.8ms' },
  ];

  const pathD = nodes.map((n, i) => `${i === 0 ? 'M' : 'L'} ${n.x} ${n.y}`).join(' ');
  const branchD = `M ${branch[0].x} ${branch[0].y} L ${branch[1].x} ${branch[1].y} L ${branch[2].x} ${branch[2].y} L ${branch[3].x} ${branch[3].y}`;

  return (
    <div style={{ background: '#0b1120', borderRadius: 12, border: '1px solid rgba(148,163,184,0.12)', overflow: 'hidden', fontFamily: "'Inter', system-ui, sans-serif" }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 16px', borderBottom: '1px solid rgba(148,163,184,0.08)' }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: '#e2e8f0' }}>Network Topology</span>
        <div style={{ display: 'flex', gap: 4 }}>
          {['⊖', '⊕', '◇', '⛶'].map((ic, i) => (
            <div key={i} style={{ width: 24, height: 24, borderRadius: 6, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(148,163,184,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: '#94a3b8' }}>{ic}</div>
          ))}
        </div>
      </div>
      <svg width="960" height="190" viewBox="0 0 960 190" style={{ display: 'block', width: '100%', height: 'auto' }}>
        {/* Grid lines */}
        {[0,48,96,144,192].map(y => <line key={y} x1="0" y1={y} x2="960" y2={y} stroke="rgba(148,163,184,0.04)" />)}
        {/* Connection lines */}
        <path d={pathD} fill="none" stroke="rgba(34,197,94,0.3)" strokeWidth={1.5} />
        <path d={branchD} fill="none" stroke="rgba(34,197,94,0.2)" strokeWidth={1.5} strokeDasharray="4 3" />
        {/* Main nodes */}
        {nodes.map((n, i) => <PathNode key={i} {...n} />)}
        {/* Branch nodes */}
        {branch.slice(1).map((n, i) => <PathNode key={`b${i}`} x={n.x} y={n.y} color={n.color} label={n.label} latency={n.latency} />)}
      </svg>
    </div>
  );
};

window.FauxPathViz = FauxPathViz;