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

(async () => {
  console.log('🔧 Testing HVAC Navigation with Correct Selectors');
  console.log('==================================================\n');
  
  const browser = await chromium.launch({
    headless: false,
    slowMo: 300
  });
  
  const page = await browser.newPage();
  
  try {
    console.log('1. Navigating to dashboard...');
    await page.goto('https://upskill-staging.measurequick.com/trainer/dashboard/');
    await page.waitForTimeout(2000);
    
    // Look for the actual menu toggle button
    console.log('\n2. Looking for menu toggle buttons...');
    const menuToggles = await page.locator('button:has-text("Menu Toggle")').all();
    console.log(`   Found ${menuToggles.length} "Menu Toggle" buttons`);
    
    if (menuToggles.length > 0) {
      console.log('\n3. Clicking first Menu Toggle button...');
      await menuToggles[0].click();
      await page.waitForTimeout(1000);
      
      // Check if any dropdown opened
      const expanded = await menuToggles[0].getAttribute('aria-expanded');
      console.log(`   Button aria-expanded: ${expanded}`);
      
      // Look for menu items
      const menuItems = await page.locator('ul.sub-menu, ul.dropdown-menu, ul[class*="menu"]').all();
      console.log(`   Found ${menuItems.length} menu lists`);
      
      // Take screenshot
      await page.screenshot({ path: 'nav-after-click.png' });
      console.log('   Screenshot saved as nav-after-click.png');
      
      // Try to find specific menu items
      console.log('\n4. Looking for specific menu items...');
      const dashboard = await page.locator('a:has-text("Dashboard")').count();
      const events = await page.locator('a:has-text("Events")').count();
      const certificates = await page.locator('a:has-text("Certificate")').count();
      
      console.log(`   Dashboard links: ${dashboard}`);
      console.log(`   Events links: ${events}`);
      console.log(`   Certificate links: ${certificates}`);
      
      // Check if the issue is with the HVAC custom menu CSS
      console.log('\n5. Checking HVAC menu CSS classes...');
      const hvacMenuClasses = await page.evaluate(() => {
        const elements = document.querySelectorAll('[class*="hvac-menu"]');
        return Array.from(elements).map(el => el.className);
      });
      
      if (hvacMenuClasses.length > 0) {
        console.log('   HVAC menu classes found:');
        hvacMenuClasses.forEach(cls => console.log(`   - ${cls}`));
      } else {
        console.log('   ❌ No HVAC menu classes found - menu might be using theme defaults');
      }
      
    } else {
      console.log('   ❌ No "Menu Toggle" buttons found');
    }
    
    console.log('\n==================================================');
    console.log('✅ Test complete. Check screenshots for visual confirmation.');
    
    // Keep browser open for observation
    await page.waitForTimeout(5000);
    
  } catch (error) {
    console.error('❌ Error:', error.message);
  } finally {
    await browser.close();
  }
})();