const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();

  page.on('console', msg => {
    if (msg.type() === 'error' || msg.type() === 'warning')
      console.log(msg.type().toUpperCase() + ':', msg.text().substring(0, 300));
  });

  page.on('pageerror', err => console.log('PAGE_ERR:', err.message));

  await page.goto('http://localhost:5111/build-calculator', { timeout: 30000, waitUntil: 'load' });
  console.log('Page load event fired');

  // Read button text immediately
  let buttons = page.locator('.keyContainer > div > div');
  let count = await buttons.count();
  console.log('Button count:', count);
  let qBtn = buttons.filter({ hasText: /^Q/ }).first();
  console.log('Immediate Q button text:', JSON.stringify(await qBtn.textContent()));

  // Wait for Blazor to finish initializing - look for .blazor-error-boundary or just wait
  // Actually, let's poll for the button text changing from what it is now
  for (let i = 0; i < 15; i++) {
    await page.waitForTimeout(1000);
    const text = (await buttons.nth(0).textContent() || '').trim();
    // Check all 19 buttons for Q and F keys
    const allTexts = [];
    for (let j = 0; j < count; j++) {
      const t = (await buttons.nth(j).textContent() || '').trim();
      if (t.toUpperCase().startsWith('Q') || t.toUpperCase().startsWith('F') || t.toUpperCase().startsWith('W') || t.toUpperCase().startsWith('E')) {
        allTexts.push(`  B${j}: "${t.substring(0,30)}"`);
      }
    }
    console.log(`After ${i+1}s:`);
    allTexts.forEach(t => console.log(t));
  }

  // Now check what the filter is currently showing
  const selects = page.locator('select');
  console.log('\nSelect values:');
  for (let s = 0; s < await selects.count(); s++) {
    const val = await selects.nth(s).inputValue();
    const opts = await selects.nth(s).locator('option').allTextContents();
    const selectedIdx = await selects.nth(s).evaluate(el => el.selectedIndex);
    console.log(` Select ${s}: value=${val}, selectedIndex=${selectedIdx}, options=${JSON.stringify(opts.map(o=>o.trim()))}`);
  }

  await browser.close();
})();