const { test, expect } = require('playwright/test');

// Framework-level: lake preserves SSR content during hydration
test('framework: lake content is never raw SX during hydration', async ({ page }) => {
  await page.context().clearCookies();
  await page.addInitScript(() => {
    window.__lakeStates = [];
    const observer = new MutationObserver(() => {
      const lake = document.querySelector('[data-sx-lake="home-preview"]');
      if (lake) {
        const text = lake.textContent;
        if (text && text.length > 0) window.__lakeStates.push(text.slice(0, 200));
      }
    });
    document.addEventListener('DOMContentLoaded', () => {
      observer.observe(document.body, { childList: true, subtree: true, characterData: true });
    });
  });
  await page.goto('http://localhost:8013/sx/', { waitUntil: 'networkidle' });
  await page.waitForTimeout(8000);
  const states = await page.evaluate(() => window.__lakeStates);
  for (const state of states) {
    expect(state).not.toContain('~tw');
    expect(state).not.toContain(':tokens');
  }
});

// Stepper: back then forward preserves structure
test('stepper: back then forward keeps spans inside h1', async ({ page }) => {
  await page.context().clearCookies();
  await page.goto('http://localhost:8013/sx/', { waitUntil: 'networkidle' });
  await page.waitForTimeout(8000);

  const back = page.locator('button:has-text("◀")');
  const fwd = page.locator('button:has-text("▶")');

  for (let i = 0; i < 6; i++) { await back.click(); await page.waitForTimeout(500); }
  for (let i = 0; i < 6; i++) { await fwd.click(); await page.waitForTimeout(500); }
  await page.waitForTimeout(1000);

  const lake = page.locator('[data-sx-lake="home-preview"]');
  const h1Spans = lake.locator('h1 span');
  expect(await h1Spans.count()).toBe(4);
});