import { chromium } from 'playwright';

(async () => {
  console.log('=== Testing Sync Error After Edit ===\n');

  const browser = await chromium.launch({ headless: false, slowMo: 500 });
  const context = await browser.newContext();
  const page = await context.newPage();

  let syncError = null;
  let apiErrors = [];

  page.on('console', msg => {
    const text = msg.text();

    // Capture sync errors
    if (text.includes('sync') || text.includes('Sync') || text.includes('SYNC')) {
      console.log(`[APP] ${text}`);
      if (text.includes('failed') || text.includes('Failed') || text.includes('ERROR')) {
        syncError = text;
        console.log(`❌ SYNC ERROR: ${text}`);
      }
    }

    // Capture all errors
    if (msg.type() === 'error' || text.includes('ERROR') || text.includes('🔴')) {
      console.log(`❌ ${text}`);
      apiErrors.push(text);
    }
  });

  // Capture API responses
  page.on('response', async response => {
    const url = response.url();

    if (url.includes('/configuration/action-mappings')) {
      const status = response.status();
      const method = response.request().method();

      console.log(`\n📡 API: ${method} ${status} ${url}`);

      if (status >= 400) {
        try {
          const body = await response.text();
          console.log(`❌ ERROR RESPONSE: ${body}`);
          apiErrors.push(`${method} ${status}: ${body}`);
        } catch (e) {
          console.log(`❌ ERROR (could not read body)`);
        }
      } else if (method === 'PUT' || method === 'POST') {
        try {
          const body = await response.text();
          console.log(`✅ SUCCESS RESPONSE: ${body}`);
        } catch (e) {
          console.log(`✅ SUCCESS (could not read body)`);
        }
      }
    }
  });

  // Capture request bodies
  page.on('request', request => {
    const url = request.url();
    if (url.includes('/configuration/action-mappings') && (request.method() === 'PUT' || request.method() === 'POST')) {
      console.log(`\n📤 REQUEST: ${request.method()} ${url}`);
      try {
        const postData = request.postData();
        if (postData) {
          console.log(`   Body: ${postData}`);
        }
      } catch (e) {
        console.log(`   (could not read body)`);
      }
    }
  });

  try {
    // Login
    console.log('1️⃣  Login...');
    await page.goto('http://100.81.138.77:8081/', { waitUntil: 'networkidle', timeout: 60000 });
    await page.waitForTimeout(3000);

    await page.click('body');
    await page.waitForTimeout(500);
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.type('admin', { delay: 50 });
    await page.waitForTimeout(300);
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.type('admin123', { delay: 50 });
    await page.waitForTimeout(300);
    await page.keyboard.press('Enter');
    await page.waitForTimeout(4000);

    console.log('\n2️⃣  Navigate to Action Mappings...');
    await page.goto('http://100.81.138.77:8081/#/action-mappings', { waitUntil: 'networkidle', timeout: 60000 });
    await page.waitForTimeout(2000);

    console.log('\n3️⃣  Download existing mappings...');
    for (let i = 0; i < 3; i++) {
      await page.keyboard.press('Tab');
      await page.waitForTimeout(300);
    }
    await page.keyboard.press('Enter');
    await page.waitForTimeout(5000);
    await page.screenshot({ path: 'sync-test-1-downloaded.png', fullPage: true });

    console.log('\n4️⃣  Edit first mapping...');
    // Tab to first item and press Enter
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.press('Enter');
    await page.waitForTimeout(2000);
    await page.screenshot({ path: 'sync-test-2-edit-form.png', fullPage: true });

    console.log('\n5️⃣  Modify name field...');
    // Name field should be focused, add " MODIFIED" to the end
    await page.keyboard.press('End');
    await page.waitForTimeout(200);
    await page.keyboard.type(' MODIFIED', { delay: 50 });
    await page.waitForTimeout(500);
    await page.screenshot({ path: 'sync-test-3-name-modified.png', fullPage: true });

    console.log('\n6️⃣  Save changes...');
    // Tab to Save button
    for (let i = 0; i < 10; i++) {
      await page.keyboard.press('Tab');
      await page.waitForTimeout(200);
    }
    await page.keyboard.press('Enter');
    await page.waitForTimeout(3000);
    await page.screenshot({ path: 'sync-test-4-after-save.png', fullPage: true });

    console.log('\n7️⃣  Trigger sync...');
    // Click the sync/upload button in the toolbar
    await page.keyboard.press('Escape'); // Close any dialogs
    await page.waitForTimeout(500);

    // The sync button should be in the toolbar - let me tab to it
    for (let i = 0; i < 2; i++) {
      await page.keyboard.press('Tab');
      await page.waitForTimeout(300);
    }
    await page.keyboard.press('Enter');

    console.log('   Waiting for sync to complete...');
    await page.waitForTimeout(8000);
    await page.screenshot({ path: 'sync-test-5-after-sync.png', fullPage: true });

  } catch (error) {
    console.error('\n💥 TEST ERROR:', error.message);
    await page.screenshot({ path: 'sync-test-error.png', fullPage: true });
  }

  console.log('\n' + '='.repeat(70));
  console.log('SYNC TEST RESULTS');
  console.log('='.repeat(70));

  if (syncError) {
    console.log(`\n❌ SYNC FAILED: ${syncError}`);
  }

  if (apiErrors.length > 0) {
    console.log(`\n❌ API ERRORS (${apiErrors.length}):`);
    apiErrors.forEach((err, i) => console.log(`   ${i + 1}. ${err}`));
  }

  if (!syncError && apiErrors.length === 0) {
    console.log('\n✅ No errors detected (sync may have succeeded)');
  }

  await page.waitForTimeout(3000);
  await browser.close();

  console.log('\n' + '='.repeat(70));
})();