import { test, expect } from '@playwright/test';

// DB-free /install/preview e2e (spec: install-wizard-e2e-design § install-preview.spec.ts).
// No getDb(), no install state — runs against the dev server with any .dev.vars.

let consoleProblems: string[];

test.beforeEach(async ({ page }) => {
  consoleProblems = [];
  page.on('console', (msg) => {
    if (msg.type() === 'error' || msg.type() === 'warning')
      consoleProblems.push(`[${msg.type()}] ${msg.text()}`);
  });
});

test.afterEach(async () => {
  expect(consoleProblems, 'no console errors or warnings on happy path').toHaveLength(0);
});

test('P1: default theme renders DefaultShell', async ({ page }) => {
  await page.goto('/install/preview?theme=default&palette=default&mode=light&name=Test');
  await expect(page.locator('.site-header')).toBeVisible();
  await expect(page.locator('.editorial-shell')).toHaveCount(0);
  await expect(page.locator('.magazine-shell')).toHaveCount(0);
});

test('P2: editorial theme renders EditorialShell', async ({ page }) => {
  await page.goto('/install/preview?theme=editorial&palette=default&mode=light&name=Test');
  await expect(page.locator('.editorial-shell')).toBeVisible();
});

test('P3: magazine theme renders MagazineShell', async ({ page }) => {
  await page.goto('/install/preview?theme=magazine&palette=default&mode=light&name=Test');
  await expect(page.locator('.magazine-shell')).toBeVisible();
});

test('P3b: blog theme renders BlogShell', async ({ page }) => {
  await page.goto('/install/preview?theme=blog&palette=default&mode=light&name=Test');
  await expect(page.locator('.blog-header')).toBeVisible();
});

test('P4: palette param applied as data-palette', async ({ page }) => {
  await page.goto('/install/preview?theme=default&palette=slate&mode=light&name=Test');
  await expect(page.locator('html')).toHaveAttribute('data-palette', 'slate');
});

test('P5: mode=dark applied as data-mode', async ({ page }) => {
  await page.goto('/install/preview?theme=default&palette=default&mode=dark&name=Test');
  await expect(page.locator('html')).toHaveAttribute('data-mode', 'dark');
});

test('P6: mode=system omits data-mode (anti-FOUC)', async ({ page }) => {
  await page.goto('/install/preview?theme=default&palette=default&mode=system&name=Test');
  await expect(page.locator('html')).not.toHaveAttribute('data-mode');
});

test('P7: invalid theme clamps to default', async ({ page }) => {
  await page.goto('/install/preview?theme=nonexistent&palette=default&mode=light&name=Test');
  await expect(page.locator('.site-header')).toBeVisible();
});

test('P8: name param reflected in page', async ({ page }) => {
  await page.goto('/install/preview?theme=default&palette=default&mode=light&name=My+Blog');
  await expect(page.getByText('My Blog').first()).toBeVisible();
});

test('P10: X-Frame-Options SAMEORIGIN header', async ({ page }) => {
  const response = await page.request.get(
    '/install/preview?theme=default&palette=default&mode=light&name=T',
  );
  expect(response.headers()['x-frame-options']).toBe('SAMEORIGIN');
});