import { chromium } from 'playwright';

(async () => {
  console.log('=== Checking API Data vs App Display ===\n');

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

  let apiData = null;

  // Capture API response
  page.on('response', async (response) => {
    const url = response.url();
    if (url.includes('/api/v1/configuration/action-mappings') && response.request().method() === 'GET') {
      try {
        const json = await response.json();
        apiData = json;
        console.log('✅ Captured API Response');
        console.log(`Total mappings: ${json.mappings?.length || 0}\n`);
      } catch (e) {
        console.log('❌ Failed to parse API response');
      }
    }
  });

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

    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('✅ Logged in\n');

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

    console.log('3️⃣  Triggering download from server...');
    // Tab to download button
    for (let i = 0; i < 3; i++) {
      await page.keyboard.press('Tab');
      await page.waitForTimeout(300);
    }
    await page.keyboard.press('Enter');
    await page.waitForTimeout(8000);

    console.log('✅ Download completed\n');

    // Find the specific mapping in API response
    if (apiData && apiData.mappings) {
      const mapping = apiData.mappings.find(m => m.name === 'GeVi PanLeft_101027');

      if (mapping) {
        console.log('📋 API Data for "GeVi PanLeft_101027":');
        console.log('=' .repeat(70));
        console.log(`ID: ${mapping.id}`);
        console.log(`Name: ${mapping.name}`);
        console.log(`\nInput Actions:`);
        if (mapping.input_actions && mapping.input_actions.length > 0) {
          mapping.input_actions.forEach((input, idx) => {
            console.log(`  ${idx + 1}. Action: ${input.action}`);
            console.log(`     Parameters:`, JSON.stringify(input.parameters, null, 6));
          });
        }
        console.log(`\nOutput Actions:`);
        if (mapping.output_actions && mapping.output_actions.length > 0) {
          mapping.output_actions.forEach((output, idx) => {
            console.log(`  ${idx + 1}. Action: ${output.action}`);
            console.log(`     Parameters:`, JSON.stringify(output.parameters, null, 6));
          });
        }
        console.log('=' .repeat(70));
      } else {
        console.log('❌ Mapping "GeVi PanLeft_101027" NOT FOUND in API response');
      }
    }

    console.log('\n4️⃣  Checking what app displays...');
    await page.screenshot({ path: 'api-check-list.png', fullPage: true });

    // Try to find and click on the mapping
    const mappingText = await page.getByText('GeVi PanLeft_101027').first();
    if (await mappingText.count() > 0) {
      console.log('✅ Found "GeVi PanLeft_101027" in app UI');

      // Try to get the displayed output actions
      const card = mappingText.locator('xpath=ancestor::div[contains(@class, "card") or contains(@class, "Card")]').first();
      const cardText = await card.textContent();
      console.log('\n📱 App Display:');
      console.log('=' .repeat(70));
      console.log(cardText);
      console.log('=' .repeat(70));
    } else {
      console.log('❌ "GeVi PanLeft_101027" NOT FOUND in app UI');
    }

  } catch (error) {
    console.error('\n💥 ERROR:', error.message);
  }

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

  console.log('\n✅ Check complete! Screenshot saved to api-check-list.png');
})();