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

// STAGING_URL is now imported from config

test.describe('Debug Event Submission', () => {
  test('debug event form submission process', 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
    const createEventBtn = page.locator('a:has-text("CREATE EVENT"), a:has-text("Create Event")').first();
    await createEventBtn.click();
    await page.waitForLoadState('networkidle');
    
    // Fill required fields
    const eventTitle = `Debug Event ${Date.now()}`;
    await page.fill('input[name="post_title"]', eventTitle);
    
    // Fill date fields based on what's visible in the form
    const today = new Date();
    const dateStr = `${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getDate().toString().padStart(2, '0')}/${today.getFullYear()}`;
    
    // Fill all date and time fields that are visible
    const dateTimeFields = {
      'EventStartDate': dateStr,
      'EventEndDate': dateStr,
      'EventStartTime': '10:00',
      'EventEndTime': '12:00'
    };
    
    for (const [fieldName, value] of Object.entries(dateTimeFields)) {
      const field = page.locator(`input[name="${fieldName}"], input#${fieldName}`).first();
      if (await field.isVisible()) {
        await field.fill(value);
        console.log(`Filled ${fieldName} with ${value}`);
      }
    }
    
    // Check if there are any required organizer/venue fields
    const organizerField = page.locator('select[name="organizer"], input[name="organizer"]').first();
    if (await organizerField.isVisible()) {
      // If it's a select, choose first option
      if (await organizerField.evaluate(el => el.tagName === 'SELECT')) {
        await organizerField.selectOption({ index: 1 });
        console.log('Selected organizer from dropdown');
      }
    }
    
    const venueField = page.locator('select[name="venue"], input[name="venue"]').first();
    if (await venueField.isVisible()) {
      if (await venueField.evaluate(el => el.tagName === 'SELECT')) {
        await venueField.selectOption({ index: 1 });
        console.log('Selected venue from dropdown');
      }
    }
    
    // Scroll to submit button
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await page.waitForTimeout(1000);
    
    // Before clicking submit, capture form state
    const formData = await page.evaluate(() => {
      const form = document.querySelector('form');
      const data: Record<string, any> = {};
      if (form) {
        const inputs = form.querySelectorAll('input, textarea, select');
        inputs.forEach((input: any) => {
          if (input.name) {
            data[input.name] = input.value;
          }
        });
      }
      return data;
    });
    console.log('Form data before submit:', JSON.stringify(formData, null, 2));
    
    // Click submit
    const submitButton = page.locator('button:has-text("Submit Event"), input[type="submit"][value="Submit Event"]').first();
    
    // Listen for navigation
    const navigationPromise = page.waitForNavigation({ 
      timeout: 10000,
      waitUntil: 'networkidle' 
    }).catch(() => null);
    
    await submitButton.click();
    console.log('Clicked submit button');
    
    // Wait for either navigation or error
    const navigated = await navigationPromise;
    console.log('Navigation result:', navigated ? 'navigated' : 'no navigation');
    
    // Check for any validation errors
    await page.waitForTimeout(2000);
    
    // Look for error messages
    const errorSelectors = [
      '.error',
      '.notice-error',
      '.tribe-error',
      '.updated.error',
      '.message.error',
      '[class*="error"]',
      'p.error',
      'div.error'
    ];
    
    let errorFound = false;
    for (const selector of errorSelectors) {
      const errors = await page.locator(selector).all();
      for (const error of errors) {
        if (await error.isVisible()) {
          const text = await error.textContent();
          console.log(`Error found (${selector}):`, text);
          errorFound = true;
        }
      }
    }
    
    // Check for validation messages in form fields
    const validationMessages = await page.evaluate(() => {
      const messages: string[] = [];
      const inputs = document.querySelectorAll('input, textarea, select');
      inputs.forEach((input: any) => {
        if (input.validationMessage) {
          messages.push(`${input.name}: ${input.validationMessage}`);
        }
      });
      return messages;
    });
    console.log('Validation messages:', validationMessages);
    
    // Take screenshot
    await page.screenshot({ path: 'test-results/debug-submission-result.png', fullPage: true });
    
    // Check final URL
    const finalUrl = page.url();
    console.log('Final URL:', finalUrl);
    
    // Log page title
    const pageTitle = await page.title();
    console.log('Page title:', pageTitle);
    
    // Log any console errors
    page.on('console', msg => {
      if (msg.type() === 'error') {
        console.log('Console error:', msg.text());
      }
    });
    
    // Assert something to pass the test
    expect(true).toBe(true);
  });
});