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

test.describe('Theme toggle', () => {
	test.beforeEach(async ({ page }) => {
		// Clear any saved theme preference before each test
		await page.goto('/');
		await page.evaluate(() => localStorage.removeItem('theme'));
	});

	test('toggle button is visible in the header', async ({ page }) => {
		await page.goto('/');
		await expect(
			page.getByRole('banner').getByRole('button', { name: /dark mode|light mode/i })
		).toBeVisible();
	});

	test('clicking the toggle switches to dark mode', async ({ page }) => {
		await page.goto('/');
		await page.waitForSelector('[data-hydrated]');

		const html = page.locator('html');
		await expect(html).not.toHaveAttribute('data-theme', 'dark');

		await page
			.getByRole('banner')
			.getByRole('button', { name: /dark mode/i })
			.click();

		await expect(html).toHaveAttribute('data-theme', 'dark');
	});

	test('clicking the toggle again switches back to light mode', async ({ page }) => {
		await page.goto('/');
		await page.waitForSelector('[data-hydrated]');

		await page
			.getByRole('banner')
			.getByRole('button', { name: /dark mode/i })
			.click();
		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');

		await page
			.getByRole('banner')
			.getByRole('button', { name: /light mode/i })
			.click();
		await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
	});

	test('theme persists after page reload', async ({ page }) => {
		await page.goto('/');
		await page.waitForSelector('[data-hydrated]');

		await page
			.getByRole('banner')
			.getByRole('button', { name: /dark mode/i })
			.click();
		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');

		await page.reload();
		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
	});

	test('saved theme is applied before first paint (no flash)', async ({ page }) => {
		// Set dark theme in localStorage before navigating
		await page.goto('/');
		await page.evaluate(() => localStorage.setItem('theme', 'dark'));

		// Intercept the initial HTML to verify data-theme is set immediately
		await page.goto('/');
		const theme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
		expect(theme).toBe('dark');
	});
});