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

// Visual + structural coverage for the #692 mobile read path (pan/zoom/fit,
// first-load affordance, bottom-sheet person panel).
//
// Snapshot assertions are gated on VISUAL=1 because they need pre-captured
// baselines — regenerate in CI with `playwright test --update-snapshots` after
// intentional UI changes. Structural assertions run unconditionally. The whole
// suite is also subject to the project-wide Chromium-in-CI gate (#363); it
// captures new snapshots rather than replacing the #361 desktop baselines.
const VISUAL = process.env.VISUAL === '1';

const WIDTHS = [320, 414, 768] as const;

test.describe('Stammbaum — mobile read path (#692)', () => {
	// Touch emulation so the canvas reports pointer:coarse and the first-load
	// affordance appears; reduced-motion is already forced project-wide.
	test.use({ hasTouch: true, isMobile: true });

	for (const width of WIDTHS) {
		test(`affordance + controls render at ${width}px`, async ({ page }) => {
			await page.setViewportSize({ width, height: 720 });
			await page.addInitScript(() => localStorage.removeItem('stammbaumAffordanceDismissedAt'));
			await page.goto('/stammbaum');
			await expect(page.getByRole('heading', { name: 'Stammbaum' })).toBeVisible();

			const empty = page.getByRole('heading', { name: 'Noch keine Familienmitglieder' });
			if (await empty.isVisible().catch(() => false)) {
				test.skip(true, 'no seeded family tree in this environment');
			}

			// Bottom-right control cluster with the fit-to-screen affordance.
			await expect(page.getByTestId('fit-to-screen')).toBeVisible();
			// First-load interactive hint (touch only).
			await expect(page.getByRole('status')).toBeVisible();

			if (VISUAL) {
				await expect(page).toHaveScreenshot(`stammbaum-affordance-${width}.png`, {
					animations: 'disabled'
				});
			}
		});
	}

	test('bottom sheet opens on node tap at 414px and preserves the canvas', async ({ page }) => {
		await page.setViewportSize({ width: 414, height: 720 });
		await page.goto('/stammbaum');
		await expect(page.getByRole('heading', { name: 'Stammbaum' })).toBeVisible();

		const node = page.locator('svg[aria-label="Stammbaum"] g[role="button"]').first();
		if ((await node.count()) === 0) test.skip(true, 'no seeded nodes to tap');

		await node.tap();
		const sheet = page.getByRole('dialog');
		await expect(sheet).toBeVisible();

		if (VISUAL) {
			await expect(page).toHaveScreenshot('stammbaum-bottom-sheet-414.png', {
				animations: 'disabled'
			});
		}

		// Dismiss via the backdrop and confirm the sheet closes (state survives).
		await page.getByRole('button', { name: 'Schließen' }).first().click();
		await expect(sheet).toBeHidden();
	});
});