// Island SSR tests — verify islands render content server-side
// These tests disable JavaScript to verify pure SSR output.

const { test, expect } = require('playwright/test');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';

test.describe('Island SSR', () => {

  test('header island renders logo and tagline without JavaScript', async ({ browser }) => {
    const context = await browser.newContext({ javaScriptEnabled: false });
    const page = await context.newPage();
    await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'domcontentloaded' });

    // The header island should contain rendered HTML, not empty
    const header = page.locator('[data-sx-island="layouts/header"]');
    await expect(header).not.toBeEmpty();

    // Should contain the logo text
    const headerText = await header.textContent();
    expect(headerText).toContain('sx');

    // Should contain the tagline
    expect(headerText).toContain('reactive');

    // Should contain copyright
    expect(headerText).toContain('Giles Bradshaw');

    await context.close();
  });

  test('header island has styled elements without JavaScript', async ({ browser }) => {
    const context = await browser.newContext({ javaScriptEnabled: false });
    const page = await context.newPage();
    await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'domcontentloaded' });

    // The header should have actual HTML elements, not raw SX text
    const header = page.locator('[data-sx-island="layouts/header"]');
    const links = await header.locator('a').count();
    expect(links).toBeGreaterThan(0);

    // Should NOT contain raw SX calls
    const text = await header.textContent();
    expect(text).not.toContain('(~');
    expect(text).not.toContain(':tokens');

    await context.close();
  });

  test('home stepper island renders content without JavaScript', async ({ browser }) => {
    const context = await browser.newContext({ javaScriptEnabled: false });
    const page = await context.newPage();
    await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });

    // The stepper island should contain rendered HTML
    const stepper = page.locator('[data-sx-island="home/stepper"]');
    await expect(stepper).not.toBeEmpty();

    // Should have actual content — not be 0 bytes
    const html = await stepper.innerHTML();
    expect(html.length).toBeGreaterThan(10);

    // SSR should produce actual HTML elements, not raw SX
    // The stepper has a code-view div with styled spans
    expect(html).toContain('<div');
    expect(html).toContain('class=');

    await context.close();
  });

  test('island SSR includes navigation buttons', async ({ browser }) => {
    const context = await browser.newContext({ javaScriptEnabled: false });
    const page = await context.newPage();
    await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });

    // Navigation buttons should be rendered server-side
    const navLinks = page.locator('a[href*="/sx/("]');
    const count = await navLinks.count();
    expect(count).toBeGreaterThan(3);

    // At least Geography, Language, Applications should be visible
    const bodyText = await page.textContent('body');
    expect(bodyText).toContain('Geography');
    expect(bodyText).toContain('Language');
    expect(bodyText).toContain('Applications');

    await context.close();
  });

  test('geography page renders full content without JavaScript', async ({ browser }) => {
    const context = await browser.newContext({ javaScriptEnabled: false });
    const page = await context.newPage();
    await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'domcontentloaded' });

    // Main content should have the Geography heading
    const heading = page.locator('h1, h2');
    await expect(heading.first()).toContainText('Geography');

    // Should have the Rendering Pipeline section
    const body = await page.textContent('body');
    expect(body).toContain('Rendering Pipeline');
    expect(body).toContain('OCaml');

    await context.close();
  });
});