/**
 * Screenshot the toggle Sema tab with intent variations to verify
 * the new visualizations.
 */
import { chromium } from 'playwright';
import { mkdir } from 'node:fs/promises';

const BASE = 'http://localhost:5177';
const OUT = 'g:/tmp/demos';

async function main() {
	await mkdir(OUT, { recursive: true });
	const b = await chromium.launch();
	const ctx = await b.newContext({ viewport: { width: 1280, height: 1100 } });
	const p = await ctx.newPage();
	const errs: string[] = [];
	p.on('console', (m) => {
		if (m.type() === 'error') errs.push(m.text());
	});
	p.on('pageerror', (e) => errs.push('pe: ' + e.message));

	await p.goto(BASE + '/toggle', { waitUntil: 'networkidle' });
	await p.waitForTimeout(500);

	// Click toggle to flip pressed state (so the press intent matters)
	await p.locator('[data-toggle]').first().click();
	await p.waitForTimeout(300);
	await p.screenshot({ path: OUT + '/toggle-live-after-click.png', fullPage: true });

	// Switch to Sema tab
	await p.locator('button.tab:has-text("Sema")').click();
	await p.waitForTimeout(300);
	await p.screenshot({ path: OUT + '/sema-neutral.png', fullPage: true });

	// Pick affirm intent in the in-tab picker
	await p.locator('.intent-chip:has-text("affirm")').click();
	await p.waitForTimeout(300);
	await p.screenshot({ path: OUT + '/sema-affirm.png', fullPage: true });

	// Pick threat intent
	await p.locator('.intent-chip:has-text("threat")').click();
	await p.waitForTimeout(300);
	await p.screenshot({ path: OUT + '/sema-threat.png', fullPage: true });

	// Back to Live tab to confirm color reflects threat
	await p.locator('button.tab:has-text("Live")').click();
	await p.waitForTimeout(300);
	await p.screenshot({ path: OUT + '/toggle-live-threat.png', fullPage: true });

	console.log('errors:', errs.length);
	for (const e of errs) console.log('  ' + e.slice(0, 200));
	await b.close();
}

main().catch((e) => {
	console.error(e);
	process.exit(1);
});