import { chromium } from 'playwright';

(async () => {
  console.log('=== Verifying Parameter Display (Updated UI) ===\n');

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

  let success = false;
  let foundDetails = [];

  page.on('console', msg => {
    const text = msg.text();
    if (text.includes('param') || text.includes('GCoreServer')) {
      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...');
    // 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(6000);

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

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

    if (paramBadges > 0) {
      console.log('\n✅ Parameter badges are visible!');

      console.log('\n5️⃣  Expanding first mapping to check parameter details...');

      // Find the first expansion tile (look for the parent div containing the ExpansionTile)
      const firstMapping = page.locator('div[role="button"]').first();

      if (await firstMapping.count() > 0) {
        await firstMapping.click();
        await page.waitForTimeout(2000);
        await page.screenshot({ path: 'verify-2-expanded-with-parameters.png', fullPage: true });

        // Check if we can find parameter keys like "GCoreServer", "PTZ head", "Caption"
        const hasGCoreServer = await page.locator('text=GCoreServer:').count();
        const hasPTZHead = await page.locator('text=PTZ head:').count();
        const hasCaption = await page.locator('text=Caption:').count();

        console.log(`   - GCoreServer parameter: ${hasGCoreServer > 0 ? '✅ Found' : '❌ Not found'}`);
        console.log(`   - PTZ head parameter: ${hasPTZHead > 0 ? '✅ Found' : '❌ Not found'}`);
        console.log(`   - Caption parameter: ${hasCaption > 0 ? '✅ Found' : '❌ Not found'}`);

        if (hasGCoreServer > 0 || hasPTZHead > 0 || hasCaption > 0) {
          success = true;

          // Try to extract some parameter values
          if (hasGCoreServer > 0) {
            const serverValue = await page.locator('text=GCoreServer:').locator('..').textContent();
            foundDetails.push(`GCoreServer value: ${serverValue}`);
          }
        }
      }
    } else {
      console.log('\n⚠️  No parameter badges found');
      console.log('   This might mean the browser is still serving cached code.');
      console.log('   Try hard-refreshing the browser (Ctrl+Shift+R or Ctrl+F5)');
    }

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

  console.log('\n' + '='.repeat(70));
  console.log('PARAMETER DISPLAY VERIFICATION RESULTS');
  console.log('='.repeat(70));

  if (success) {
    console.log('\n✅ SUCCESS: Parameter details are visible in expanded view!');
    console.log('\nThe following parameter types were detected:');
    foundDetails.forEach(detail => console.log(`   - ${detail}`));
    console.log('\nUsers can now:');
    console.log('   1. See parameter count badges on each action');
    console.log('   2. Expand any mapping to view full parameter details');
    console.log('   3. See which server (GCoreServer) each action targets');
  } else {
    console.log('\n❌ Parameter details not fully visible');
    console.log('\nPossible reasons:');
    console.log('   1. Browser cache - need hard refresh (Ctrl+Shift+R)');
    console.log('   2. Flutter app needs restart');
    console.log('   3. Check screenshots for visual verification');
  }

  console.log('\n📸 Screenshots saved:');
  console.log('   - verify-1-list-with-badges.png');
  console.log('   - verify-2-expanded-with-parameters.png');

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

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