import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';
import { test, expect } from '@playwright/test';
import * as dotenv from 'dotenv';
import { resolve } from 'path';

dotenv.config({ path: resolve(__dirname, '../../../../.env') });

test.use({
  screenshot: 'on',
  video: 'on',
  trace: 'on',
  actionTimeout: 15000,
  timeout: 60000
});

test.describe('Simple Field Mapping Test', () => {
  const stagingUrl = process.env.UPSKILL_STAGING_URL || 'https://upskill-staging.measurequick.com';
  
  test('test event creation with field mapping', async ({ page }) => {
    // Use environment variables or fallback
    const username = process.env.TEST_USERNAME || 'test_trainer';
    const password = process.env.TEST_PASSWORD || 'Test123!';

    console.log('Starting test with URL:', stagingUrl);
    
    // Step 1: Go directly to wp-admin login
    await page.goto(stagingUrl + '/wp-login.php');
    await page.fill('#user_login', username);
    await page.fill('#user_pass', password);
    await page.click('#wp-submit');
    
    // Wait for login
    await page.waitForURL('**/wp-admin/**');
    console.log('Logged in successfully');

    // Step 2: Go to event creation page
    await page.goto(stagingUrl + '/manage-event/');
    await page.waitForLoadState('networkidle');
    
    // Wait for form to be ready
    await page.waitForSelector('input[name="post_title"]', { state: 'visible' });
    console.log('Event form loaded');

    // Step 3: Fill minimal required fields
    const uniqueId = Date.now();
    const eventTitle = `Test Event ${uniqueId}`;
    
    // Title
    await page.fill('input[name="post_title"]', eventTitle);
    
    // Dates (required)
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    const dateStr = tomorrow.toISOString().split('T')[0];
    
    await page.fill('input[name="EventStartDate"]', dateStr);
    await page.fill('input[name="EventEndDate"]', dateStr);
    await page.fill('input[name="EventStartTime"]', '09:00');
    await page.fill('input[name="EventEndTime"]', '17:00');
    
    // Description - This is what we're testing
    const descriptionText = 'Test description for field mapping';
    
    // Check if textarea exists
    const textareaExists = await page.locator('textarea[name="tcepostcontent"]').isVisible().catch(() => false);
    if (textareaExists) {
      await page.fill('textarea[name="tcepostcontent"]', descriptionText);
      console.log('Filled textarea');
    }

    // Check if TinyMCE exists
    const iframeExists = await page.locator('iframe#tcepostcontent_ifr').isVisible().catch(() => false);
    if (iframeExists) {
      const iframe = page.frameLocator('iframe#tcepostcontent_ifr');
      await iframe.locator('body').fill(descriptionText);
      console.log('Filled TinyMCE');
    }

    // Take screenshot
    await page.screenshot({ path: 'simple-test-form.png' });

    // Step 4: Submit
    console.log('Submitting form...');
    await page.click('input[type="submit"][value="Submit Event"]');
    
    // Wait for navigation or error
    await page.waitForTimeout(5000);
    
    // Check for error
    const errorVisible = await page.locator('.tribe-notice-error').isVisible().catch(() => false);
    const errorMessage = errorVisible ? await page.locator('.tribe-notice-error').textContent() : null;
    
    // Get current URL
    const currentUrl = page.url();
    console.log('Current URL:', currentUrl);
    console.log('Error visible:', errorVisible);
    console.log('Error message:', errorMessage);
    
    // Check if description error persists
    if (errorMessage?.includes('Event Description is required')) {
      console.error('FAIL: Field mapping not working - description error still present');
      throw new Error('Field mapping fix failed');
    } else if (currentUrl.includes('/events/') || !errorVisible) {
      console.log('SUCCESS: Event created without description error');
    } else {
      console.log('Other error or unknown state');
      console.log('Error:', errorMessage);
    }
    
    // Final screenshot
    await page.screenshot({ path: 'simple-test-result.png' });
  });
});