const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true, args: ['--no-sandbox'] });
  const page = await browser.newPage();
  const errors = [];
  page.on('console', msg => { if (msg.type() === 'error') errors.push(msg.text()); });
  page.on('pageerror', err => errors.push(err.message));
  page.on('requestfailed', req => { if (!req.url().includes('favicon')) errors.push('NET: ' + req.url()); });

  await page.goto('http://host.docker.internal:3003', { waitUntil: 'domcontentloaded', timeout: 30000 });
  await page.waitForTimeout(2000);

  const tabNames = ['overview', 'agents', 'history', 'recommendations', 'heatmap', 'impact'];

  for (const tab of tabNames) {
    try {
      const ok = await page.evaluate((t) => {
        const btns = document.querySelectorAll('button.tab-btn');
        for (const btn of btns) {
          if (btn.getAttribute('onclick') && btn.getAttribute('onclick').includes("'" + t + "'")) {
            btn.click();
            return true;
          }
        }
        return false;
      }, tab);
      if (!ok) errors.push('CLICK_FAIL: tab=' + tab + ' not found');
      await page.waitForTimeout(800);
    } catch (e) {
      errors.push('CLICK_FAIL: tab=' + tab + ' err=' + e.message.substring(0, 120));
    }
  }

  // Click a heatmap cell
  try {
    const clicked = await page.evaluate(() => {
      const cell = document.querySelector('#hmTable tbody td:nth-child(2)');
      if (cell) { cell.click(); return true; }
      return false;
    });
    if (!clicked) errors.push('CLICK_FAIL: heatmap-cell not found');
    await page.waitForTimeout(1000);
  } catch (e) {
    errors.push('CLICK_FAIL: heatmap-cell err=' + e.message.substring(0, 120));
  }

  await browser.close();

  console.log('ERRORS:');
  console.log(JSON.stringify(errors));
})();