/**
 * M-series (masthead) — Fase 5.2
 *
 * Every top-level screen pairs an uppercase label (data-testid="masthead-label")
 * directly above a big title (data-testid="masthead-title"). The pattern holds
 * on both mobile and desktop.
 */
import { test, expect, devices } from '@playwright/test';
import { USERS } from '../fixtures/users.js';
import { loginAs } from '../fixtures/login.js';

const MOBILE = devices['iPhone 13'].viewport;

test.describe('Screen masthead — label + title pair on every top-level route', () => {
	test.beforeEach(async ({ page }) => {
		await page.setViewportSize(MOBILE);
		await loginAs(page, USERS.borja);
	});

	const routes: Array<{ path: string; labelMatches: RegExp }> = [
		{ path: '/lists', labelMatches: /workspace|espacio/i },
		{ path: '/tasks', labelMatches: /task manager|tareas/i },
		{ path: '/notes', labelMatches: /repository|repositorio/i },
		{ path: '/search', labelMatches: /omni-search|buscar/i }
	];

	for (const { path, labelMatches } of routes) {
		test(`M-05 ${path}: renders masthead-label + masthead-title`, async ({ page }) => {
			await page.goto(path);
			const label = page.getByTestId('masthead-label');
			const title = page.getByTestId('masthead-title');
			await expect(label).toBeVisible({ timeout: 15_000 });
			await expect(title).toBeVisible();
			await expect(label).toHaveText(labelMatches);
		});
	}
});