const { test, expect } = require('@playwright/test');

const API_BASE = 'https://react.eluxnetworks.net';
const LOGIN_CREDENTIALS = {
  username: 'anandk',
  password: 'anandk_8'
};

test('capture network requests during login', async ({ page }) => {
  // Collect all network requests
  const requests = [];
  const responses = [];

  page.on('request', request => {
    if (request.url().includes('eluxnetworks') || request.url().includes('api')) {
      requests.push({
        url: request.url(),
        method: request.method(),
        postData: request.postData(),
        headers: request.headers()
      });
    }
  });

  page.on('response', async response => {
    if (response.url().includes('eluxnetworks') || response.url().includes('api')) {
      let body = '';
      try {
        body = await response.text();
      } catch (e) {
        body = 'Could not read body';
      }
      responses.push({
        url: response.url(),
        status: response.status(),
        body: body.substring(0, 1000)
      });
    }
  });

  // Go to dashboard (will redirect to login)
  await page.goto(`${API_BASE}/dashboard`);
  await page.waitForLoadState('networkidle');

  // Fill login form
  const usernameField = page.locator('input').first();
  const passwordField = page.locator('input[type="password"]');
  const submitButton = page.locator('button:has-text("Log In")');

  await usernameField.fill(LOGIN_CREDENTIALS.username);
  await passwordField.fill(LOGIN_CREDENTIALS.password);

  console.log('\\n=== CLICKING LOGIN BUTTON ===\\n');

  // Click login and wait for network
  await submitButton.click();
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(3000);

  console.log('\\n=== ALL REQUESTS ===');
  requests.forEach((req, i) => {
    console.log(`\\n[${i + 1}] ${req.method} ${req.url}`);
    if (req.postData) {
      console.log('    POST Data:', req.postData);
    }
  });

  console.log('\\n=== ALL RESPONSES ===');
  responses.forEach((res, i) => {
    console.log(`\\n[${i + 1}] ${res.status} ${res.url}`);
    if (res.body && res.body !== 'Could not read body' && !res.body.includes('<!doctype')) {
      console.log('    Body:', res.body.substring(0, 500));
    }
  });

  // Check localStorage for token
  const localStorage = await page.evaluate(() => {
    const items = {};
    for (let i = 0; i < window.localStorage.length; i++) {
      const key = window.localStorage.key(i);
      items[key] = window.localStorage.getItem(key);
    }
    return items;
  });

  console.log('\\n=== LOCAL STORAGE ===');
  console.log(JSON.stringify(localStorage, null, 2));

  // Check sessionStorage
  const sessionStorage = await page.evaluate(() => {
    const items = {};
    for (let i = 0; i < window.sessionStorage.length; i++) {
      const key = window.sessionStorage.key(i);
      items[key] = window.sessionStorage.getItem(key);
    }
    return items;
  });

  console.log('\\n=== SESSION STORAGE ===');
  console.log(JSON.stringify(sessionStorage, null, 2));

  // Take final screenshot
  await page.screenshot({ path: 'tests/screenshots/network-test-final.png', fullPage: true });
});