// F2 — keyboard-only navigation coverage for the in-game shell.
// Runs on chromium-desktop (a stable ≥1024px viewport where the sidebar
// is visible); the behaviours under test are engine-independent.

import { expect, test, type Page } from "@playwright/test";

const SESSION_ID = "f2-a11y-keyboard-session";
const GAME_ID = "10101010-1010-1010-1010-101010101010";

async function bootShell(page: Page): Promise<void> {
	await page.goto("/__debug/store");
	await expect(page.getByTestId("debug-store-ready")).toBeVisible();
	await page.waitForFunction(() => window.__galaxyDebug?.ready === true);
	await page.evaluate(() => window.__galaxyDebug!.clearSession());
	await page.evaluate(
		(id) => window.__galaxyDebug!.setDeviceSessionId(id),
		SESSION_ID,
	);
	await page.goto("/");
	await page.waitForFunction(() => window.__galaxyNav !== undefined);
	await page.evaluate(
		(id) => window.__galaxyNav!.enterGame(id, "map", {}),
		GAME_ID,
	);
	await expect(page.getByTestId("game-shell")).toBeVisible();
	await expect(page.getByTestId("active-view-map")).toBeVisible();
}

test.describe("keyboard navigation", () => {
	test.beforeEach(({}, testInfo) => {
		test.skip(
			testInfo.project.name !== "chromium-desktop",
			"keyboard specs run on chromium-desktop",
		);
	});

	test("skip link is the first focusable and jumps to main content", async ({
		page,
	}) => {
		await bootShell(page);
		await page.keyboard.press("Tab");
		await expect(page.locator(".skip-link")).toBeFocused();
		await page.keyboard.press("Enter");
		await expect(page.locator("#active-view-host")).toBeFocused();
	});

	test("game-mode theme toggle is keyboard activatable", async ({ page }) => {
		await bootShell(page);
		const toggle = page.getByTestId("game-mode-theme-toggle");
		await toggle.focus();
		await expect(toggle).toBeFocused();
		const before = await toggle.getAttribute("data-theme");
		await page.keyboard.press("Enter");
		const after = await toggle.getAttribute("data-theme");
		expect(after).not.toBe(before);
		// The toggle keeps focus across an activation.
		await expect(toggle).toBeFocused();
	});

	test("sidebar tabs move with the arrow keys (roving)", async ({ page }) => {
		await bootShell(page);
		const calculator = page.getByTestId("sidebar-tab-calculator");
		const inspector = page.getByTestId("sidebar-tab-inspector");
		await calculator.click();
		await expect(calculator).toHaveAttribute("aria-selected", "true");
		await calculator.focus();
		await page.keyboard.press("ArrowRight");
		await expect(inspector).toBeFocused();
		await expect(inspector).toHaveAttribute("aria-selected", "true");
	});
});