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

test.describe('Controles del Jukebox sin cambios en la base de datos', () => {
	test.skip(process.env.E2E_JUKEBOX !== '1', 'La galería solo existe en desarrollo.');
	test('Play inicia, pausa y recupera la programación con acciones coherentes', async ({
		page
	}) => {
		await page.goto('/__diseno/reproductor');
		await page.locator('html[data-hidratado]').waitFor();
		const barra = page.getByRole('region', { name: 'Reproductor', exact: true });
		const posicion = barra.getByRole('slider', { name: 'Posición de reproducción' });
		await page.getByRole('button', { name: 'Play JukeBox', exact: true }).click();
		await expect.poll(() => posicion.inputValue().then(Number)).toBeGreaterThan(0);
		const titulo = await barra.getByRole('group', { name: 'Sonando ahora' }).innerText();
		await page.getByRole('button', { name: 'Pausar Jukebox', exact: true }).click();
		await expect(barra).toContainText('En pausa');
		await expect(page.getByRole('button', { name: 'Detener Jukebox', exact: true })).toHaveCount(0);
		await page.getByRole('button', { name: 'Continuar Jukebox', exact: true }).click();
		await page.getByRole('button', { name: 'Elegir canción manual', exact: true }).click();
		await expect(barra).toContainText('Vuelve al terminar');
		await expect(page.getByRole('button', { name: 'Detener Jukebox', exact: true })).toHaveCount(0);
		await expect(barra.getByRole('button', { name: 'Cancelar reanudación' })).toBeVisible();
		await page.getByRole('button', { name: 'Continuar Jukebox', exact: true }).click();
		await expect(barra.getByRole('group', { name: 'Sonando ahora' })).toHaveText(titulo);
		await page.getByRole('button', { name: 'Limpiar prueba', exact: true }).click();
	});

	test('mantiene el transporte centrado con y sin Jukebox, también en escucha manual', async ({
		page
	}) => {
		await page.goto('/__diseno/reproductor');
		await page.locator('html[data-hidratado]').waitFor();
		for (const estado of [
			'Reproducción normal',
			'Iniciar programación de prueba',
			'Elegir canción manual'
		]) {
			await page.getByRole('button', { name: estado, exact: true }).click();
			for (const width of [3801, 1920, 1440, 1280, 1024, 838, 768, 390]) {
				await page.setViewportSize({ width, height: 1000 });
				const geometria = await page
					.getByRole('region', { name: 'Reproductor' })
					.evaluate((barra) => {
						const r = barra.getBoundingClientRect();
						const b = barra.querySelector('.principal')!.getBoundingClientRect();
						return {
							desvio: Math.abs(b.x + b.width / 2 - r.x - r.width / 2),
							desborde: document.documentElement.scrollWidth - document.documentElement.clientWidth
						};
					});
				expect(geometria.desvio, `${estado} a ${width}px`).toBeLessThanOrEqual(1);
				expect(geometria.desborde).toBe(0);
			}
		}
		await page.getByRole('button', { name: 'Limpiar prueba', exact: true }).click();
	});
});