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

test('desktop fundus is usable, filterable and keeps its theme', async ({ page }, testInfo) => {
	await page.setViewportSize({ width: 1440, height: 1000 });
	await page.goto('/fundus');

	await expect(
		page.getByRole('heading', { name: 'Gute Stücke, sofort griffbereit.' })
	).toBeVisible();
	await expect(page.getByText('Gestaltungsvorschau: Fundus')).toBeVisible();
	await expect(page.locator('.piece-card')).toHaveCount(4);

	await page.getByRole('searchbox', { name: 'Fundus durchsuchen' }).fill('Pixelart');
	await expect(page.locator('.piece-card')).toHaveCount(1);
	await expect(
		page.getByRole('heading', { name: 'Pixelart, die nicht nostalgisch sein will' })
	).toBeVisible();

	await page.getByRole('button', { name: 'Darstellung: System' }).click();
	await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'light');
	await page.reload();
	await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'light');
	await expect(page.getByRole('button', { name: 'Darstellung: Hell' })).toBeVisible();

	const dimensions = await page.evaluate(() => ({
		scrollWidth: document.documentElement.scrollWidth,
		clientWidth: document.documentElement.clientWidth
	}));
	expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth);
	await page.screenshot({ path: testInfo.outputPath('fundus-desktop.png'), fullPage: true });
});

test('desktop builder shows fundus and run side by side', async ({ page }) => {
	await page.setViewportSize({ width: 1440, height: 1000 });
	await page.goto('/sendungen');

	await expect(page.getByText('Gestaltungsvorschau: Sendungsbau')).toBeVisible();
	await expect(page.locator('.source-pane')).toBeVisible();
	await expect(page.locator('.run-pane')).toBeVisible();
	await expect(page.getByRole('heading', { name: 'Herbstsendung: Kleine Welten' })).toBeVisible();
	await expect(
		page.locator('.show-summary strong').filter({ hasText: '1 Std. 25 Min.' })
	).toBeVisible();

	const boxes = await Promise.all([
		page.locator('.source-pane').boundingBox(),
		page.locator('.run-pane').boundingBox()
	]);
	expect(boxes[0]?.x).toBeLessThan(boxes[1]?.x ?? 0);
});

test('mobile builder switches panes without horizontal scrolling', async ({ page }, testInfo) => {
	await page.setViewportSize({ width: 390, height: 844 });
	await page.goto('/sendungen');

	await expect(page.locator('.run-pane')).toBeVisible();
	await expect(page.locator('.source-pane')).toBeHidden();
	await page.getByRole('button', { name: 'Fundus', exact: true }).click();
	await expect(page.locator('.source-pane')).toBeVisible();
	await expect(page.locator('.run-pane')).toBeHidden();

	const dimensions = await page.evaluate(() => ({
		scrollWidth: document.documentElement.scrollWidth,
		clientWidth: document.documentElement.clientWidth
	}));
	expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth);
	await page.screenshot({ path: testInfo.outputPath('sendungen-mobile.png'), fullPage: true });
});

test('live preview exposes readable prompts and working text controls', async ({ page }) => {
	await page.setViewportSize({ width: 1280, height: 900 });
	await page.goto('/live');

	await expect(page.getByText('Gestaltungsvorschau: Live-Modus')).toBeVisible();
	await expect(page.getByText('Eine Kurbel, ein gelber Knopf und sehr viel Charme')).toBeVisible();
	const before = await page
		.locator('.live-current')
		.evaluate((element) => getComputedStyle(element).getPropertyValue('--prompt-size'));
	await page.getByRole('button', { name: 'Schrift vergrößern' }).click();
	const after = await page
		.locator('.live-current')
		.evaluate((element) => getComputedStyle(element).getPropertyValue('--prompt-size'));
	expect(after).not.toBe(before);
	await page.getByText('Recherche öffnen').click();
	await expect(page.locator('.research-details')).toHaveAttribute('open', '');
});