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

test.describe('Reproductor', () => {
	/** El título del tema dentro de la barra, por su enlace exacto. */
	const temaEnBarra = (page: import('@playwright/test').Page, slug: string) =>
		page.getByRole('group', { name: 'Sonando ahora' }).locator(`a[href="/canciones/${slug}"]`);

	test('la barra aparece al reproducir un álbum y anuncia el tema', async ({ page }) => {
		await page.goto('/albumes/como-si-nada');

		const barra = page.getByRole('region', { name: 'Reproductor' });
		await expect(barra).toBeHidden();

		await page.getByRole('button', { name: 'Reproducir', exact: true }).first().click();

		await expect(barra).toBeVisible();
		await expect(temaEnBarra(page, 'como-si-nada')).toBeVisible();

		// Y sigue sonando de verdad, no solo pintada: la posición avanza. Sin esto
		// el test pasaría igual con una barra congelada.
		const posicion = page.getByLabel('Posición de reproducción');
		const antes = Number(await posicion.inputValue());
		await page.waitForTimeout(1500);
		expect(Number(await posicion.inputValue())).toBeGreaterThan(antes);
	});

	test('el paso al tema siguiente carga el orden del disco', async ({ page }) => {
		await page.goto('/albumes/como-si-nada');
		await page.getByRole('button', { name: 'Reproducir', exact: true }).first().click();

		const barra = page.getByRole('region', { name: 'Reproductor' });
		await barra.getByRole('button', { name: 'Tema siguiente' }).click();

		await expect(temaEnBarra(page, 'media-verdad')).toBeVisible();
	});

	test('la reproducción sobrevive al cambiar de página', async ({ page }) => {
		// Es la razón de que la barra viva en el layout raíz: navegar por la web
		// no puede cortar lo que se está escuchando.
		await page.goto('/albumes/como-si-nada');
		await page.getByRole('button', { name: 'Reproducir', exact: true }).first().click();

		const barra = page.getByRole('region', { name: 'Reproductor' });
		await expect(temaEnBarra(page, 'como-si-nada')).toBeVisible();

		await page
			.getByRole('navigation', { name: 'Principal' })
			.getByRole('link', { name: 'Bio' })
			.click();
		await expect(page).toHaveURL('/bio');

		await expect(barra).toBeVisible();
		await expect(temaEnBarra(page, 'como-si-nada')).toBeVisible();
	});

	test('la cola muestra los temas pendientes', async ({ page }) => {
		await page.goto('/albumes/como-si-nada');
		await page.getByRole('button', { name: 'Reproducir', exact: true }).first().click();

		const barra = page.getByRole('region', { name: 'Reproductor' });
		await barra.getByRole('button', { name: 'Ver la cola de reproducción' }).click();

		const cola = page.getByRole('complementary', { name: 'Cola de reproducción' });
		await expect(cola).toBeVisible();
		await expect(cola.getByRole('button', { name: /El último tren/ })).toBeVisible();

		// Saltar desde la cola cambia lo que suena.
		await cola.getByRole('button', { name: /El último tren/ }).click();
		await expect(temaEnBarra(page, 'el-ultimo-tren')).toBeVisible();
	});
});