import fs from 'node:fs/promises';
import path from 'node:path';
import assert from 'node:assert/strict';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const output = path.resolve('test-results/org-chart-p11');
const browser = await launchChromium({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
const errors = [], checks = [];
page.on('pageerror', error => errors.push(error.message));
page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); });
try {
  for (const [id, selector] of [
    ['full-composition', '.hm-orgchart-composition[data-display-mode="readOnly"]'],
    ['expanded-org-chart', '.hm-orgchart-expanded'],
    ['department-colors', '.hm-orgchart-department-colors'],
    ['logo-personnel-summary', '.hm-orgchart-affiliation-mark'],
  ]) {
    await page.goto(`http://127.0.0.1:6034/iframe.html?id=orgchart--${id}&viewMode=story`);
    await page.locator(selector).first().waitFor();
    await page.evaluate(async () => { await document.fonts.ready; await new Promise(resolve => setTimeout(resolve, 800)); });
    if (id === 'department-colors') {
      const gradients = await page.locator('.hm-orgchart-color-preview .hm-orgchart-color-department-name').evaluateAll(headings => headings.map(heading => getComputedStyle(heading).backgroundImage));
      assert.equal(gradients.length, 6);
      assert.ok(gradients.every(gradient => gradient !== 'none'));
      assert.equal(new Set(gradients).size, 6);
    }
    await page.screenshot({ path: path.join(output, `storybook-${id}.png`) });
    checks.push({ name: id, status: 'PASS' });
  }
  assert.deepEqual(errors, []);
} finally {
  await fs.writeFile(path.join(output, 'storybook-result.json'), JSON.stringify({ checks, errors }, null, 2));
  await browser.close();
}
console.log(`Storybook: ${checks.length} checks, ${errors.length} errors`);