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

(async () => {
  const browser = await chromium.launch({ headless: true, args: ['--no-sandbox'] });
  const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
  await page.goto('http://host.docker.internal:3003', { waitUntil: 'domcontentloaded', timeout: 30000 });
  await page.waitForTimeout(2000);

  // 1. Heatmap tab + cell click
  await page.click("button[onclick*='switchTab(\\'\\'heatmap\\'\\')'\"]");
  await page.waitForTimeout(1000);
  const cell = await page.locator('#hmTable tbody tr:nth-child(2) td:nth-child(2)');
  if (await cell.count() > 0) {
    await cell.click();
    await page.waitForTimeout(1000);
    const modalVisible = await page.evaluate(() => {
      const m = document.getElementById('cellDetailModal');
      return m && getComputedStyle(m).display !== 'none';
    });
    console.log('heatmap cell click: cellDetailModal visible =', modalVisible);
  } else {
    console.log('heatmap cell: NOT FOUND');
  }

  // 2. All Agents + filter 'Core Dev'
  await page.click("button[onclick*='switchTab(\\'\\'agents\\'\\')'\"]");
  await page.waitForTimeout(1000);
  const filterBtn = await page.locator('.filter-btn', { hasText: 'Core Dev' });
  if (await filterBtn.count() > 0) {
    await filterBtn.click();
    await page.waitForTimeout(500);
    const activeText = await page.evaluate(() => {
      const btn = document.querySelector('.filter-btn.active');
      return btn ? btn.textContent : 'NONE';
    });
    console.log('filter active button:', activeText);
  } else {
    console.log('filter Core Dev: NOT FOUND');
  }

  // 3. Recommendations + Apply button
  await page.click("button[onclick*='switchTab(\\'\\'recommendations\\'\\')'\"]");
  await page.waitForTimeout(1000);
  const applyBtn = await page.locator('button', { hasText: 'Apply Recommended Fixes' });
  if (await applyBtn.count() > 0) {
    await applyBtn.click();
    await page.waitForTimeout(500);
    const applyModalVisible = await page.evaluate(() => {
      const m = document.getElementById('applyModal');
      return m && getComputedStyle(m).display !== 'none';
    });
    console.log('apply click: applyModal visible =', applyModalVisible);
  } else {
    console.log('Apply Recommended Fixes: NOT FOUND');
  }

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