---
/*
  Data-driven architecture diagram (COLOUR_SYSTEM §3.5): surface nodes, accent flow,
  amber for external systems, mono labels. Fully legible with zero interaction; the
  <title>/<desc> give it an accessible text alternative (A5).
*/
interface Node {
  id: string;
  x: number;
  y: number;
  w: number;
  h: number;
  kind: 'internal' | 'primary' | 'external';
  label: string;
  sub?: string;
}
interface Edge {
  d: string;
  kind: 'flow' | 'external';
  label?: string;
  labelX?: number;
  labelY?: number;
}
interface Props {
  diagram: {
    viewBox: string;
    title: string;
    desc: string;
    nodes: Node[];
    edges: Edge[];
  };
  class?: string;
}
const { diagram, class: cls } = Astro.props;

const nodeStroke = {
  internal: 'var(--border-strong)',
  primary: 'var(--accent)',
  external: 'var(--amber)',
};
---

<figure class:list={['overflow-hidden rounded-md border border-line bg-surface-1 p-4', cls]}>
  <svg
    viewBox={diagram.viewBox}
    role="img"
    aria-labelledby="diagram-title diagram-desc"
    class="w-full"
    style="min-width: 640px;"
  >
    <title id="diagram-title">{diagram.title}</title>
    <desc id="diagram-desc">{diagram.desc}</desc>

    {/* Edges first (under nodes) */}
    {
      diagram.edges.map((e) => (
        <g>
          <path
            d={e.d}
            fill="none"
            stroke={e.kind === 'external' ? 'var(--amber)' : 'var(--accent)'}
            stroke-width="1.5"
            stroke-dasharray={e.kind === 'external' ? '4 4' : undefined}
          />
          {e.label && e.labelX !== undefined && e.labelY !== undefined && (
            <text
              x={e.labelX}
              y={e.labelY}
              fill={e.kind === 'external' ? 'var(--amber)' : 'var(--ink-faint)'}
              font-family="var(--font-mono)"
              font-size="11"
              text-anchor="middle"
            >
              {e.label}
            </text>
          )}
        </g>
      ))
    }

    {/* Nodes */}
    {
      diagram.nodes.map((n) => (
        <g>
          <rect
            x={n.x}
            y={n.y}
            width={n.w}
            height={n.h}
            rx="8"
            fill="var(--surface-2)"
            stroke={nodeStroke[n.kind]}
            stroke-opacity={n.kind === 'internal' ? '1' : '0.55'}
          />
          <text
            x={n.x + n.w / 2}
            y={n.y + n.h / 2 + (n.sub ? -4 : 5)}
            fill="var(--ink)"
            font-family="var(--font-body)"
            font-size="14"
            text-anchor="middle"
          >
            {n.label}
          </text>
          {n.sub && (
            <text
              x={n.x + n.w / 2}
              y={n.y + n.h / 2 + 16}
              fill="var(--ink-faint)"
              font-family="var(--font-mono)"
              font-size="11"
              text-anchor="middle"
            >
              {n.sub}
            </text>
          )}
        </g>
      ))
    }
  </svg>
</figure>
