const { chromium } = require('playwright');

(async () => {
  console.log('🔍 Debugging HVAC Navigation Menu');
  console.log('===================================\n');
  
  const browser = await chromium.launch({
    headless: true  // Use headless for debugging
  });
  
  const page = await browser.newPage();
  
  try {
    console.log('1. Navigating to dashboard...');
    await page.goto('https://upskill-staging.measurequick.com/trainer/dashboard/', {
      waitUntil: 'networkidle'
    });
    
    // Check what navigation elements exist
    console.log('\n2. Checking for navigation elements...');
    
    // Look for any button with "menu" in the text
    const menuButtons = await page.locator('button').all();
    console.log(`   Found ${menuButtons.length} buttons total`);
    
    for (const button of menuButtons) {
      const text = await button.textContent();
      if (text && text.toLowerCase().includes('menu')) {
        console.log(`   - Button found: "${text.trim()}"`);
      }
    }
    
    // Check for navigation with class hvac-menu
    const hvacNav = await page.locator('.hvac-menu-navigation').count();
    console.log(`   HVAC navigation elements: ${hvacNav}`);
    
    // Check for hamburger icon
    const hamburgerIcon = await page.locator('.hvac-menu-hamburger').count();
    console.log(`   Hamburger icons: ${hamburgerIcon}`);
    
    // Check for menu lists
    const menuLists = await page.locator('.hvac-menu-list').count();
    console.log(`   Menu lists: ${menuLists}`);
    
    // Try different selectors for the menu toggle
    console.log('\n3. Testing different menu selectors...');
    
    const selectors = [
      'button:has-text("Toggle menu")',
      '.hvac-menu-hamburger',
      'button.hvac-menu-hamburger',
      '[aria-label*="menu"]',
      'button[aria-expanded]'
    ];
    
    for (const selector of selectors) {
      const count = await page.locator(selector).count();
      console.log(`   "${selector}": ${count} element(s)`);
    }
    
    // Get the actual HTML of the navigation area
    console.log('\n4. Navigation HTML structure:');
    const navHTML = await page.locator('nav').first().innerHTML();
    console.log(navHTML.substring(0, 500) + '...');
    
    // Check CSS files loaded
    console.log('\n5. Checking CSS files loaded:');
    const styleSheets = await page.evaluate(() => {
      return Array.from(document.styleSheets)
        .map(sheet => sheet.href)
        .filter(href => href && href.includes('hvac'));
    });
    
    styleSheets.forEach(sheet => {
      const filename = sheet.split('/').pop();
      console.log(`   - ${filename}`);
    });
    
    // Check for JavaScript errors
    console.log('\n6. Checking for JavaScript errors:');
    page.on('pageerror', error => {
      console.log(`   ❌ JS Error: ${error.message}`);
    });
    
    // Try to trigger menu with JavaScript
    console.log('\n7. Trying to trigger menu with JavaScript:');
    const menuOpened = await page.evaluate(() => {
      const button = document.querySelector('button');
      if (button && button.textContent.includes('Toggle')) {
        button.click();
        return true;
      }
      return false;
    });
    
    if (menuOpened) {
      console.log('   ✅ Menu triggered via JavaScript');
      await page.waitForTimeout(1000);
      
      // Check if menu items are visible
      const menuVisible = await page.locator('.hvac-menu-list').isVisible();
      console.log(`   Menu list visible: ${menuVisible}`);
    } else {
      console.log('   ❌ Could not trigger menu');
    }
    
    // Take screenshot for manual inspection
    await page.screenshot({ path: 'nav-debug.png', fullPage: false });
    console.log('\n✅ Screenshot saved as nav-debug.png');
    
  } catch (error) {
    console.error('❌ Error:', error.message);
  } finally {
    await browser.close();
  }
})();