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

test('Debug login page', async ({ page }) => {
  console.log('Starting login page debug');
  
  // Navigate to the login page
  console.log('Navigating to login page...');
  await page.goto(`${STAGING_URL}/community-login/`, { waitUntil: 'networkidle' });
  console.log(`Current URL: ${page.url()}`);
  
  // Take screenshot of the page
  await page.screenshot({ path: 'screenshots/login-page.png' });
  console.log('Screenshot saved to screenshots/login-page.png');
  
  // Get page title
  const title = await page.title();
  console.log(`Page title: ${title}`);
  
  // Check for redirects
  if (!page.url().includes('community-login')) {
    console.log(`⚠️ Page was redirected to: ${page.url()}`);
  }
  
  // Check for iframes
  const iframes = await page.$$('iframe');
  console.log(`Number of iframes: ${iframes.length}`);
  
  // Dump HTML content
  const html = await page.content();
  console.log('First 500 chars of HTML:');
  console.log(html.substring(0, 500));
  
  // Look for common login form elements with various selectors
  const selectors = [
    '#user_login',
    '#username',
    'input[name="log"]',
    'input[name="username"]',
    '#user_pass',
    '#password',
    'input[name="pwd"]',
    'input[name="password"]',
    '#wp-submit',
    'input[type="submit"]',
    'button[type="submit"]'
  ];
  
  console.log('\nChecking for form elements:');
  for (const selector of selectors) {
    const count = await page.$$eval(selector, (elements) => elements.length).catch(() => 0);
    if (count > 0) {
      console.log(`✅ Found ${count} elements matching selector: ${selector}`);
      const element = await page.$(selector);
      if (element) {
        const tagName = await element.evaluate(el => el.tagName).catch(() => 'Unknown');
        const type = await element.evaluate(el => el.getAttribute('type')).catch(() => 'Unknown');
        const name = await element.evaluate(el => el.getAttribute('name')).catch(() => 'Unknown');
        const id = await element.evaluate(el => el.getAttribute('id')).catch(() => 'Unknown');
        console.log(`   Tag: ${tagName}, Type: ${type}, Name: ${name}, ID: ${id}`);
      }
    } else {
      console.log(`❌ No elements found for selector: ${selector}`);
    }
  }
  
  // Check for error containers
  const errorSelectors = [
    '.login-error',
    '#login_error',
    '.login_error',
    '.notice-error',
    '.woocommerce-error',
    '.wp-die-message'
  ];
  
  console.log('\nChecking for error containers:');
  for (const selector of errorSelectors) {
    const count = await page.$$eval(selector, (elements) => elements.length).catch(() => 0);
    console.log(`${selector}: ${count > 0 ? '✅ Found' : '❌ Not found'}`);
  }
  
  // Output all forms on the page
  const forms = await page.$$('form');
  console.log(`\nNumber of forms: ${forms.length}`);
  
  for (let i = 0; i < forms.length; i++) {
    const form = forms[i];
    const action = await form.evaluate(f => f.getAttribute('action') || 'No action').catch(() => 'Unknown');
    const method = await form.evaluate(f => f.getAttribute('method') || 'No method').catch(() => 'Unknown');
    const id = await form.evaluate(f => f.getAttribute('id') || 'No id').catch(() => 'Unknown');
    const className = await form.evaluate(f => f.getAttribute('class') || 'No class').catch(() => 'Unknown');
    
    console.log(`\nForm #${i+1}:`);
    console.log(`  ID: ${id}`);
    console.log(`  Class: ${className}`);
    console.log(`  Action: ${action}`);
    console.log(`  Method: ${method}`);
    
    // Get inputs in the form
    const inputs = await form.$$('input');
    console.log(`  Inputs: ${inputs.length}`);
    
    for (const input of inputs) {
      const type = await input.evaluate(i => i.getAttribute('type') || 'No type').catch(() => 'Unknown');
      const name = await input.evaluate(i => i.getAttribute('name') || 'No name').catch(() => 'Unknown');
      const id = await input.evaluate(i => i.getAttribute('id') || 'No id').catch(() => 'Unknown');
      console.log(`    Input: Type=${type}, Name=${name}, ID=${id}`);
    }
  }
  
  console.log('\nLogin page debug complete');
});