import { chromium } from 'playwright';

(async () => {
  console.log('=== Testing Parameter Viewing (Phase 1: Read-Only) ===\n');

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

  let parametersFound = false;
  let parameterDetails = [];

  page.on('console', msg => {
    const text = msg.text();
    if (text.includes('param') || text.includes('Parameter')) {
      console.log(`[APP] ${text}`);
    }
  });

  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 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(6000);

    console.log('\n4️⃣  Check for parameter badges...');
    await page.screenshot({ path: 'params-1-list-view.png', fullPage: true });

    // Check for parameter count badges in the UI
    const paramBadges = await page.locator('text=/\\d+ params?/').count();
    console.log(`   Found ${paramBadges} parameter badges`);

    if (paramBadges > 0) {
      parametersFound = true;

      // Get details of first few parameter badges
      const badges = await page.locator('text=/\\d+ params?/').all();
      for (let i = 0; i < Math.min(5, badges.length); i++) {
        const text = await badges[i].textContent();
        parameterDetails.push(text);
      }
    }

    console.log('\n5️⃣  Click on first mapping with parameters...');
    // Find and click the first mapping card
    const firstCard = await page.locator('div[role="button"]').first();
    if (await firstCard.count() > 0) {
      await firstCard.click();
      await page.waitForTimeout(2000);
      await page.screenshot({ path: 'params-2-mapping-details.png', fullPage: true });
    }

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

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

  if (parametersFound) {
    console.log('\n✅ SUCCESS: Parameters are visible in the UI');
    console.log(`   Parameter badges found: ${parameterDetails.length}`);
    if (parameterDetails.length > 0) {
      console.log('\n   Examples:');
      parameterDetails.forEach((detail, i) => {
        console.log(`   ${i + 1}. ${detail}`);
      });
    }
  } else {
    console.log('\n⚠️  No parameter badges visible');
    console.log('   This could mean:');
    console.log('   - Mappings have no parameters (all empty)');
    console.log('   - UI update not loaded yet (refresh browser)');
    console.log('   - Check screenshots for visual confirmation');
  }

  console.log('\n📸 Screenshots saved:');
  console.log('   - params-1-list-view.png');
  console.log('   - params-2-mapping-details.png (if clicked)');

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

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