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();

  // Find the timeline section (has "Shows economy" text)
  let timelineIdx = -1;
  for (let i = 0; i < gCount; i++) {
    const txt = (await gridItems.nth(i).textContent() || '');
    if (txt.includes('economy')) {
      timelineIdx = i;
      break;
    }
  }
  console.log('Timeline grid item index:', timelineIdx);

  // Get full timeline text before adding
  if (timelineIdx >= 0) {
    const text = (await gridItems.nth(timelineIdx).textContent() || '').trim();
    console.log('Timeline text before add (first 500 chars):');
    console.log(text.substring(0, 500));
    console.log('...');
    console.log('Contains Acropolis:', text.includes('Acropolis'));
    console.log('Contains Requested:', text.includes('Requested'));
  }

  // Click Q to add Acropolis
  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 });
      console.log('Clicked Q at index', i);
      break;
    }
  }
  await page.waitForTimeout(2000);

  // Check entity view
  const evName = (await page.locator('.entityClickView #entityName').textContent() || '').trim();
  console.log('EntityView name after add:', evName);

  // Get timeline text after adding
  if (timelineIdx >= 0) {
    const text = (await gridItems.nth(timelineIdx).textContent() || '').trim();
    console.log('Timeline text after add (first 500 chars):');
    console.log(text.substring(0, 500));
    console.log('Contains Acropolis:', text.includes('Acropolis'));
    console.log('Contains Requested:', text.includes('Requested'));
    console.log('Contains New:', text.includes('New'));
  }

  // Count Virtualize items in timeline
  const virtualItems = page.locator('[style*="grid-template-columns: 1fr 1fr"]');
  console.log('Virtualize items (grid items):', await virtualItems.count());

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

  // Check entity view after clear
  const evAfterClear = await page.locator('.entityClickView #entityName').count();
  console.log('EntityView #entityName count after clear:', evAfterClear);
  if (evAfterClear > 0) {
    console.log('EntityView name after clear:', (await page.locator('.entityClickView #entityName').textContent() || '').trim());
  }

  // Check timeline after clear
  if (timelineIdx >= 0) {
    const text = (await gridItems.nth(timelineIdx).textContent() || '').trim();
    console.log('Timeline text after clear (first 300 chars):');
    console.log(text.substring(0, 300));
    console.log('Contains Acropolis:', text.includes('Acropolis'));
    console.log('Virtualize items:', await virtualItems.count());
  }

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