"use client";

import * as React from "react";

interface DataFlowProps {
  className?: string;
  lines?: number;
  speed?: "slow" | "normal" | "fast";
}

export const DataFlow: React.FC<DataFlowProps> = ({
  className = "",
  lines = 3,
  speed = "normal",
}) => {
  const speedMap = { slow: "8s", normal: "5s", fast: "3s" };
  const duration = speedMap[speed];

  return (
    <div
      className={`relative w-full overflow-hidden ${className}`}
      aria-hidden="true"
    >
      <svg
        viewBox="0 0 1200 40"
        className="w-full h-8 md:h-10"
        preserveAspectRatio="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        {Array.from({ length: lines }).map((_, i) => {
          const y = 8 + (i * 24) / lines;
          const delay = i * 0.8;
          return (
            <g key={i}>
              {/* Static trace line */}
              <line
                x1="0"
                y1={y}
                x2="1200"
                y2={y}
                stroke="rgba(226, 232, 240, 0.3)"
                strokeWidth="0.5"
              />
              {/* Animated data packet */}
              <circle r="2" fill="rgba(148, 163, 184, 0.6)">
                <animateMotion
                  dur={duration}
                  repeatCount="indefinite"
                  begin={`${delay}s`}
                  path={`M-20,${y} L1220,${y}`}
                />
              </circle>
              {/* Trailing glow */}
              <circle r="6" fill="rgba(148, 163, 184, 0.08)">
                <animateMotion
                  dur={duration}
                  repeatCount="indefinite"
                  begin={`${delay}s`}
                  path={`M-20,${y} L1220,${y}`}
                />
              </circle>
              {/* Secondary packet (opposite direction, slower) */}
              <rect
                width="12"
                height="1"
                rx="0.5"
                fill="rgba(203, 213, 225, 0.3)"
              >
                <animateMotion
                  dur={`${parseFloat(duration) * 1.4}s`}
                  repeatCount="indefinite"
                  begin={`${delay + 2}s`}
                  path={`M1220,${y + 2} L-20,${y + 2}`}
                />
              </rect>
            </g>
          );
        })}

        {/* Junction nodes */}
        {[200, 500, 800, 1050].map((x, i) => (
          <g key={`node-${i}`}>
            <circle cx={x} cy="20" r="2" fill="rgba(203, 213, 225, 0.4)">
              <animate
                attributeName="r"
                values="1.5;2.5;1.5"
                dur="3s"
                begin={`${i * 0.7}s`}
                repeatCount="indefinite"
              />
            </circle>
            <circle
              cx={x}
              cy="20"
              r="6"
              fill="none"
              stroke="rgba(203, 213, 225, 0.15)"
              strokeWidth="0.5"
            >
              <animate
                attributeName="r"
                values="4;8;4"
                dur="3s"
                begin={`${i * 0.7}s`}
                repeatCount="indefinite"
              />
              <animate
                attributeName="opacity"
                values="0.3;0;0.3"
                dur="3s"
                begin={`${i * 0.7}s`}
                repeatCount="indefinite"
              />
            </circle>
          </g>
        ))}
      </svg>
    </div>
  );
};
