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

(async () => {
  console.log('🔍 Testing master dashboard page existence and template...');
  
  const browser = await chromium.launch({
    headless: false,
    slowMo: 500
  });
  
  const page = await browser.newPage();
  
  try {
    // Login first
    console.log('📋 Logging in as master trainer...');
    await page.goto('https://upskill-staging.measurequick.com/training-login/');
    await page.waitForTimeout(2000);
    
    await page.fill('#user_login', 'test_master');
    await page.fill('#user_pass', 'TestMaster123!');
    await page.click('#wp-submit');
    await page.waitForTimeout(3000);
    
    // Go directly to master dashboard
    console.log('📋 Navigating to master dashboard...');
    await page.goto('https://upskill-staging.measurequick.com/master-trainer/master-dashboard/');
    await page.waitForTimeout(3000);
    
    // Check for debug comments in source
    const htmlSource = await page.content();
    console.log('\n📊 Debug Comments Check:');
    console.log('- Contains "DEBUG: template-hvac-master-dashboard.php loaded":', htmlSource.includes('DEBUG: template-hvac-master-dashboard.php loaded'));
    console.log('- Contains "Master Dashboard" heading:', htmlSource.includes('<h1 class="entry-title">Master Dashboard</h1>') || htmlSource.includes('<h1>Master Dashboard</h1>'));
    console.log('- Contains "System Overview":', htmlSource.includes('System Overview'));
    
    // Check if we're getting the right template
    const bodyClasses = await page.evaluate(() => document.body.className);
    console.log('\n📊 Body Classes:', bodyClasses);
    
    // Check for hvac-page-wrapper
    const hasWrapper = await page.evaluate(() => {
      return document.querySelector('.hvac-page-wrapper') !== null;
    });
    console.log('- Has .hvac-page-wrapper:', hasWrapper);
    
    // Check for main content
    const hasMain = await page.evaluate(() => {
      return document.querySelector('#main') !== null;
    });
    console.log('- Has #main:', hasMain);
    
    // Check what's actually in the main area
    const mainContent = await page.evaluate(() => {
      const main = document.querySelector('#main, .site-main, .content-area');
      if (main) {
        return {
          tagName: main.tagName,
          id: main.id,
          className: main.className,
          innerHTMLLength: main.innerHTML.length,
          firstChars: main.innerHTML.substring(0, 200)
        };
      }
      return null;
    });
    console.log('\n📊 Main Content Area:', mainContent);
    
    // Check if WordPress thinks this is a page
    const isPage = await page.evaluate(() => {
      const bodyClasses = document.body.className;
      return {
        hasPageClass: bodyClasses.includes('page'),
        hasPageId: /page-id-\d+/.test(bodyClasses),
        pageId: bodyClasses.match(/page-id-(\d+)/)?.[1] || null,
        hasTemplateClass: bodyClasses.includes('page-template'),
        templateClass: bodyClasses.match(/page-template-[\w-]+/)?.[0] || null
      };
    });
    console.log('\n📊 WordPress Page Detection:', isPage);
    
    // Take a screenshot for visual reference
    await page.screenshot({ 
      path: '/tmp/playwright-mcp-output/master-dashboard-debug.png',
      fullPage: false 
    });
    console.log('\n📸 Screenshot saved to /tmp/playwright-mcp-output/master-dashboard-debug.png');
    
    // Keep browser open for manual inspection
    console.log('\n🔍 Keeping browser open for 15 seconds...');
    await page.waitForTimeout(15000);
    
  } catch (error) {
    console.error('Error during testing:', error);
  } finally {
    await browser.close();
    console.log('✅ Test completed');
  }
})();