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

async function login(page: Page) {
	await page.goto('/login/');
	await page.fill('#lg-username', 'demo');
	await page.fill('#lg-password', 'demo');
	await page.click('button[type=submit]');
	await expect(page.getByTestId('nav-menu')).toBeVisible();
}

/** Trajectory layers currently on the map, one scene per scenario. */
const trackScenes = (page: Page) =>
	page.evaluate(() => {
		const map = (window as unknown as { _sfMap?: { getStyle(): { layers: { id: string }[] } } })
			._sfMap;
		if (!map) return [];
		return [
			...new Set(
				map
					.getStyle()
					.layers.map((l) => l.id)
					.filter((id) => id.startsWith('sc/'))
					.map((id) => id.split('__')[0])
			)
		];
	});

test('two scenarios overlay independently and visibility toggles one off', async ({ page }) => {
	await login(page);

	// First scenario (auto-created on landing).
	await page.getByTestId('run-btn').click();
	await expect(page.getByTestId('flight-time')).toBeVisible({ timeout: 15000 });
	await expect.poll(() => trackScenes(page)).toHaveLength(1);

	// A second scenario with different parameters draws its own scene.
	await page.getByTestId('add-scenario').click();
	await page.fill('#cp-burst', '25000');
	await page.getByTestId('run-btn').click();
	await expect.poll(() => trackScenes(page)).toHaveLength(2);

	// Both landings are listed for comparison, with a spread between them.
	await page.getByTestId('tab-compare').click();
	await expect(page.getByTestId('compare-table').locator('tbody tr')).toHaveCount(2);
	await expect(page.getByTestId('compare-spread')).toBeVisible();

	// Hiding one scenario removes only its layers.
	await page.getByTestId('tab-scenarios').click();
	await page.getByTestId('toggle-visibility').first().click();
	await expect.poll(() => trackScenes(page)).toHaveLength(1);
});