const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('http://localhost:5111/build-calculator', { timeout: 30000, waitUntil: 'networkidle' });
  await page.waitForTimeout(10000);

  const selects = page.locator('select');
  await selects.nth(0).selectOption("Q'Rath");
  await page.waitForTimeout(500);
  await selects.nth(1).selectOption('Orzum');
  await page.waitForTimeout(2000);

  const gridItems = page.locator('.calculatorGrid > div');
  const gCount = await gridItems.count();

  for (let i = 0; i < gCount; i++) {
    const txt = (await gridItems.nth(i).textContent() || '').trim();
    const cls = await gridItems.nth(i).getAttribute('class');
    console.log('=== Grid Item', i, 'class:', cls, '===');
    console.log(txt.substring(0, 200));
    console.log('---');
  }

  console.log('\n=== Clicking Q ===');
  const buttons = page.locator('.keyContainer > div > div');
  const count = await buttons.count();
  for (let i = 0; i < count; i++) {
    const txt = (await buttons.nth(i).textContent()) || '';
    if (txt.trim().toUpperCase().startsWith('Q')) {
      await buttons.nth(i).click({ force: true });
      break;
    }
  }
  await page.waitForTimeout(2000);

  console.log('\n=== After Q click ===');
  for (let i = 0; i < gCount; i++) {
    const txt = (await gridItems.nth(i).textContent() || '').trim();
    console.log('Grid', i, '- contains Acropolis:', txt.includes('Acropolis'));
    if (txt.includes('Acropolis')) {
      console.log('  Text around Acropolis:');
      const idx = txt.indexOf('Acropolis');
      console.log('  ', txt.substring(Math.max(0, idx - 40), idx + 40));
    }
  }

  // Entity view
  console.log('\nEntityView name:', (await page.locator('.entityClickView #entityName').textContent() || '').trim());

  // Click Clear
  await page.locator('button').filter({ hasText: 'Clear Build Order' }).click();
  await page.waitForTimeout(2000);

  console.log('\n=== After Clear ===');
  for (let i = 0; i < gCount; i++) {
    const txt = (await gridItems.nth(i).textContent() || '').trim();
    console.log('Grid', i, '- contains Acropolis:', txt.includes('Acropolis'));
  }

  console.log('\nEntityView after clear count:', await page.locator('.entityClickView #entityName').count());

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