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

/**
 * Test to troubleshoot login-related issues
 * This test checks different login selectors and error message patterns
 */
test.describe('Login Troubleshooting', () => {
  test('Analyze login form and error messages', async ({ page }) => {
    // Navigate to login page
    await page.goto(`${STAGING_URL}/community-login/`);
    await page.waitForLoadState('networkidle');
    
    console.log(`Current URL: ${page.url()}`);
    console.log(`Page title: ${await page.title()}`);
    
    // Take screenshot of login page
    await page.screenshot({ path: 'test-results/login-form.png' });
    
    // Check for form elements
    const usernameField = page.locator('#user_login');
    const passwordField = page.locator('#user_pass');
    const submitButton = page.locator('#wp-submit');
    
    console.log(`Username field visible: ${await usernameField.isVisible()}`);
    console.log(`Password field visible: ${await passwordField.isVisible()}`);
    console.log(`Submit button visible: ${await submitButton.isVisible()}`);
    
    // Check if form is in an iframe
    const loginIframe = page.frameLocator('iframe[name="login-form"]').first();
    const iframeExists = await page.locator('iframe[name="login-form"]').count() > 0;
    console.log(`Login form in iframe: ${iframeExists}`);
    
    // Test with valid credentials first
    await usernameField.fill('test_trainer');
    await passwordField.fill('Test123!');
    await submitButton.click();
    
    // Wait for navigation
    await page.waitForLoadState('networkidle');
    console.log(`After login URL: ${page.url()}`);
    console.log(`After login title: ${await page.title()}`);
    
    // Take screenshot after login
    await page.screenshot({ path: 'test-results/after-login.png' });
    
    // Navigate back to login
    await page.goto(`${STAGING_URL}/community-login/`);
    await page.waitForLoadState('networkidle');
    
    // Test with invalid credentials
    await usernameField.fill('invalid_user');
    await passwordField.fill('wrong_password');
    await submitButton.click();
    
    // Wait for potential error message
    await page.waitForLoadState('networkidle');
    
    // Take screenshot of error state
    await page.screenshot({ path: 'test-results/login-error.png' });
    
    // Check all possible error message selectors
    const errorSelectors = [
      '.login-error',
      '.login_error',
      '#login_error',
      '.error',
      '.message',
      '.notice-error',
      '.woocommerce-error',
      '.wp-die-message',
      'p.error',
      'div.error'
    ];
    
    console.log('Checking error message selectors:');
    for (const selector of errorSelectors) {
      const count = await page.locator(selector).count();
      const visible = count > 0 ? await page.locator(selector).isVisible() : false;
      const text = visible ? await page.locator(selector).textContent() : 'N/A';
      
      console.log(`- Selector: ${selector}`);
      console.log(`  Count: ${count}`);
      console.log(`  Visible: ${visible}`);
      console.log(`  Text: ${text}`);
    }
    
    // Check error message in page content
    const pageContent = await page.content();
    console.log('Page content contains:');
    console.log(`- "Invalid username": ${pageContent.includes('Invalid username')}`);
    console.log(`- "incorrect password": ${pageContent.includes('incorrect password')}`);
    console.log(`- "Unknown username": ${pageContent.includes('Unknown username')}`);
    console.log(`- "Error": ${pageContent.includes('Error')}`);
    
    // Check DOM structure around form
    const formParent = await page.evaluate(() => {
      const form = document.querySelector('form');
      return form ? form.parentElement?.tagName + '#' + form.parentElement?.id + '.' + form.parentElement?.className : 'Not found';
    });
    
    console.log(`Form parent element: ${formParent}`);
  });
});