import { test, expect } from '@playwright/test';
import { STAGING_CONFIG } from '../../playwright.config';

test.describe('Inspect Form Fields', () => {
  test('should identify all form fields', async ({ page }) => {
    // Login as test_trainer
    await page.goto(`https://${STAGING_CONFIG.url}/wp-login.php`);
    await page.fill('#user_login', 'test_trainer');
    await page.fill('#user_pass', 'Test123!');
    await page.click('#wp-submit');
    
    // Wait for dashboard
    await page.waitForURL('**/hvac-dashboard/**', { timeout: 10000 });
    console.log('Logged in successfully');
    
    // Navigate to event creation page
    await page.goto(`https://${STAGING_CONFIG.url}/manage-event/`);
    console.log('Navigated to manage-event page');
    
    // Wait for form to load
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
    
    // Find all input fields
    const inputs = await page.locator('input[type="text"], input[type="email"], input[type="date"]').all();
    console.log(`Found ${inputs.length} input fields:`);
    
    for (let i = 0; i < inputs.length; i++) {
      const name = await inputs[i].getAttribute('name') || '';
      const id = await inputs[i].getAttribute('id') || '';
      const placeholder = await inputs[i].getAttribute('placeholder') || '';
      const value = await inputs[i].inputValue();
      console.log(`Input ${i}: name="${name}" id="${id}" placeholder="${placeholder}" value="${value}"`);
    }
    
    // Find all textareas
    const textareas = await page.locator('textarea').all();
    console.log(`\nFound ${textareas.length} textareas:`);
    
    for (let i = 0; i < textareas.length; i++) {
      const name = await textareas[i].getAttribute('name') || '';
      const id = await textareas[i].getAttribute('id') || '';
      const placeholder = await textareas[i].getAttribute('placeholder') || '';
      console.log(`Textarea ${i}: name="${name}" id="${id}" placeholder="${placeholder}"`);
    }
    
    // Find all select elements
    const selects = await page.locator('select').all();
    console.log(`\nFound ${selects.length} select elements:`);
    
    for (let i = 0; i < selects.length; i++) {
      const name = await selects[i].getAttribute('name') || '';
      const id = await selects[i].getAttribute('id') || '';
      console.log(`Select ${i}: name="${name}" id="${id}"`);
    }
    
    // Find all buttons
    const buttons = await page.locator('button, input[type="submit"]').all();
    console.log(`\nFound ${buttons.length} buttons:`);
    
    for (let i = 0; i < buttons.length; i++) {
      const type = await buttons[i].getAttribute('type') || '';
      const value = await buttons[i].getAttribute('value') || '';
      const text = await buttons[i].textContent() || '';
      console.log(`Button ${i}: type="${type}" value="${value}" text="${text.trim()}"`);
    }
    
    // Look for iframes (TinyMCE)
    const iframes = await page.locator('iframe').all();
    console.log(`\nFound ${iframes.length} iframes:`);
    
    for (let i = 0; i < iframes.length; i++) {
      const id = await iframes[i].getAttribute('id') || '';
      const name = await iframes[i].getAttribute('name') || '';
      console.log(`Iframe ${i}: id="${id}" name="${name}"`);
    }
    
    // Get form structure
    const forms = await page.locator('form').all();
    console.log(`\nFound ${forms.length} forms`);
    
    for (let i = 0; i < forms.length; i++) {
      const action = await forms[i].getAttribute('action') || '';
      const method = await forms[i].getAttribute('method') || '';
      const id = await forms[i].getAttribute('id') || '';
      console.log(`Form ${i}: id="${id}" action="${action}" method="${method}"`);
    }
  });
});