const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://calm-mud-04916b210.1.azurestaticapps.net/build-calculator', { timeout: 15000 });
  await page.waitForLoadState('networkidle', { timeout: 10000 }).catch(() => {});
  
  await page.locator('select').nth(0).selectOption("Q'Rath");
  await page.waitForTimeout(300);
  await page.locator('select').nth(1).selectOption('Orzum');
  await page.waitForTimeout(1000);
  
  const keys = await page.locator('.keyContainer > div > div').all();
  for (const key of keys) {
    const text = await key.textContent();
    if (text && text.trim().startsWith('TAB')) {
      console.log('TAB key textContent:', text.substring(0, 500));
      const innerHtml = await key.evaluate(el => el.innerHTML);
      console.log('TAB key innerHTML (first 2000):', innerHtml.substring(0, 2000));
      const childDivs = await key.locator('> div').all();
      console.log('Entity div count:', childDivs.length);
      for (const div of childDivs) {
        const t = await div.textContent();
        const s = await div.getAttribute('style');
        console.log('  Entity:', (t || '').trim(), 'Style:', (s || 'none').substring(0, 100));
      }
    }
  }
  
  await page.locator('.keyContainer > div > div').filter({ hasText: 'TAB' }).first().click();
  await page.waitForTimeout(1000);
  const entityViewName = await page.locator('.entityClickView #entityName').textContent();
  console.log('Entity view shows:', entityViewName);
  const entityViewHtml = await page.locator('.entityClickView').evaluate(el => el.innerHTML.substring(0, 1000));
  console.log('Entity view HTML:', entityViewHtml);
  
  await browser.close();
})().catch(e => { console.error(e.message); process.exit(1); });