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

test.describe('Scenario 02: Theme Engine & UI Persistence', () => {
  test('switches themes via real UI clicks and persists across page reloads', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    const darkToggle = page.locator('[data-testid="theme-toggle-dark"]');
    const lightToggle = page.locator('[data-testid="theme-toggle-light"]');
    const softToggle = page.locator('[data-testid="theme-toggle-soft"]');

    await expect(darkToggle).toBeVisible({ timeout: 15000 });
    await expect(lightToggle).toBeVisible();
    await expect(softToggle).toBeVisible();

    // 1. Switch to Dark Theme
    await darkToggle.click();
    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');

    // 2. Reload and verify Dark Theme persistence
    await page.reload();
    await page.waitForLoadState('domcontentloaded');
    await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');

    // 3. Switch to Light Theme
    await lightToggle.click();
    await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');

    // 4. Switch to Soft Light Theme
    await softToggle.click();
    await expect(page.locator('html')).toHaveAttribute('data-theme', 'soft-light');

    // 5. Reload and verify Soft Light Theme persistence
    await page.reload();
    await page.waitForLoadState('domcontentloaded');
    await expect(page.locator('html')).toHaveAttribute('data-theme', 'soft-light');
  });
});