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

async function testEventManagement() {
  console.log('🧪 Testing event management page fixes...');
  
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  
  try {
    // Navigate to the event management page
    console.log('📋 Testing trainer/event/manage/ page fixes...');
    
    await page.goto('https://upskill-staging.measurequick.com/trainer/event/manage/');
    await page.waitForLoadState('networkidle');
    
    // Check for preamble content
    const headerExists = await page.locator('.hvac-event-manage-header').isVisible();
    const titleExists = await page.locator('h2:has-text("Create and Manage Your HVAC Training Events")').isVisible();
    const descriptionExists = await page.locator('p:has-text("Use this form to create new training events")').isVisible();
    const tipsExists = await page.locator('.hvac-event-manage-tips').isVisible();
    const tipsTitle = await page.locator('h3:has-text("Event Creation Tips:")').isVisible();
    
    console.log(`  📄 Header container visible: ${headerExists}`);
    console.log(`  📝 Title visible: ${titleExists}`);
    console.log(`  📖 Description visible: ${descriptionExists}`);
    console.log(`  💡 Tips section visible: ${tipsExists}`);
    console.log(`  🎯 Tips title visible: ${tipsTitle}`);
    
    // Check if the event form/login area is there
    const eventFormArea = await page.locator('.tribe-community-events').isVisible();
    console.log(`  📋 Event form area visible: ${eventFormArea}`);
    
    // Take screenshot to verify visual appearance
    await page.screenshot({ path: 'test-results/event-management-fixed.png', fullPage: true });
    
    // Check CSS styling
    const headerStyles = await page.locator('.hvac-event-manage-header').evaluate(el => {
      const styles = window.getComputedStyle(el);
      return {
        backgroundColor: styles.backgroundColor,
        padding: styles.padding,
        borderRadius: styles.borderRadius,
        marginBottom: styles.marginBottom
      };
    });
    
    console.log('  🎨 Header styles applied:', headerStyles);
    
    console.log('\n✅ Event management page test completed!');
    console.log('\n📋 Fix Summary:');
    console.log(`  • Preamble header: ${headerExists ? 'WORKING' : 'FAILED'}`);
    console.log(`  • Preamble content: ${titleExists && descriptionExists ? 'WORKING' : 'FAILED'}`);
    console.log(`  • Tips section: ${tipsExists ? 'WORKING' : 'FAILED'}`);
    console.log(`  • Event form area: ${eventFormArea ? 'WORKING' : 'FAILED'}`);
    console.log(`  • CSS styling: ${headerExists ? 'APPLIED' : 'MISSING'}`);
    
  } catch (error) {
    console.error('❌ Test failed:', error.message);
  } finally {
    await browser.close();
  }
}

testEventManagement();