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

async function testManageEventCSS() {
    const browser = await chromium.launch({ headless: false });
    const page = await browser.newContext().then(ctx => ctx.newPage());
    
    // Login
    await page.goto('https://upskill-staging.measurequick.com/training-login/');
    await page.fill('#user_login', 'ben+test44@measurequick.com');
    await page.fill('#user_pass', 'MQtrainer2024!');
    await page.locator('input[type="submit"], #wp-submit').first().click();
    await page.waitForLoadState('networkidle');
    
    // Go to manage event page
    await page.goto('https://upskill-staging.measurequick.com/trainer/event/manage/');
    await page.waitForLoadState('networkidle');
    
    // Check CSS and layout
    const layoutInfo = await page.evaluate(() => {
        const mainContent = document.querySelector('.entry-content') || document.querySelector('#main') || document.querySelector('.site-main');
        const container = document.querySelector('.ast-container') || document.querySelector('.container');
        
        // Get CSS files
        const cssFiles = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
            .map(link => link.href)
            .filter(href => href.includes('hvac'));
            
        // Get computed styles
        const styles = mainContent ? window.getComputedStyle(mainContent) : {};
        const containerStyles = container ? window.getComputedStyle(container) : {};
        
        return {
            cssFiles: cssFiles.map(url => url.split('/').pop()),
            // Container info
            containerClass: container?.className,
            containerWidth: containerStyles.maxWidth,
            containerPadding: containerStyles.padding,
            // Content info
            contentPadding: styles.padding,
            contentMargin: styles.margin,
            // Body classes
            bodyClasses: document.body.className,
            // Form styles
            hasFormStyles: !!document.querySelector('.tribe-community-events'),
            formBackground: document.querySelector('.tribe-community-events') ? 
                window.getComputedStyle(document.querySelector('.tribe-community-events')).backgroundColor : 'none'
        };
    });
    
    console.log('=== Manage Event Page CSS/Layout ===');
    console.log('CSS Files:', layoutInfo.cssFiles);
    console.log('\nContainer:');
    console.log('  Class:', layoutInfo.containerClass);
    console.log('  Max Width:', layoutInfo.containerWidth);
    console.log('  Padding:', layoutInfo.containerPadding);
    console.log('\nContent:');
    console.log('  Padding:', layoutInfo.contentPadding);
    console.log('  Margin:', layoutInfo.contentMargin);
    console.log('\nForm:');
    console.log('  Has Styles:', layoutInfo.hasFormStyles);
    console.log('  Background:', layoutInfo.formBackground);
    
    await page.screenshot({ path: 'manage-event-css-check.png', fullPage: true });
    
    await browser.close();
}

testManageEventCSS().catch(console.error);