// ============================================================
// UI STATE PERSISTENCE — sub-pill / sub-tab choices survive a
// full page reload (simulating sign-out / sign-in or browser
// restart). Guards against regressions in the ui-state.js +
// localStorage wiring.
// ============================================================

const { test, expect, E2E_BASE } = require('../fixtures');

async function gotoHome(page) {
  await page.goto(E2E_BASE + '/');
  await page.waitForSelector('button.tab-btn', { timeout: 15000 });
}

async function openDesktopTab(page, name) {
  const vp = page.viewportSize();
  if (vp && vp.width <= 768) {
    await page.click('#btn-menu-toggle').catch(() => {});
  }
  await page.click(`button.tab-btn[data-tab="${name}"]`);
  await page.waitForFunction((t) => {
    const el = document.getElementById(t + '-tab');
    return el && el.classList.contains('active') && el.innerHTML.trim().length > 100;
  }, name, { timeout: 15000 });
}

test.describe('UI state survives page reload', () => {

  test('ped_last_tab → user lands on last-active tab after reload', async ({ authedPage: _, page }) => {
    await gotoHome(page);
    await openDesktopTab(page, 'calculators');
    // Reload (keeps cookie, clears _componentCache + in-memory DOM state)
    await page.reload();
    await page.waitForSelector('button.tab-btn', { timeout: 15000 });
    await expect.poll(async () => {
      return await page.locator('#calculators-tab.active').count();
    }, { timeout: 5000 }).toBe(1);
  });

  test('calculators nav pill persists across reload', async ({ authedPage: _, page }) => {
    await gotoHome(page);
    await openDesktopTab(page, 'calculators');
    // Switch to GCS
    await page.click('button.calc-nav-pill[data-calc="gcs"]');
    await expect(page.locator('button.calc-nav-pill[data-calc="gcs"].active')).toBeVisible();
    await page.reload();
    await page.waitForSelector('button.calc-nav-pill[data-calc="gcs"]', { timeout: 15000 });
    // Same pill should be active after reload
    await expect(page.locator('button.calc-nav-pill[data-calc="gcs"].active')).toBeVisible({ timeout: 5000 });
    // And the corresponding panel should be un-hidden
    await expect(page.locator('#calc-gcs')).not.toHaveClass(/hidden/);
  });

  test('bedside sub-pill persists across reload', async ({ authedPage: _, page }) => {
    await gotoHome(page);
    await openDesktopTab(page, 'bedside');
    await page.click('button.calc-pill[data-em="anaphylaxis"]');
    await expect(page.locator('button.calc-pill[data-em="anaphylaxis"].active')).toBeVisible();
    await page.reload();
    await page.waitForSelector('button.calc-pill[data-em="anaphylaxis"]', { timeout: 15000 });
    await expect(page.locator('button.calc-pill[data-em="anaphylaxis"].active')).toBeVisible({ timeout: 5000 });
    // The anaphylaxis em-section should be the visible one
    await expect.poll(async () => {
      return await page.locator('#em-anaphylaxis').evaluate(el => el.style.display);
    }, { timeout: 5000 }).not.toBe('none');
  });

  test('well-visit sub-tab persists across reload', async ({ authedPage: _, page }) => {
    await gotoHome(page);
    await openDesktopTab(page, 'wellvisit');
    await page.click('button.wv-subtab-btn[data-subtab="milestones"]');
    await expect(page.locator('#wv-panel-milestones')).not.toHaveClass(/hidden/);
    await page.reload();
    await page.waitForSelector('button.wv-subtab-btn[data-subtab="milestones"]', { timeout: 15000 });
    await expect(page.locator('#wv-panel-milestones')).not.toHaveClass(/hidden/, { timeout: 5000 });
  });

  test('PE guide age group + system persist across reload', async ({ authedPage: _, page }) => {
    await gotoHome(page);
    await openDesktopTab(page, 'peguide');
    await page.selectOption('#pe-age-group', 'adolescent');
    await page.click('button[data-pesystem="neuro"]');
    await expect(page.locator('button[data-pesystem="neuro"].active')).toBeVisible();
    await page.reload();
    await page.waitForSelector('#pe-age-group', { timeout: 15000 });
    await expect(page.locator('#pe-age-group')).toHaveValue('adolescent', { timeout: 5000 });
    await expect(page.locator('button[data-pesystem="neuro"].active')).toBeVisible({ timeout: 5000 });
  });
});