// Custom inline SVG glyphs for each agent. Geometric, monoline, gold stroke.
// Sized to be drawn inside a 96×96 box.

const GLYPH_PATHS = {
  diamond: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round">
      <path d="M48 8 L88 48 L48 88 L8 48 Z" />
      <path d="M48 24 L72 48 L48 72 L24 48 Z" />
      <circle cx="48" cy="48" r="3" fill="currentColor" />
    </g>
  ),
  target: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round">
      <circle cx="48" cy="48" r="36" />
      <circle cx="48" cy="48" r="22" />
      <circle cx="48" cy="48" r="8" />
      <line x1="48" y1="0" x2="48" y2="20" />
      <line x1="48" y1="76" x2="48" y2="96" />
      <line x1="0" y1="48" x2="20" y2="48" />
      <line x1="76" y1="48" x2="96" y2="48" />
      <circle cx="48" cy="48" r="2" fill="currentColor" />
    </g>
  ),
  radar: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round">
      <circle cx="48" cy="48" r="36" />
      <circle cx="48" cy="48" r="24" />
      <circle cx="48" cy="48" r="12" />
      <line x1="48" y1="48" x2="78" y2="30" />
      <circle cx="78" cy="30" r="2.5" fill="currentColor" />
    </g>
  ),
  pulse: (
    <g stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 48 L26 48 L34 28 L46 70 L56 38 L66 56 L74 48 L90 48" />
    </g>
  ),
  eye: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round">
      <path d="M6 48 C 22 22, 74 22, 90 48 C 74 74, 22 74, 6 48 Z" />
      <circle cx="48" cy="48" r="12" />
      <circle cx="48" cy="48" r="3" fill="currentColor" />
    </g>
  ),
  crosshair: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round">
      <circle cx="48" cy="48" r="34" />
      <line x1="48" y1="6" x2="48" y2="34" />
      <line x1="48" y1="62" x2="48" y2="90" />
      <line x1="6" y1="48" x2="34" y2="48" />
      <line x1="62" y1="48" x2="90" y2="48" />
      <rect x="40" y="40" width="16" height="16" />
    </g>
  ),
  layers: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round">
      <path d="M48 12 L86 32 L48 52 L10 32 Z" />
      <path d="M10 48 L48 68 L86 48" />
      <path d="M10 64 L48 84 L86 64" />
    </g>
  ),
  frame: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none">
      <rect x="10" y="20" width="76" height="56" />
      <path d="M40 36 L62 48 L40 60 Z" fill="currentColor" stroke="none" />
    </g>
  ),
  pen: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 82 L24 60 L66 18 L78 30 L36 72 Z" />
      <line x1="60" y1="24" x2="72" y2="36" />
      <line x1="14" y1="82" x2="22" y2="74" />
    </g>
  ),
  "shield-check": (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <path d="M48 8 L82 22 L82 48 C 82 70, 64 84, 48 88 C 32 84, 14 70, 14 48 L14 22 Z" />
      <path d="M32 48 L44 60 L66 36" />
    </g>
  ),
  gauge: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round">
      <path d="M10 64 A 38 38 0 0 1 86 64" />
      <line x1="48" y1="64" x2="68" y2="32" />
      <circle cx="48" cy="64" r="3" fill="currentColor" />
      <line x1="14" y1="64" x2="20" y2="58" />
      <line x1="48" y1="28" x2="48" y2="36" />
      <line x1="82" y1="64" x2="76" y2="58" />
    </g>
  ),
  lock: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <rect x="18" y="42" width="60" height="42" />
      <path d="M30 42 L30 28 A 18 18 0 0 1 66 28 L66 42" />
      <circle cx="48" cy="62" r="4" fill="currentColor" />
      <line x1="48" y1="62" x2="48" y2="72" />
    </g>
  ),
  speech: (
    <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10 18 L86 18 L86 64 L52 64 L36 80 L36 64 L10 64 Z" />
      <circle cx="32" cy="40" r="2.5" fill="currentColor" />
      <circle cx="48" cy="40" r="2.5" fill="currentColor" />
      <circle cx="64" cy="40" r="2.5" fill="currentColor" />
    </g>
  ),
};

function AgentGlyph({ name, animated = false }) {
  const path = GLYPH_PATHS[name] || GLYPH_PATHS.diamond;
  return (
    <svg
      viewBox="0 0 96 96"
      className={"glyph " + (animated ? "glyph--anim" : "")}
      aria-hidden="true"
    >
      {path}
    </svg>
  );
}

window.AgentGlyph = AgentGlyph;
