const { test, expect } = require('@playwright/test');

test.describe('Theme Toggle Tests', () => {
  test('theme toggle should cycle through modes', async ({ page }) => {
    // Serve the site locally for testing
    await page.goto('http://localhost:8080');
    
    // Get the theme toggle button
    const themeToggle = await page.locator('#themeToggle');
    
    // Verify initial state (should be auto)
    let ariaLabel = await themeToggle.getAttribute('aria-label');
    expect(ariaLabel).toBe('Theme mode: Auto');
    
    // Click to change to light mode
    await themeToggle.click();
    ariaLabel = await themeToggle.getAttribute('aria-label');
    expect(ariaLabel).toBe('Theme mode: Light');
    
    // Verify data-theme attribute is set to light
    const dataTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
    expect(dataTheme).toBe('light');
    
    // Click to change to dark mode
    await themeToggle.click();
    ariaLabel = await themeToggle.getAttribute('aria-label');
    expect(ariaLabel).toBe('Theme mode: Dark');
    
    // Verify data-theme attribute is set to dark
    const darkDataTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
    expect(darkDataTheme).toBe('dark');
    
    // Click to change back to auto mode
    await themeToggle.click();
    ariaLabel = await themeToggle.getAttribute('aria-label');
    expect(ariaLabel).toBe('Theme mode: Auto');
    
    // Verify data-theme attribute is removed
    const autoDataTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
    expect(autoDataTheme).toBeNull();
  });

  test('theme toggle should be keyboard accessible', async ({ page }) => {
    await page.goto('http://localhost:8080');
    
    // Focus the theme toggle button using Tab
    await page.keyboard.press('Tab');
    
    // Verify the button is focused
    const isFocused = await page.evaluate(() => {
      return document.activeElement.id === 'themeToggle';
    });
    expect(isFocused).toBeTruthy();
    
    // Activate with space key
    await page.keyboard.press('Space');
    
    // Verify it changes to light mode
    const ariaLabel = await page.locator('#themeToggle').getAttribute('aria-label');
    expect(ariaLabel).toBe('Theme mode: Light');
  });
});