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

test('debug email page', async ({ page }) => {
  // Enable console logging
  page.on('console', msg => console.log('CONSOLE:', msg.type(), msg.text()));
  page.on('pageerror', err => console.log('PAGE ERROR:', err.message));

  // Track network requests
  page.on('request', req => {
    if (req.url().includes('staff-email') || req.url().includes('email_addresses')) {
      console.log('REQUEST:', req.method(), req.url());
    }
  });
  page.on('response', res => {
    if (res.url().includes('staff-email') || res.url().includes('email_addresses')) {
      console.log('RESPONSE:', res.status(), res.url());
    }
  });

  // Step 1: Go to login page
  console.log('Step 1: Going to login page...');
  await page.goto('http://platform.lvh.me:5173/platform/login');
  await page.screenshot({ path: 'step1-login-page.png' });
  console.log('Login page URL:', page.url());

  // Step 2: Fill login form
  console.log('Step 2: Filling login form...');
  await page.waitForSelector('input[type="email"], input[name="email"], input[placeholder*="email" i]', { timeout: 10000 });
  await page.fill('input[type="email"], input[name="email"], input[placeholder*="email" i]', 'poduck@gmail.com');
  await page.fill('input[type="password"], input[name="password"]', 'starry12');
  await page.screenshot({ path: 'step2-filled-form.png' });

  // Step 3: Submit login
  console.log('Step 3: Submitting login...');
  await page.click('button[type="submit"]');

  // Wait for navigation
  await page.waitForTimeout(3000);
  await page.screenshot({ path: 'step3-after-login.png' });
  console.log('After login URL:', page.url());

  // Step 4: Navigate to email page
  console.log('Step 4: Navigating to email page...');
  await page.goto('http://platform.lvh.me:5173/platform/email');
  await page.waitForTimeout(5000);
  await page.screenshot({ path: 'step4-email-page.png' });
  console.log('Email page URL:', page.url());

  // Step 5: Check page content
  console.log('Step 5: Checking page content...');
  const html = await page.content();
  console.log('Page HTML length:', html.length);
  console.log('Contains "Get Messages":', html.includes('Get Messages'));
  console.log('Contains "No email accounts":', html.includes('No email accounts'));
  console.log('Contains "timm":', html.includes('timm'));

  // Check for any visible text
  const bodyText = await page.locator('body').textContent();
  console.log('Body text (first 1000 chars):', bodyText?.substring(0, 1000));
});