import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';
import { test, expect } from '@playwright/test';

// STAGING_URL is now imported from config

test.describe('Simple Event Creation V2', () => {
  test('should allow trainer to create an event', async ({ page }) => {
    // Login
    await page.goto(PATHS.login);
    await page.fill('#user_login', 'test_trainer');
    await page.fill('#user_pass', 'Test123!');
    await page.click('#wp-submit');
    await page.waitForURL('**/hvac-dashboard/');
    
    // Navigate to create event
    console.log('Looking for Create Event button...');
    const createEventBtn = page.locator('a:has-text("CREATE EVENT"), a:has-text("Create Event")').first();
    await expect(createEventBtn).toBeVisible();
    await createEventBtn.click();
    
    // Wait for form to load
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
    
    // Fill in basic event details
    const eventTitle = `Test Event ${Date.now()}`;
    console.log('Creating event:', eventTitle);
    
    // Title - based on the screenshot, the input has name="post_title"
    await page.fill('input[name="post_title"]', eventTitle);
    
    // Description - using the TinyMCE iframe
    const descriptionText = `This is a test event created at ${new Date().toISOString()}`;
    
    // Try to use the text mode if available
    const textButton = page.locator('#content-tmce, button:has-text("Text")');
    if (await textButton.isVisible()) {
      await textButton.click();
      await page.waitForTimeout(500);
    }
    
    // Try different description field selectors
    const descriptionSelectors = [
      'textarea[name="post_content"]',
      'textarea#content',
      '#content'
    ];
    
    let descriptionFilled = false;
    for (const selector of descriptionSelectors) {
      try {
        const element = page.locator(selector);
        if (await element.isVisible()) {
          await element.fill(descriptionText);
          descriptionFilled = true;
          console.log(`Filled description using: ${selector}`);
          break;
        }
      } catch (e) {
        console.log(`Selector ${selector} not available`);
      }
    }
    
    // If no textarea, try iframe
    if (!descriptionFilled) {
      try {
        const iframe = page.frameLocator('iframe[id*="content"], iframe[title*="editor"]').first();
        await iframe.locator('body').fill(descriptionText);
        console.log('Filled description using iframe');
      } catch (e) {
        console.log('Could not fill description - continuing anyway');
      }
    }
    
    // Set dates - based on the form fields in the screenshot
    const today = new Date();
    const dateStr = `${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getDate().toString().padStart(2, '0')}/${today.getFullYear()}`;
    
    // Start date
    const startDateInput = page.locator('input#EventStartDate, input[name="EventStartDate"]').first();
    await startDateInput.fill(dateStr);
    
    // End date (might be in a different section)
    const endDateInput = page.locator('input#EventEndDate, input[name="EventEndDate"]').first();
    await endDateInput.fill(dateStr);
    
    // Set times if visible
    const startTimeInput = page.locator('input#EventStartTime, input[name="EventStartTime"]').first();
    if (await startTimeInput.isVisible()) {
      await startTimeInput.fill('10:00am');
    }
    
    const endTimeInput = page.locator('input#EventEndTime, input[name="EventEndTime"]').first();
    if (await endTimeInput.isVisible()) {
      await endTimeInput.fill('12:00pm');
    }
    
    // Scroll to bottom to find submit button
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await page.waitForTimeout(1000);
    
    // Submit - based on the screenshot, there's a "Submit Event" button
    console.log('Looking for submit button...');
    const submitButton = page.locator('button:has-text("Submit Event"), input[type="submit"][value="Submit Event"]').first();
    await expect(submitButton).toBeVisible({ timeout: 10000 });
    console.log('Clicking submit button...');
    await submitButton.click();
    
    // Wait for response
    await page.waitForTimeout(5000);
    
    // Take final screenshot
    await page.screenshot({ path: 'test-results/after-submit-v2.png', fullPage: true });
    
    // Check current URL
    const currentUrl = page.url();
    console.log('Current URL after submit:', currentUrl);
    
    // Check for any error messages
    const errors = await page.locator('.error, .tribe-error, .notice-error').count();
    if (errors > 0) {
      const errorText = await page.locator('.error, .tribe-error, .notice-error').first().textContent();
      console.log('Error found:', errorText);
    }
    
    // Success criteria: URL changed OR success message appeared
    const successMessage = await page.locator('.updated, .notice-success, .tribe-success').count();
    const urlChanged = !currentUrl.includes('/manage-event/');
    
    expect(successMessage > 0 || urlChanged).toBeTruthy();
  });
});