import { chromium } from 'playwright';

(async () => {
  console.log('=== Starting Action Mappings Debug Session ===\n');

  const browser = await chromium.launch({
    headless: false,
    args: ['--disable-web-security', '--disable-features=IsolateOrigins,site-per-process']
  });

  const context = await browser.newContext();
  const page = await context.newPage();

  // Capture all console messages
  page.on('console', msg => {
    const type = msg.type();
    const text = msg.text();
    if (type === 'error') {
      console.log('❌ CONSOLE ERROR:', text);
    } else if (text.includes('ERROR') || text.includes('🔴')) {
      console.log('⚠️  CONSOLE:', text);
    } else if (text.includes('REQUEST') || text.includes('RESPONSE') || text.includes('🔵') || text.includes('🟢')) {
      console.log('📡 CONSOLE:', text);
    }
  });

  // Capture all network activity
  const networkLog = [];
  page.on('request', request => {
    if (request.url().includes('api/v1')) {
      console.log('📤 REQUEST:', request.method(), request.url());
      const headers = request.headers();
      if (headers['authorization']) {
        console.log('   Auth:', headers['authorization'].substring(0, 20) + '...');
      }
    }
  });

  page.on('response', async response => {
    if (response.url().includes('api/v1')) {
      const status = response.status();
      const url = response.url();
      const statusIcon = status >= 400 ? '❌' : '✅';

      console.log(statusIcon + ' RESPONSE:', status, url);

      if (status >= 400) {
        try {
          const body = await response.text();
          console.log('   Error Body:', body);
        } catch (e) {
          console.log('   Could not read response body');
        }
      }

      networkLog.push({ status, url, timestamp: new Date().toISOString() });
    }
  });

  try {
    console.log('\n1️⃣  Navigating to login page...');
    await page.goto('http://100.81.138.77:8081/#/login', { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);

    console.log('\n2️⃣  Logging in with admin/admin123...');
    await page.fill('input[type="text"]', 'admin');
    await page.fill('input[type="password"]', 'admin123');
    await page.click('button:has-text("Login")');

    console.log('   Waiting for login to complete...');
    await page.waitForTimeout(4000);

    // Check if we're logged in
    const url = page.url();
    console.log('   Current URL:', url);

    console.log('\n3️⃣  Navigating to Action Mappings page...');
    await page.goto('http://100.81.138.77:8081/#/action-mappings', { waitUntil: 'networkidle' });
    await page.waitForTimeout(3000);

    console.log('\n4️⃣  Looking for download button...');
    // Try to find the download button
    const buttons = await page.locator('header button').all();
    console.log('   Found ' + buttons.length + ' buttons in header');

    // Click the cloud download button (should be the 3rd or 4th button)
    console.log('\n5️⃣  Clicking download button...');
    const downloadBtn = page.locator('button').filter({ has: page.locator('svg') }).nth(2);
    await downloadBtn.click();

    console.log('   Waiting for API response...');
    await page.waitForTimeout(5000);

    console.log('\n6️⃣  Checking for error messages on page...');
    const bodyText = await page.locator('body').textContent();
    if (bodyText.includes('error') || bodyText.includes('Error') || bodyText.includes('failed') || bodyText.includes('Failed')) {
      console.log('⚠️  Page contains error text');
    }

    console.log('\n=== Network Summary ===');
    networkLog.forEach(log => {
      console.log(log.timestamp, log.status, log.url);
    });

    console.log('\n✅ Debug session complete. Browser will stay open for 10 seconds...');
    await page.waitForTimeout(10000);

  } catch (error) {
    console.error('\n❌ Test failed with error:', error.message);
    console.error('Stack:', error.stack);
  }

  await browser.close();
  console.log('\n=== Session Ended ===');
})();