import { test, expect } from "@playwright/test";
import { createServer, type ViteDevServer } from "vite";

let server: ViteDevServer;
let url: string;
test.beforeAll(async () => {
  server = await createServer({ server: { host: "127.0.0.1", port: 0 } });
  await server.listen();
  url = server.resolvedUrls!.local[0]! + "e2e/fixtures/memory-review.html";
});
test.afterAll(async () => { await server?.close(); });
test("reviewer edits the final summary and selects what to save on desktop and mobile", async ({ page }) => {
  const errors: string[] = [];
  page.on("pageerror", e => errors.push(e.message));
  await page.setViewportSize({ width: 1280, height: 900 });
  await page.goto(url);
  await expect(page.getByRole("form", { name: "Memory summary" })).toBeVisible();
  await page.getByLabel("rule detail").fill("Join on order number and year, within the sales database.");
  await page.getByRole("checkbox", { name: /Shipped orders by year/ }).uncheck();
  await page.screenshot({ path: "/private/tmp/thothii-m3-summary-desktop.png", fullPage: true });
  await page.setViewportSize({ width: 390, height: 844 });
  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
  await page.screenshot({ path: "/private/tmp/thothii-m3-summary-mobile.png", fullPage: true });
  await page.getByRole("button", { name: "Save selected and finish" }).click();
  const response = JSON.parse(await page.locator("#response").textContent() || "{}");
  expect(JSON.parse(response.text).items).toHaveLength(1);
  expect(JSON.parse(response.text).items[0].card.detail).toContain("within the sales database");
  expect(errors).toEqual([]);
});