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

(async () => {
  console.log('🔍 Testing HVAC Navigation Menu - Headed Browser');
  console.log('==============================================\n');
  
  const browser = await chromium.launch({
    headless: false,
    slowMo: 500 // Slow down actions to see what's happening
  });
  
  const page = await browser.newPage();
  
  try {
    // Navigate to dashboard
    console.log('1. Navigating to dashboard...');
    await page.goto('https://upskill-staging.measurequick.com/trainer/dashboard/');
    await page.waitForTimeout(2000);
    
    // Take initial screenshot
    await page.screenshot({ path: 'nav-initial.png' });
    console.log('   ✅ Dashboard loaded\n');
    
    // Click hamburger menu
    console.log('2. Clicking hamburger menu...');
    const hamburger = await page.locator('button:has-text("Toggle menu")');
    await hamburger.click();
    await page.waitForTimeout(1000);
    await page.screenshot({ path: 'nav-menu-open.png' });
    console.log('   ✅ Menu opened\n');
    
    // Click Events dropdown
    console.log('3. Clicking Events dropdown...');
    const eventsMenu = await page.locator('text=Events').first();
    await eventsMenu.click();
    await page.waitForTimeout(1000);
    await page.screenshot({ path: 'nav-events-dropdown.png' });
    
    // Check if submenu items are visible
    const dashboardLink = await page.locator('a:has-text("Dashboard")').isVisible();
    const newEventLink = await page.locator('a:has-text("New Event")').isVisible();
    
    if (dashboardLink && newEventLink) {
      console.log('   ✅ Events submenu items visible');
    } else {
      console.log('   ❌ Events submenu items NOT visible');
    }
    console.log('');
    
    // Click Certificates dropdown
    console.log('4. Clicking Certificates dropdown...');
    const certsMenu = await page.locator('text=Certificates').first();
    await certsMenu.click();
    await page.waitForTimeout(1000);
    await page.screenshot({ path: 'nav-certs-dropdown.png' });
    
    // Check if submenu items are visible
    const reportsLink = await page.locator('a:has-text("Reports")').isVisible();
    const newCertLink = await page.locator('a:has-text("New Certificate")').isVisible();
    
    if (reportsLink && newCertLink) {
      console.log('   ✅ Certificates submenu items visible');
    } else {
      console.log('   ❌ Certificates submenu items NOT visible');
    }
    console.log('');
    
    // Click Profile dropdown
    console.log('5. Clicking Profile dropdown...');
    const profileMenu = await page.locator('text=Profile').first();
    await profileMenu.click();
    await page.waitForTimeout(1000);
    await page.screenshot({ path: 'nav-profile-dropdown.png' });
    
    // Check if submenu items are visible
    const profileLink = await page.locator('a:has-text("Trainer Profile")').isVisible();
    
    if (profileLink) {
      console.log('   ✅ Profile submenu items visible');
    } else {
      console.log('   ❌ Profile submenu items NOT visible');
    }
    
    console.log('\n==============================================');
    console.log('Navigation test complete!');
    console.log('Check the screenshot files for visual confirmation.');
    
    // Keep browser open for 5 seconds to observe
    await page.waitForTimeout(5000);
    
  } catch (error) {
    console.error('❌ Error during test:', error.message);
  } finally {
    await browser.close();
  }
})();