// Keep native geometry, metadata, routing and exports; enrich only typography.
export const isSkillsStory = name => /^strategy-(governance|quality|adoption|measurement|maintenance)(-mobile)?$/.test(name);
const escape = text => text.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;');
export function skillsViewer(html, spec) {
  if (spec.diagram_type !== 'architecture' || spec.components.length !== 6) throw new Error('Skills story contract drift');
  for (const node of spec.components) {
    const pattern = new RegExp(`<g\\b[^>]*data-node-id="${node.id}"[^>]*>[\\s\\S]*?<text data-node-label=[\\s\\S]*?</g>`);
    const match = html.match(pattern);
    if (!match) throw new Error(`Missing Skills node: ${node.id}`);
    const original = match[0];
    const rectangles = [...original.matchAll(/<rect\b[^>]*class="c-[^"]+"[^>]*\/>/g)];
    if (rectangles.length !== 2) throw new Error('Skills shape contract drift');
    const [x,y] = node.pos;
    const lines = node.sublabel.split('\n');
    if ((lines.length < 4 || lines.length > 5) || lines.some(line => line.length > 29) || node.label.length > 25) throw new Error(`Skills copy exceeds capacity: ${node.id}`);
    const text = (value, top, size, attrs) => `<text x="${x+28}" y="${y+top}" font-size="${size}" ${attrs}>${escape(value)}</text>`;
    const content = text(node.tag, 52, 36, 'class="t-muted" data-detail="context"')
      + text(node.label, 118, 42, 'class="t-primary" data-node-label="" font-weight="700"')
      + lines.map((line,i) => text(line, 190+i*46, 36, 'class="t-primary" data-detail="context"')).join('');
    const prefix = original.slice(0,rectangles[1].index+rectangles[1][0].length).replaceAll('rx="6"','rx="0"');
    html = html.replace(original,prefix+content+'</g>');
  }
  const roots = [...html.matchAll(/<svg\b[^>]*role="img"[^>]*>/g)];
  if (roots.length !== 1) throw new Error('Skills SVG contract drift');
  const width = Math.max(...spec.components.map(n=>n.pos[0]+n.size[0]))+40;
  const height = Math.max(...spec.components.map(n=>n.pos[1]+n.size[1]))+40;
  const root = roots[0][0].replace(/viewBox="[^"]*"/,`viewBox="0 0 ${width} ${height}"`);
  // Embedded in SVG so downloaded files retain typography without the viewer.
  html = html.replace(roots[0][0],root+`<style id="eldorado-skills-typography">
    [data-node-id] text {font-family:Arial,sans-serif;}
    .c-grid {opacity:0;}
    [data-node-id] > rect:not(.c-mask) {stroke-width:3;}
  </style>`);
  return html;
}