// Verifies every tab has a working (i) info button that opens plain-language help.
const { chromium } = require('playwright');
const BASE = 'https://moslem04.falahos.my/';
const results = [];
const consoleErrors = [];
function record(name, pass, detail = '') { results.push({ name, pass, detail }); console.log(`${pass ? 'PASS' : 'FAIL'}  ${name}${detail ? '  — ' + detail : ''}`); }

const TABS = ['Coverage', 'Faraid', 'Assets', 'Wassiyah', 'Hibah', 'Family Waqf', 'Nominate', 'Trigger', 'Claims (H2)', 'Settings'];

async function main() {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 390, height: 844 } });
  page.on('console', m => { if (m.type() === 'error') consoleErrors.push(m.text()); });
  page.on('pageerror', e => consoleErrors.push(e.message));

  await page.goto(BASE, { waitUntil: 'networkidle' });

  for (const label of TABS) {
    await page.locator('nav button.tab', { hasText: label }).click();
    await page.waitForTimeout(200);

    const infoBtn = page.locator('.module-header .info-btn');
    const btnVisible = await infoBtn.isVisible();
    record(`"${label}": info button visible`, btnVisible);
    if (!btnVisible) continue;

    await infoBtn.click();
    await page.waitForTimeout(150);
    const panelVisible = await page.locator('.info-panel').isVisible();
    const whatText = await page.locator('.info-panel .info-section p').first().textContent().catch(() => '');
    record(`"${label}": info panel opens with non-trivial explanation`, panelVisible && whatText.length > 40, `${whatText.length} chars`);

    // toggle closed
    await infoBtn.click();
    await page.waitForTimeout(150);
    const panelClosed = await page.locator('.info-panel').isVisible().catch(() => false);
    record(`"${label}": info panel closes on second click`, !panelClosed);
  }

  record('No uncaught JS console errors across all info panels', consoleErrors.length === 0, consoleErrors.join(' || '));

  await browser.close();
  const passCount = results.filter(r => r.pass).length;
  const failCount = results.length - passCount;
  console.log(`\n${passCount} passed, ${failCount} failed, ${results.length} total`);
  if (failCount > 0) results.filter(r => !r.pass).forEach(r => console.log(`  - ${r.name}: ${r.detail}`));
  process.exit(failCount > 0 ? 1 : 0);
}
main().catch(e => { console.error('SCRIPT ERROR:', e); process.exit(2); });