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

test('home page stepper: no raw SX component calls visible', async ({ page }) => {
  await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' });
  await page.waitForTimeout(5000);

  const stepper = page.locator('[data-sx-island="home/stepper"]');
  await expect(stepper).toBeVisible({ timeout: 10000 });

  // The lake (rendered preview) should NOT show raw component calls
  const lake = stepper.locator('[data-sx-lake]');
  await expect(lake).toBeVisible({ timeout: 5000 });
  const lakeText = await lake.textContent();
  expect(lakeText).not.toContain('~cssx/tw');
  expect(lakeText).not.toContain(':tokens');

  // Should show rendered content (colored text)
  expect(lakeText.length).toBeGreaterThan(5);

  // Stepper navigation should work
  const buttons = stepper.locator('button');
  await expect(buttons).toHaveCount(2);
  const textBefore = await stepper.textContent();
  await buttons.last().click();
  await page.waitForTimeout(500);
  const textAfter = await stepper.textContent();
  expect(textAfter).not.toBe(textBefore);
});