import { test, expect } from "playwright/test";

test("catalog maker shell loads without page errors", async ({ page }) => {
  const pageErrors = [];
  page.on("pageerror", (error) => pageErrors.push(error.message));

  await page.goto("/");
  await expect(page.locator("#settingsButton")).toBeVisible();
  await expect(page.locator("#recordId")).toBeVisible();
  await expect(page.locator("#variantHeader")).toBeVisible();

  await page.screenshot({ path: "test-results/catalog-maker-shell.png", fullPage: true });
  expect(pageErrors).toEqual([]);
});

test("settings modal opens and shows local database controls", async ({ page }) => {
  await page.goto("/");
  await page.locator("#settingsButton").click();

  await expect(page.locator("#settingsModal")).toBeVisible();
  await expect(page.locator("#localDbHost")).toBeVisible();
  await expect(page.locator("#testLocalDbButton")).toBeVisible();
});

test("catalog maker remains usable on a narrow viewport", async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto("/");

  await expect(page.locator("#findSourcesButton")).toBeVisible();
  await expect(page.locator("#settingsButton")).toBeVisible();
  await page.screenshot({ path: "test-results/catalog-maker-mobile.png", fullPage: true });
});

test("theme toggle switches and persists dark mode", async ({ page }) => {
  await page.goto("/");
  await expect(page.locator("html")).not.toHaveClass(/dark/);

  await page.locator("#themeToggle").click();
  await expect(page.locator("html")).toHaveClass(/dark/);
  await expect(page.locator("#themeToggle")).toHaveText("Light theme");

  await page.reload();
  await expect(page.locator("html")).toHaveClass(/dark/);
});