import { test } from '@playwright/test';

/**
 * UI Screenshots Test
 * 
 * This test navigates through all key pages of the application
 * and captures full-page screenshots for UI evaluation.
 */
test.describe('UI Screenshots', () => {
  // Login credentials for test_trainer user
  const username = 'test_trainer';
  const password = 'Test123!';
  
  // Base URL from environment or default to staging
  const baseUrl = process.env.UPSKILL_STAGING_URL || 'https://wordpress-974670-5399585.cloudwaysapps.com/';
  
  // Screenshot directory
  const screenshotDir = 'test-results/ui-screenshots';
  
  test('Capture screenshots of all pages', async ({ page }) => {
    // Create timestamp for unique screenshot filenames
    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
    
    // Visit login page
    console.log('Visiting login page...');
    await page.goto(`${baseUrl}community-login/`);
    await page.screenshot({ path: `${screenshotDir}/01-login-page-${timestamp}.png`, fullPage: true });
    
    // Login
    console.log('Logging in...');
    await page.fill('input[name="log"]', username);
    await page.fill('input[name="pwd"]', password);
    await page.click('input[name="wp-submit"]');
    
    // Wait for redirect to dashboard
    await page.waitForURL(`${baseUrl}hvac-dashboard/`);
    
    // Capture dashboard
    console.log('Capturing dashboard...');
    await page.screenshot({ path: `${screenshotDir}/02-dashboard-${timestamp}.png`, fullPage: true });
    
    // Visit trainer profile page
    console.log('Visiting trainer profile...');
    await page.goto(`${baseUrl}trainer-profile/`);
    await page.screenshot({ path: `${screenshotDir}/03-trainer-profile-${timestamp}.png`, fullPage: true });
    
    // Visit my events page
    console.log('Visiting my events...');
    await page.goto(`${baseUrl}my-events/`);
    await page.screenshot({ path: `${screenshotDir}/04-my-events-${timestamp}.png`, fullPage: true });
    
    // Visit create event page
    console.log('Visiting create event page...');
    await page.goto(`${baseUrl}manage-event/`);
    await page.screenshot({ path: `${screenshotDir}/05-create-event-${timestamp}.png`, fullPage: true });
    
    // Try to visit event summary page if there are events
    console.log('Checking for existing events...');
    await page.goto(`${baseUrl}my-events/`);
    const eventLinks = await page.$$('a[href*="event_id="]');
    
    if (eventLinks.length > 0) {
      // Get href attribute of first event
      const eventHref = await eventLinks[0].getAttribute('href');
      if (eventHref) {
        // Extract event ID
        const eventIdMatch = eventHref.match(/event_id=(\d+)/);
        if (eventIdMatch && eventIdMatch[1]) {
          const eventId = eventIdMatch[1];
          
          // Visit event summary page
          console.log(`Visiting event summary for event ID: ${eventId}...`);
          await page.goto(`${baseUrl}event-summary/?event_id=${eventId}`);
          await page.screenshot({ path: `${screenshotDir}/06-event-summary-${timestamp}.png`, fullPage: true });
          
          // Visit email attendees page
          console.log(`Visiting email attendees for event ID: ${eventId}...`);
          await page.goto(`${baseUrl}email-attendees/?event_id=${eventId}`);
          await page.screenshot({ path: `${screenshotDir}/07-email-attendees-${timestamp}.png`, fullPage: true });
        }
      }
    } else {
      console.log('No events found to capture event-specific pages');
    }
    
    console.log('All screenshots captured successfully');
  });
});