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

async function testAllPagesLayout() {
    const browser = await chromium.launch({ headless: false });
    const page = await browser.newContext().then(ctx => ctx.newPage());
    
    // Login as master trainer (has access to all pages)
    await page.goto('https://upskill-staging.measurequick.com/training-login/');
    await page.fill('#user_login', 'JoeMedosch@gmail.com');
    await page.fill('#user_pass', 'JoeTrainer2025@');
    await page.locator('input[type="submit"], #wp-submit').first().click();
    await page.waitForLoadState('networkidle');
    
    // Test pages
    const pages = [
        { name: 'Trainer Dashboard', url: '/trainer/dashboard/' },
        { name: 'Master Dashboard', url: '/master-trainer/master-dashboard/' },
        { name: 'Manage Event', url: '/trainer/event/manage/' },
        { name: 'Certificate Reports', url: '/trainer/certificate-reports/' },
        { name: 'Generate Certificates', url: '/trainer/generate-certificates/' }
    ];
    
    for (const testPage of pages) {
        console.log(`\n=== ${testPage.name} ===`);
        await page.goto(`https://upskill-staging.measurequick.com${testPage.url}`);
        await page.waitForLoadState('networkidle');
        
        const layoutInfo = await page.evaluate(() => {
            // Find the main container
            const container = document.querySelector('.ast-container') || 
                            document.querySelector('.container') ||
                            document.querySelector('.site-content');
            
            // Get the actual content area
            const contentArea = document.querySelector('.content-area') ||
                               document.querySelector('#primary') ||
                               document.querySelector('.site-main');
            
            // Get CSS files
            const cssFiles = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
                .map(link => link.href)
                .filter(href => href.includes('hvac'))
                .map(url => url.split('/').pop());
            
            // Check for specific CSS classes
            const hasDashboardCSS = cssFiles.some(f => f.includes('hvac-dashboard.css'));
            const hasLayoutCSS = cssFiles.some(f => f.includes('hvac-layout.css'));
            
            // Get styles
            const containerStyles = container ? window.getComputedStyle(container) : {};
            const contentStyles = contentArea ? window.getComputedStyle(contentArea) : {};
            
            return {
                cssFiles: cssFiles.slice(0, 5), // First 5 CSS files
                hasDashboardCSS,
                hasLayoutCSS,
                container: {
                    width: containerStyles.width,
                    maxWidth: containerStyles.maxWidth,
                    padding: containerStyles.padding,
                    margin: containerStyles.margin
                },
                content: {
                    width: contentStyles.width,
                    maxWidth: contentStyles.maxWidth,
                    padding: contentStyles.padding
                },
                bodyClasses: document.body.className.includes('hvac-plugin-page')
            };
        });
        
        console.log('CSS Files:', layoutInfo.cssFiles.join(', '));
        console.log('Has Dashboard CSS:', layoutInfo.hasDashboardCSS);
        console.log('Has Layout CSS:', layoutInfo.hasLayoutCSS);
        console.log('Container:', layoutInfo.container);
        console.log('Content:', layoutInfo.content);
        console.log('Has HVAC body class:', layoutInfo.bodyClasses);
        
        await page.screenshot({ 
            path: `${testPage.name.toLowerCase().replace(/ /g, '-')}-layout.png`, 
            fullPage: false 
        });
    }
    
    await browser.close();
}

testAllPagesLayout().catch(console.error);