import { loadPlaywright, launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
import { writeFile } from 'node:fs/promises';
await loadPlaywright();
const browser = await launchChromium({ headless: true });
try {
  const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
  await page.goto('http://127.0.0.1:6027/iframe.html?id=orgchart--full-composition&viewMode=story');
  await page.waitForFunction(() => document.querySelector('.hm-orgchart-host')?.shadowRoot?.querySelector('.hm-orgchart-toggle'));
  const result = await page.evaluate(async () => {
    const root = document.querySelector('.hm-orgchart-host').shadowRoot;
    await document.fonts.ready;
    const shell = root.querySelector('.hm-orgchart-shell');
    const read = (element, pseudo) => {
      const css = getComputedStyle(element, pseudo);
      return { background: css.backgroundColor, border: css.borderTopColor, borderWidth: css.borderTopWidth, outline: css.outlineColor, outlineWidth: css.outlineWidth, outlineStyle: css.outlineStyle, content: css.content };
    };
    const hierarchy = [...root.querySelectorAll('.hierarchy')].find(element => getComputedStyle(element, '::before').content !== 'none');
    const node = [...root.querySelectorAll('.node')].find(element => getComputedStyle(element, '::before').content !== 'none');
    const backgroundChain = [];
    for (let element = root.querySelector('.hm-orgchart-engine'); element; element = element.parentElement ?? element.getRootNode()?.host) {
      const css = getComputedStyle(element);
      backgroundChain.push({ className: element.className, tag: element.tagName, background: css.backgroundColor, image: css.backgroundImage });
    }
    return { canvas: getComputedStyle(shell).backgroundColor, viewport: read(root.querySelector('.hm-orgchart-viewport')),
      backgroundChain,
      hierarchy: hierarchy ? read(hierarchy, '::before') : null, node: node ? read(node, '::before') : null,
      toggle: read(root.querySelector('.hm-orgchart-toggle')), resolved: Object.fromEntries(['stroke-default', 'stroke-input-focus', 'bg-content', 'bg-surface'].map(key => [key, getComputedStyle(shell).getPropertyValue('--hm-orgchart-resolved-' + key).trim()])) };
  });
  await page.keyboard.press('Tab');
  const focused = await page.evaluate(() => {
    const root = document.querySelector('.hm-orgchart-host').shadowRoot;
    const viewport = root.querySelector('.hm-orgchart-viewport'); viewport.focus();
    const css = getComputedStyle(viewport);
    return { focusVisible: viewport.matches(':focus-visible'), outline: css.outlineColor, width: css.outlineWidth, style: css.outlineStyle };
  });
  await writeFile('test-results/org-chart-quality/boundaries.json', JSON.stringify({ ...result, focused, interpretation: 'Hierarchy connection lines convey parent-child relation; retain contrast REVIEW instead of automatically treating all lines as decorative. Button text identifies the control, frame decoration alone is not automatically SC 1.4.11 failure.' }, null, 2));
  console.log(JSON.stringify({ ...result, focused }));
} finally { await browser.close(); }