/* Paste into the Firefox console (F12) on the graph page, then save the result:
 *
 *     wl-paste > tests/fixture.json
 *
 * It captures the real graph SVG plus the CSS custom properties it depends on
 * (--required-validated and friends), which are defined outside the SVG and
 * would otherwise be lost. That pair is everything needed to rebuild the page
 * offline and test the extension against it.
 *
 * Firefox may require typing "allow pasting" in the console first.
 */
(() => {
  const svg = document.querySelector('svg.statediagram') || document.querySelector('svg');
  if (!svg) return console.error('no graph SVG found on this page');

  // Custom properties are inherited, so resolve them while the SVG is in place.
  const names = new Set();
  svg.querySelectorAll('[style*="var(--"]').forEach((el) => {
    for (const m of (el.getAttribute('style') || '').matchAll(/var\((--[\w-]+)/g)) names.add(m[1]);
  });
  const computed = getComputedStyle(svg);
  const vars = {};
  for (const n of names) vars[n] = computed.getPropertyValue(n).trim();

  const fixture = {
    url: location.href,
    capturedAt: new Date().toISOString(),
    vars,
    bodyBackground: getComputedStyle(document.body).backgroundColor,
    svg: svg.outerHTML,
  };

  const json = JSON.stringify(fixture, null, 2);
  console.log('vars:', vars, '| svg length:', fixture.svg.length);
  (navigator.clipboard?.writeText(json) || Promise.reject()).then(
    () => console.log('%c copied — now run:  wl-paste > tests/fixture.json', 'color:#22c55e'),
    () => console.log('%c clipboard refused — right-click the object above > Copy', 'color:#f59e0b')
  );
  return fixture;
})();