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

test('alinea la búsqueda con la cabecera y muestra portadas de canciones y álbumes', async ({
	page
}) => {
	for (const tema of ['claro', 'oscuro']) {
		await page.addInitScript((valor) => localStorage.setItem('senzapaura:tema', valor), tema);
		for (const ancho of [1920, 390]) {
			await page.setViewportSize({ width: ancho, height: 1000 });
			await page.goto('/buscar?q=cupido&tipo=musica');
			await page.waitForSelector('html[data-hidratado]');
			const izquierda = await page
				.locator('.cabecera .marca')
				.evaluate((el) => el.getBoundingClientRect().left);
			for (const selector of [
				'.pagina-busqueda h1',
				'.pagina-busqueda form',
				'#titulo-resultados',
				'.resultados article'
			]) {
				const x = await page
					.locator(selector)
					.first()
					.evaluate((el) => el.getBoundingClientRect().left);
				expect(Math.abs(x - izquierda)).toBeLessThanOrEqual(1);
			}
			const album = page.getByRole('img', { name: 'Portada de Cupido sin flechas', exact: true });
			const cancion = page.getByRole('img', {
				name: 'Portada de Cuando tus manos me tocan',
				exact: true
			});
			for (const portada of [album, cancion]) {
				await portada.scrollIntoViewIfNeeded();
				await expect(portada).toBeVisible();
				await expect
					.poll(() =>
						portada.evaluate((img: HTMLImageElement) => img.complete && img.naturalWidth > 0)
					)
					.toBe(true);
			}
			expect(await album.getAttribute('src')).not.toBe(await cancion.getAttribute('src'));
			expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(
				true
			);
			await page.evaluate(() => window.scrollTo(0, 0));
			await page.screenshot({ path: `test-results/busqueda-portadas-${tema}-${ancho}.png` });
		}
	}
});

test('la lupa abre el popup y envía los filtros a la página de resultados', async ({ page }) => {
	await page.goto('/juke-box');
	await page.waitForSelector('html[data-hidratado]');
	const lupa = page.getByRole('link', { name: 'Buscar en Senza Paura', exact: true });
	await lupa.click();
	const dialogo = page.getByRole('dialog', { name: 'Buscar en Senza Paura' });
	await expect(dialogo).toBeVisible();
	await expect(page).toHaveURL('/juke-box');
	await expect(dialogo.getByRole('searchbox')).toBeFocused();
	await page.screenshot({ path: 'test-results/busqueda-popup-escritorio.png' });
	await page.keyboard.press('Escape');
	await expect(dialogo).toBeHidden();
	await expect(lupa).toBeFocused();
	await lupa.click();
	await dialogo.getByRole('searchbox').fill('privacidad');
	await dialogo.getByLabel('Tipo de contenido').selectOption('legal');
	await dialogo.getByRole('combobox', { name: 'Buscar en', exact: true }).selectOption('titulo');
	await dialogo.getByRole('button', { name: 'Buscar', exact: true }).click();
	await expect(page).toHaveURL(/\/buscar\?q=privacidad&tipo=legal&campo=titulo$/);
	await expect(dialogo).toBeHidden();
	await expect(page.locator('.resultados article').first()).toBeVisible();
	await expect(page.locator('.resultados article .eyebrow')).toHaveText(['Documento legal']);
	await expect(page.getByRole('searchbox')).toHaveValue('privacidad');
	await page.screenshot({ path: 'test-results/busqueda-resultados-escritorio.png' });
	await page.locator('.resultados article h3 a').click();
	await expect(page).toHaveURL(/\/legal\//);
});

for (const tema of ['claro', 'oscuro']) {
	test(`popup y resultados en móvil, tema ${tema}`, async ({ page }) => {
		await page.setViewportSize({ width: 390, height: 844 });
		await page.addInitScript((valor) => localStorage.setItem('senzapaura:tema', valor), tema);
		await page.goto('/suscripciones');
		await page.waitForSelector('html[data-hidratado]');
		await page.getByRole('button', { name: 'Menú', exact: true }).click();
		await page.getByRole('link', { name: 'Buscar en Senza Paura', exact: true }).click();
		const dialogo = page.getByRole('dialog', { name: 'Buscar en Senza Paura' });
		await expect(dialogo).toBeVisible();
		await expect(dialogo.getByRole('searchbox')).toBeFocused();
		await page.screenshot({ path: `test-results/busqueda-popup-movil-${tema}.png` });
		await dialogo.getByRole('searchbox').fill('cupido');
		await dialogo.getByLabel('Tipo de contenido').selectOption('musica');
		await dialogo.getByRole('button', { name: 'Buscar', exact: true }).click();
		await expect(page.locator('.resultados article').first()).toBeVisible();
		await expect(dialogo).toBeHidden();
		expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(
			true
		);
		await page.screenshot({
			path: `test-results/busqueda-resultados-movil-${tema}.png`,
			fullPage: true
		});
	});
}

test('permite refinar la consulta y volver atrás conservando los filtros', async ({ page }) => {
	await page.goto('/buscar?q=cupido&tipo=musica&campo=titulo');
	await page.waitForSelector('html[data-hidratado]');
	await expect(page.locator('.resultados article').first()).toBeVisible();
	await page.getByRole('searchbox').fill('zzzinexistentezzz');
	await page.getByRole('button', { name: 'Buscar', exact: true }).click();
	await expect(page.getByText('No encontramos coincidencias', { exact: false })).toBeVisible();
	await page.goBack();
	await expect(page.getByRole('searchbox')).toHaveValue('cupido');
	await expect(page.getByLabel('Tipo de contenido')).toHaveValue('musica');
	await expect(page.getByRole('combobox', { name: 'Buscar en', exact: true })).toHaveValue(
		'titulo'
	);
	await page.getByRole('link', { name: 'Buscar en Senza Paura', exact: true }).click();
	await expect(page.getByRole('dialog').getByRole('searchbox')).toHaveValue('cupido');
});

test('el enlace y el formulario también funcionan sin JavaScript', async ({ browser, baseURL }) => {
	const contexto = await browser.newContext({ javaScriptEnabled: false, baseURL });
	const page = await contexto.newPage();
	try {
		await page.goto('/juke-box');
		await page.getByRole('link', { name: 'Buscar en Senza Paura', exact: true }).click();
		await expect(page).toHaveURL('/buscar');
		await page.getByRole('searchbox').fill('privacidad');
		await page.getByLabel('Tipo de contenido').selectOption('legal');
		await page.getByRole('button', { name: 'Buscar', exact: true }).click();
		await expect(page.locator('.resultados article').first()).toBeVisible();
	} finally {
		await contexto.close();
	}
});