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 grid = page.locator('.calculatorGrid > div');
  const gCount = await grid.count();
  console.log('calculatorGrid child divs:', gCount);
  for (let i = 0; i < gCount; i++) {
    const cls = await grid.nth(i).getAttribute('class');
    const text = (await grid.nth(i).textContent() || '').trim().substring(0,80);
    console.log('  child', i, 'class:', JSON.stringify(cls), 'text:', JSON.stringify(text));
  }

  // Check for interval-related elements
  for (const sel of ['[class*="interval"]', '[class*="Interval"]', '[class*="timeline"]', '[class*="Timeline"]']) {
    console.log(sel, 'count:', await page.locator(sel).count());
  }

  // Also check displayContainer children
  const dc = page.locator('.displayContainer');
  const dcCount = await dc.count();
  console.log('displayContainer count:', dcCount);
  for (let i = 0; i < dcCount; i++) {
    const cls = await dc.nth(i).getAttribute('class');
    const text = (await dc.nth(i).textContent() || '').trim().substring(0,150);
    console.log('  dc', i, 'class:', JSON.stringify(cls), 'text:', JSON.stringify(text));
  }

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