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

test('every panel tab renders without a console error', async ({ page }) => {
	const errors: string[] = [];
	page.on('pageerror', (e) => errors.push(String(e)));
	page.on('console', (m) => m.type() === 'error' && errors.push(m.text()));

	await login(page);
	await expect(page.locator('.maplibregl-canvas')).toBeVisible({ timeout: 20000 });

	for (const tab of ['scenarios', 'compare', 'wind', 'settings']) {
		await page.getByTestId(`tab-${tab}`).click();
		await expect(page.getByTestId(`tab-${tab}`)).toHaveAttribute('aria-current', 'page');
	}

	// The timeline and both collapse handles are always present.
	await expect(page.getByTestId('timeline')).toBeVisible();
	await expect(page.getByTestId('toggle-left')).toBeVisible();
	await expect(page.getByTestId('toggle-right')).toBeVisible();

	expect(errors).toEqual([]);
});

test('panels collapse, reopen, and remember their state across a reload', async ({ page }) => {
	await login(page);
	await expect(page.getByTestId('panel-left')).toBeVisible();

	await page.getByTestId('toggle-left').click();
	await expect(page.getByTestId('panel-left')).toHaveCount(0);
	await expect(page.getByTestId('toggle-left')).toHaveAttribute('aria-expanded', 'false');

	await page.reload();
	await expect(page.getByTestId('panel-left')).toHaveCount(0);

	await page.getByTestId('toggle-left').click();
	await expect(page.getByTestId('panel-left')).toBeVisible();
});

test('both columns stay open on a narrow viewport, side by side', async ({ page }) => {
	await login(page);
	await page.setViewportSize({ width: 800, height: 720 });

	// Below 1024px the columns share the width instead of excluding each other.
	await expect(page.getByTestId('panel-left')).toBeVisible();
	await expect(page.getByTestId('panel-right')).toBeVisible();

	// ...and they do not overlap: the map keeps a strip between them.
	const left = await page.getByTestId('panel-left').boundingBox();
	const right = await page.getByTestId('panel-right').boundingBox();
	expect(left).not.toBeNull();
	expect(right).not.toBeNull();
	expect(left!.x + left!.width).toBeLessThan(right!.x);

	// Closing one leaves the other untouched.
	await page.getByTestId('toggle-right').click();
	await expect(page.getByTestId('panel-right')).toHaveCount(0);
	await expect(page.getByTestId('panel-left')).toBeVisible();
});