import { cn } from '@/lib/utils';

type NetworkMeshDiagramProps = {
  className?: string;
  variant?: 'full' | 'compact' | 'hero';
};

/** Protected node mesh — sovereign network topology visual */
export function NetworkMeshDiagram({ className, variant = 'full' }: NetworkMeshDiagramProps) {
  const viewBox = variant === 'compact' ? '0 0 200 80' : '0 0 400 240';

  return (
    <svg
      viewBox={viewBox}
      className={cn('h-full w-full text-sovereign-gold', className)}
      role="img"
      aria-label="Sovereign protected node mesh diagram"
    >
      <defs>
        <pattern id="mesh-grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" strokeWidth={0.25} opacity={0.15} />
        </pattern>
      </defs>

      {variant !== 'compact' && (
        <rect width="100%" height="100%" fill="url(#mesh-grid)" opacity={0.5} />
      )}

      {/* Protection ring */}
      <circle
        cx={variant === 'compact' ? 100 : 200}
        cy={variant === 'compact' ? 40 : 120}
        r={variant === 'compact' ? 28 : 72}
        fill="none"
        stroke="currentColor"
        strokeWidth={1}
        opacity={0.35}
      />

      {/* Hub node */}
      <circle
        cx={variant === 'compact' ? 100 : 200}
        cy={variant === 'compact' ? 40 : 120}
        r={variant === 'compact' ? 6 : 10}
        fill="currentColor"
        opacity={0.9}
      />

      {/* Satellite nodes + links */}
      {(variant === 'compact'
        ? [
            [30, 20],
            [170, 20],
            [30, 60],
            [170, 60],
          ]
        : [
            [80, 60],
            [320, 60],
            [60, 180],
            [340, 180],
            [200, 30],
            [200, 210],
          ]
      ).map(([x, y]) => (
        <g key={`${x}-${y}`}>
          <line
            x1={variant === 'compact' ? 100 : 200}
            y1={variant === 'compact' ? 40 : 120}
            x2={x}
            y2={y}
            stroke="currentColor"
            strokeWidth={0.75}
            opacity={0.4}
          />
          <circle cx={x} cy={y} r={variant === 'compact' ? 3 : 5} fill="currentColor" opacity={0.65} />
        </g>
      ))}

      {variant === 'hero' && (
        <g stroke="currentColor" strokeWidth={0.5} fill="none" opacity={0.25}>
          <path d="M200 48 Q240 80 200 120 Q160 160 200 192" />
          <path d="M168 120 Q200 100 232 120" />
        </g>
      )}
    </svg>
  );
}
