import { expect, test } from "@playwright/test";
test("HeroUI controls preserve editing, focus, keyboard and overlay behavior", async ({ page }) => {
	const errors: string[] = [];
	page.on("pageerror", (error) => errors.push(error.message));
	await page.goto("/tests/ui/controls.html");
	await page.getByText("Capture audio", { exact: true }).click();
	await expect(page.getByRole("switch", { name: "Capture audio" })).toBeChecked();
	await page.getByRole("button", { name: "Export format" }).click();
	await page.getByRole("option", { name: "GIF" }).click();
	await expect(page.getByTestId("state")).toContainText('"selection":"gif"');
	await page.getByRole("slider", { name: "Padding" }).focus();
	await page.keyboard.press("ArrowRight");
	await expect(page.getByTestId("state")).toContainText('"value":21');
	await page.getByRole("radio", { name: "Square" }).click();
	await expect(page.getByTestId("state")).toContainText('"format":"square"');
	await page.getByRole("tab", { name: "Cursor", exact: true }).click();
	await expect(page.getByRole("tabpanel")).toHaveText("Cursor settings");
	await page.getByRole("button", { name: "Save project", exact: true }).click();
	await expect(page.getByRole("dialog", { name: "Project name" })).toBeVisible();
	await page.getByRole("textbox", { name: "Project name" }).fill("Demo");
	await page.keyboard.press("Escape");
	await expect(page.getByRole("button", { name: "Save project", exact: true })).toBeFocused();
	await page.getByRole("button", { name: "Export options", exact: true }).click();
	await page.getByRole("textbox", { name: "Filename" }).fill("demo.mp4");
	await page.getByRole("switch", { name: "Loop" }).focus();
	await page.keyboard.press("Space");
	await page.getByRole("button", { name: "Export video" }).click();
	await expect(page.getByTestId("state")).toContainText('"action":"export"');
	await page.keyboard.press("Escape");
	await page.getByRole("button", { name: "Actions", exact: true }).click();
	await page.getByRole("menuitem", { name: "Duplicate" }).click();
	await expect(page.getByTestId("state")).toContainText('"action":"duplicate"');
	await page.getByRole("button", { name: "Caption color" }).click();
	await expect(page.getByRole("dialog", { name: "Caption color" })).toBeVisible();
	await page.keyboard.press("Escape");
	await page.getByRole("button", { name: "Notify", exact: true }).click();
	await page.getByRole("button", { name: "Show file" }).click();
	await expect(page.getByTestId("state")).toContainText('"action":"reveal"');
	await page.getByRole("button", { name: "Toggle theme" }).click();
	await page.screenshot({ path: "test-results/controls.png", fullPage: true });
	expect(errors).toEqual([]);
});