// Smoke tests for pages behind the auth wall. Runs against the separate
// `pediatric-ai-scribe-e2e` container (port 3553 on host, 3000 internal) which
// has TURNSTILE_SECRET_KEY="" + SMTP_HOST="" so tests can log in without a
// bot challenge and register auto-verifies.
//
// Each test logs in via the API (no UI interaction needed) and injects the
// session cookie into the browser context.

// Uses the shared fixture so the token cache is unified across every spec
// — each Playwright worker does ONE login for the whole run, staying under
// the 10/15min login rate-limit.
const { test, expect, E2E_BASE, loginAs } = require('../fixtures');

// ── Tests ────────────────────────────────────────────────────────────

test.describe('Auth-gated pages — main tabs', () => {
  test.beforeEach(async ({ context, request }) => {
    await loginAs(context, request);
  });

  test('Landing page shows tab navigation after login', async ({ page }) => {
    await page.goto(E2E_BASE + '/');
    await expect(page.locator('button.tab-btn').first()).toBeVisible({ timeout: 15000 });
  });

  // Each auth-gated tab test: activate the tab, assert its container becomes
  // visible + contains the expected anchor string. We use getTabPanel helpers
  // because components load lazily from /components/<tab>.html.
  const tabs = [
    { name: 'encounter',   anchor: /New Encounter|encounter|SOAP/i },
    { name: 'wellvisit',   anchor: /Well Visit|well visit/i },
    { name: 'chart',       anchor: /Chart|visits|patients/i },
    { name: 'vaxschedule', anchor: /Vaccine|schedule|dose/i },
    { name: 'catchup',     anchor: /Catch-up|catch up|schedule/i },
    { name: 'learning',    anchor: /Learning|quiz|topic/i },
    { name: 'dictation',   anchor: /Dictation|record|transcrib/i },
    { name: 'settings',    anchor: /Setting|profile|preferences|account/i },
    { name: 'calculators', anchor: /Pediatric Calculator|BP Percentile|BMI/i },
    { name: 'faq',         anchor: /FAQ|question|answer/i },
  ];

  for (const { name, anchor } of tabs) {
    test(`${name} tab loads content`, async ({ page, viewport }) => {
      await page.goto(E2E_BASE + '/');
      // On mobile the sidebar is hidden behind a hamburger. Open it so the
      // tab buttons become interactable.
      if (viewport && viewport.width <= 768) {
        await page.click('#btn-menu-toggle').catch(() => {});
      }
      await page.waitForSelector('button.tab-btn', { timeout: 15000 });
      const tabBtn = page.locator(`button.tab-btn[data-tab="${name}"]`);
      const isHidden = await tabBtn.evaluate((el) => el.classList.contains('hidden')).catch(() => true);
      test.skip(isHidden, `Tab "${name}" is hidden for this user role`);
      await tabBtn.click();
      // Wait for lazy component load to complete
      await page.waitForFunction(
        (t) => {
          const el = document.getElementById(t + '-tab');
          return el && el.classList.contains('active') && el.innerHTML.trim().length > 100;
        },
        name,
        { timeout: 15000 }
      );
      await expect(page.locator(`#${name}-tab`)).toContainText(anchor);
    });
  }
});