/**
 * Sonda del SKIN de audio. La demo de media-player conmuta con el chip
 * `audio` (prop `media`), y ahí entra `audio-player.css` sobre las MISMAS
 * partes — por eso una sonda que sólo carga la página mide el modo vídeo y
 * deja el skin sin medir. Recorre además las cuatro variantes.
 */
import { writeFileSync } from 'node:fs';
import { chromium } from 'playwright';

const [out, url = 'http://localhost:5180/uix/components/media-player'] = process.argv.slice(2);
const PROPS = ['backgroundColor', 'backgroundImage', 'color', 'paddingTop', 'paddingLeft', 'rowGap', 'columnGap', 'fontSize', 'lineHeight', 'blockSize', 'inlineSize', 'borderTopColor', 'borderTopWidth', 'borderTopLeftRadius'];

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
await page.goto(url, { waitUntil: 'networkidle' });
await page.waitForTimeout(500);
await page.getByText('audio', { exact: true }).first().click();
await page.waitForTimeout(300);

const snapshot = async (label: string) =>
	page.evaluate(
		([keys, tag]) => {
			const root = document.querySelector('[data-uix-stage]') ?? document.body;
			const nodes = [...root.querySelectorAll<HTMLElement>('*')].filter((n) =>
				[...n.attributes].some((a) => a.name.startsWith('data-media-player'))
			);
			const rows: Record<string, Record<string, string>> = {};
			nodes.forEach((n, i) => {
				const cs = getComputedStyle(n);
				const key = `${tag}:${i}:${[...n.attributes].map((a) => a.name).join('|')}`;
				rows[key] = Object.fromEntries((keys as string[]).map((k) => [k, cs[k as never] as string]));
			});
			return rows;
		},
		[PROPS, label] as const
	);

const all: Record<string, unknown> = {};
for (const variant of ['card', 'row', 'bar', 'inline']) {
	const chip = page.getByText(variant, { exact: true }).first();
	if (await chip.count()) {
		await chip.click();
		await page.waitForTimeout(200);
	}
	all[variant] = await snapshot(variant);
	console.log(`  ${variant}: ${Object.keys(all[variant] as object).length} nodos`);
}
writeFileSync(out, JSON.stringify(all, null, '\t'));
await browser.close();