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

test.describe('Theme Debug', () => {
  test('Debug theme switching mechanism', async ({ page }) => {
    // Navigate to the calendar page
    await page.goto('http://localhost:3000/calendar');
    await page.waitForLoadState('networkidle');
    
    // Get initial state
    const initialTheme = await page.locator('html').getAttribute('data-theme');
    const initialClass = await page.locator('html').getAttribute('class');
    console.log('Initial theme attribute:', initialTheme);
    console.log('Initial class:', initialClass);
    
    // Check if theme toggle exists
    const themeToggle = page.locator('#theme-toggle');
    const toggleExists = await themeToggle.isVisible();
    console.log('Theme toggle exists:', toggleExists);
    
    if (toggleExists) {
      // Get initial CSS variable
      const initialCssVar = await page.evaluate(() => {
        const style = getComputedStyle(document.documentElement);
        return style.getPropertyValue('--glass-text-primary');
      });
      console.log('Initial --glass-text-primary:', initialCssVar);
      
      // Click theme toggle
      await themeToggle.click();
      await page.waitForTimeout(1000); // Wait for transition
      
      // Get state after toggle
      const newTheme = await page.locator('html').getAttribute('data-theme');
      const newClass = await page.locator('html').getAttribute('class');
      const newCssVar = await page.evaluate(() => {
        const style = getComputedStyle(document.documentElement);
        return style.getPropertyValue('--glass-text-primary');
      });
      
      console.log('After toggle theme attribute:', newTheme);
      console.log('After toggle class:', newClass);
      console.log('After toggle --glass-text-primary:', newCssVar);
      
      // Take screenshot after toggle
      await page.screenshot({ path: 'debug-after-toggle.png', fullPage: true });
      
      // Check localStorage
      const savedTheme = await page.evaluate(() => localStorage.getItem('theme'));
      console.log('Saved theme in localStorage:', savedTheme);
    }
    
    // Get all CSS variables in both states
    await page.evaluate(() => {
      // Log all glassmorphism variables
      const style = getComputedStyle(document.documentElement);
      const vars = {};
      for (let i = 0; i < style.length; i++) {
        const prop = style[i];
        if (prop.startsWith('--glass-') || prop.startsWith('--ui-')) {
          vars[prop] = style.getPropertyValue(prop);
        }
      }
      console.log('All theme variables:', vars);
    });
  });
});