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

test.describe('Detailed Theme Debug', () => {
  test('Comprehensive theme toggle debugging', async ({ page }) => {
    // Navigate to the calendar page
    await page.goto('http://localhost:3000/calendar');
    await page.waitForLoadState('networkidle');
    
    console.log('=== INITIAL STATE ===');
    
    // Check if page is fully loaded
    const pageTitle = await page.title();
    console.log('Page title:', pageTitle);
    
    // 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 and is visible
    const themeToggle = page.locator('#theme-toggle');
    const toggleExists = await themeToggle.isVisible();
    console.log('Theme toggle exists and visible:', toggleExists);
    
    if (!toggleExists) {
      console.log('ERROR: Theme toggle not found or not visible');
      return;
    }
    
    // Get theme toggle properties
    const toggleText = await themeToggle.textContent();
    const toggleHTML = await themeToggle.innerHTML();
    console.log('Toggle text content:', toggleText);
    console.log('Toggle HTML:', toggleHTML);
    
    // Check if JavaScript is running
    const jsWorking = await page.evaluate(() => {
      return typeof window !== 'undefined' && typeof document !== 'undefined';
    });
    console.log('JavaScript is working:', jsWorking);
    
    // Check if our theme script is loaded
    const themeScriptLoaded = await page.evaluate(() => {
      const element = document.getElementById('theme-toggle');
      return element && element.onclick !== null;
    });
    console.log('Theme script appears loaded:', themeScriptLoaded);
    
    // Get initial CSS variables
    const initialCssVars = await page.evaluate(() => {
      const style = getComputedStyle(document.documentElement);
      return {
        textPrimary: style.getPropertyValue('--glass-text-primary').trim(),
        bgGradient: style.getPropertyValue('--bg-gradient').trim(),
        glassBg: style.getPropertyValue('--glass-bg').trim()
      };
    });
    console.log('Initial CSS variables:', initialCssVars);
    
    // Check localStorage before click
    const initialLocalStorage = await page.evaluate(() => {
      return {
        theme: localStorage.getItem('theme'),
        keys: Object.keys(localStorage)
      };
    });
    console.log('Initial localStorage:', initialLocalStorage);
    
    console.log('=== CLICKING THEME TOGGLE ===');
    
    // Add event listener to catch errors
    await page.evaluate(() => {
      window.addEventListener('error', (e) => {
        console.log('JavaScript error:', e.error);
      });
    });
    
    // Click theme toggle with more detail
    await themeToggle.click();
    console.log('Theme toggle clicked');
    
    // Wait for any animations/transitions
    await page.waitForTimeout(1000);
    
    console.log('=== AFTER CLICK STATE ===');
    
    // Get state after toggle
    const newTheme = await page.locator('html').getAttribute('data-theme');
    const newClass = await page.locator('html').getAttribute('class');
    console.log('After toggle theme attribute:', newTheme);
    console.log('After toggle class:', newClass);
    
    // Get CSS variables after toggle
    const newCssVars = await page.evaluate(() => {
      const style = getComputedStyle(document.documentElement);
      return {
        textPrimary: style.getPropertyValue('--glass-text-primary').trim(),
        bgGradient: style.getPropertyValue('--bg-gradient').trim(),
        glassBg: style.getPropertyValue('--glass-bg').trim()
      };
    });
    console.log('After toggle CSS variables:', newCssVars);
    
    // Check localStorage after click
    const newLocalStorage = await page.evaluate(() => {
      return {
        theme: localStorage.getItem('theme'),
        keys: Object.keys(localStorage)
      };
    });
    console.log('After toggle localStorage:', newLocalStorage);
    
    // Check if CSS variables actually changed
    const varsChanged = JSON.stringify(initialCssVars) !== JSON.stringify(newCssVars);
    console.log('CSS variables changed:', varsChanged);
    
    // Take screenshots
    await page.screenshot({ path: 'debug-before-toggle.png', fullPage: true });
    
    // Try clicking again to see if it works at all
    await themeToggle.click();
    await page.waitForTimeout(500);
    
    const finalTheme = await page.locator('html').getAttribute('data-theme');
    console.log('After second click theme:', finalTheme);
    
    await page.screenshot({ path: 'debug-after-second-toggle.png', fullPage: true });
    
    // Check if event listeners are attached
    const eventListeners = await page.evaluate(() => {
      const toggle = document.getElementById('theme-toggle');
      if (!toggle) return 'No toggle element';
      
      // Try to see if there are any event listeners
      return {
        hasClickHandler: typeof toggle.onclick === 'function',
        hasEventListeners: toggle.addEventListener ? 'addEventListener exists' : 'no addEventListener'
      };
    });
    console.log('Event listener info:', eventListeners);
  });
});