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

test.describe('Simple Theme Test', () => {
  test('Test theme toggle with onclick', async ({ page }) => {
    // Navigate to the calendar page
    await page.goto('http://localhost:3000/calendar');
    await page.waitForLoadState('networkidle');
    
    console.log('=== TESTING ONCLICK THEME TOGGLE ===');
    
    // Check initial state
    const initialTheme = await page.locator('html').getAttribute('data-theme');
    console.log('Initial theme:', initialTheme);
    
    // Check if toggleTheme function exists
    const hasToggleTheme = await page.evaluate(() => {
      return typeof window.toggleTheme === 'function';
    });
    console.log('toggleTheme function exists:', hasToggleTheme);
    
    // Try clicking the theme toggle button
    const themeToggle = page.locator('#theme-toggle');
    const toggleExists = await themeToggle.isVisible();
    console.log('Theme toggle visible:', toggleExists);
    
    if (toggleExists) {
      // Click the toggle
      await themeToggle.click();
      await page.waitForTimeout(500);
      
      // Check new state
      const newTheme = await page.locator('html').getAttribute('data-theme');
      console.log('After click theme:', newTheme);
      
      // Check if theme actually changed
      const themeChanged = initialTheme !== newTheme;
      console.log('Theme changed:', themeChanged);
      
      // Check localStorage
      const savedTheme = await page.evaluate(() => localStorage.getItem('theme'));
      console.log('Saved theme in localStorage:', savedTheme);
      
      // Take screenshot
      await page.screenshot({ path: 'theme-toggle-test.png', fullPage: true });
      
      // Try clicking again to toggle back
      await themeToggle.click();
      await page.waitForTimeout(500);
      
      const finalTheme = await page.locator('html').getAttribute('data-theme');
      console.log('After second click theme:', finalTheme);
    }
  });
});