const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
  const page = await context.newPage();
  console.log('Navigating...');
  await page.goto('https://calm-mud-04916b210.1.azurestaticapps.net/build-calculator', { timeout: 30000, waitUntil: 'domcontentloaded' });
  console.log('Page loaded, waiting for Blazor...');
  await page.waitForTimeout(8000);

  console.log('Selecting Q\'Rath...');
  await page.locator('select').nth(0).selectOption("Q'Rath");
  await page.waitForTimeout(500);
  await page.locator('select').nth(1).selectOption('Orzum');
  await page.waitForTimeout(3000);

  console.log('Looking for TAB key...');
  const allKeys = await page.locator('.keyContainer > div > div').all();
  console.log('Total key divs found:', allKeys.length);
  for (let i = 0; i < allKeys.length; i++) {
    const text = await allKeys[i].textContent();
    const preview = (text || '').trim().substring(0, 100);
    console.log('Key ' + i + ' starts with:', preview.replace(/\n/g, ' '));
    if (text && text.trim().startsWith('TAB')) {
      console.log('FOUND TAB KEY at index ' + i);
      const entityDivs = await allKeys[i].locator('> div').all();
      console.log('Entity divs:', entityDivs.length);
      for (const d of entityDivs) {
        const t = await d.textContent();
        console.log('  Entity:', (t || '').trim());
      }
    }
  }

  console.log('Clicking TAB key...');
  try {
    const tabKey = page.locator('.keyContainer > div > div').filter({ hasText: 'TAB' }).first();
    await tabKey.click({ timeout: 5000 });
    console.log('Click succeeded');
  } catch (e) {
    console.log('Click failed:', e.message.substring(0, 200));
  }

  await page.waitForTimeout(3000);
  const entityViewCount = await page.locator('.entityClickView').count();
  console.log('entityClickView count:', entityViewCount);
  if (entityViewCount > 0) {
    const ev = await page.locator('.entityClickView #entityName').textContent();
    console.log('Entity view name:', ev);
    const id = await page.locator('.entityClickView .entitiesContainer').getAttribute('id');
    console.log('Entity container id:', id);
  } else {
    console.log('Entity click view NOT found - checking for errors...');
    const errorEls = await page.locator('[class*=\"error\"], [class*=\"Error\"]').count();
    console.log('Error elements:', errorEls);
  }

  await browser.close();
})().catch(e => { console.error(e.message); process.exit(1); });