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

test('el modal horizontal usa una sola columna y conserva el foco', async ({ page }, info) => {
	await page.setViewportSize({ width: 812, height: 375 });
	await page.goto('/musica');
	await page.getByRole('button', { name: 'Menú' }).click();
	await page.getByRole('link', { name: 'Entrar', exact: true }).click();
	const dialogo = page.getByRole('dialog');
	await expect(dialogo).toBeVisible();
	await expect(dialogo.getByLabel('Correo')).toBeFocused();
	const columnas = await dialogo
		.locator('.marco')
		.evaluate((e) => getComputedStyle(e).gridTemplateColumns.split(' ').length);
	expect(columnas).toBe(1);
	await page.screenshot({ path: info.outputPath('modal-horizontal.png') });
	await page.keyboard.press('Escape');
	await expect(dialogo).not.toBeVisible();
});

test('la primera escucha queda visible en un móvil de 667 píxeles de alto', async ({
	page
}, info) => {
	await page.setViewportSize({ width: 375, height: 667 });
	await page.emulateMedia({ reducedMotion: 'reduce' });
	await page.goto('/');
	const boton = page.getByRole('button', { name: 'Poner el disco', exact: true });
	await expect(boton).toBeVisible();
	const caja = (await boton.boundingBox())!;
	expect(caja.y + caja.height).toBeLessThan(667);
	await page.screenshot({ path: info.outputPath('portada-movil.png') });
});

test('el taller recibe un catálogo vacío y la navegación vuelve a cargar la música', async ({
	page,
	request
}) => {
	const respuesta = await request.get('/taller/__data.json');
	expect(respuesta.status()).toBe(200);
	const nodos = (await respuesta.json()).nodes as { type: string; data?: unknown }[];
	const datos = nodos.filter((n) => n?.type === 'data').map((n) => unflatten(n.data));
	const layout = datos.find((d) => d && typeof d === 'object' && 'catalogo' in d);
	expect(layout.catalogo).toEqual({ estilos: [], albumes: [], canciones: [] });
	await page.goto('/taller');
	await page
		.getByRole('navigation', { name: 'Principal' })
		.getByRole('link', { name: 'Música', exact: true })
		.click();
	await expect(page.getByRole('link', { name: 'Conocer a los intérpretes →' })).toBeVisible();
	await expect(page.getByText('Cupido sin flechas').first()).toBeVisible();
});