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('/', { waitUntil: 'domcontentloaded' });

    const isMobile = await page.locator('[data-testid="mobile-menu-btn"]').isVisible();

    const openThemeControls = async () => {
      if (isMobile) {
        const drawer = page.locator('[data-testid="mobile-menu-drawer"]');
        if (!(await drawer.isVisible())) {
          await page.locator('[data-testid="mobile-menu-btn"]').click();
          await expect(drawer).toBeVisible();
        }
      }
    };

    await openThemeControls();

    const darkToggle = isMobile
      ? page.locator('[data-testid="mobile-menu-drawer"]').locator('[data-testid="theme-toggle-dark"]')
      : page.locator('[data-testid="theme-toggle-dark"]');
    const lightToggle = isMobile
      ? page.locator('[data-testid="mobile-menu-drawer"]').locator('[data-testid="theme-toggle-light"]')
      : page.locator('[data-testid="theme-toggle-light"]');
    const softToggle = isMobile
      ? page.locator('[data-testid="mobile-menu-drawer"]').locator('[data-testid="theme-toggle-soft"]')
      : 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');

    await openThemeControls();

    // 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');
  });
});