/**
 * Verify the eidos toggle reflects intent + color in the on state.
 * Sets pressed=true via the controls switch, then cycles intents.
 */
import { chromium } from 'playwright';
import { mkdir } from 'node:fs/promises';

const BASE = process.env.BASE_URL ?? '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());
	});

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

	// Find the "pressed" control switch and click it (so the toggle is ON).
	const pressedSwitch = p
		.locator('.controls-grid .switch:has(span:text("pressed")) input')
		.first();
	await pressedSwitch.check();
	await p.waitForTimeout(200);

	// Enable checkMark + icon
	await p.locator('.controls-grid .switch:has(span:text("checkMark")) input').check();
	await p.locator('.controls-grid .switch:has(span:text("icon (slot)")) input').check();
	await p.waitForTimeout(200);

	// Cycle intents and capture each
	for (const i of ['neutral', 'affirm', 'risk', 'threat'] as const) {
		const select = p.locator('.controls-grid select').first();
		await select.selectOption(i);
		await p.waitForTimeout(200);
		// Get just the toggle button DOM state
		const dataColor = await p.locator('[data-toggle]').getAttribute('data-color');
		const dataState = await p.locator('[data-toggle]').getAttribute('data-state');
		console.log(`intent=${i} → data-color=${dataColor} data-state=${dataState}`);
		await p.screenshot({ path: `${OUT}/toggle-on-${i}.png`, fullPage: false, clip: { x: 280, y: 380, width: 700, height: 200 } });
	}

	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);
});