import { expect, loginAs, test } from "./fixtures";

const captureReview = Boolean(process.env.SOL_VISUAL_REVIEW);

async function expectNoPageOverflow(page: import("@playwright/test").Page) {
  const dimensions = await page.evaluate(() => ({ documentWidth: document.documentElement.scrollWidth, viewportWidth: window.innerWidth }));
  expect(dimensions.documentWidth, `document width at ${dimensions.viewportWidth}px`).toBeLessThanOrEqual(dimensions.viewportWidth + 1);
}

test.describe("product-quality interaction and composition", () => {
  test("the public gateway uses the available canvas and stays usable from desktop to mobile", async ({ page }, testInfo) => {
    await page.setViewportSize({ width: 1440, height: 900 });
    await page.goto("/");
    await expect(page.getByRole("heading", { name: "Inspect your governed MCP estate." })).toBeVisible();
    await expect(page.getByLabel("How governed MCP access works")).toBeVisible();
    const desktopLayout = await page.locator(".auth-layout").boundingBox();
    expect(desktopLayout?.width ?? 0).toBeGreaterThan(1100);
    await expectNoPageOverflow(page);
    if (captureReview) await page.screenshot({ path: testInfo.outputPath("public-desktop.png"), fullPage: true });

    await page.setViewportSize({ width: 390, height: 844 });
    await expect(page.getByRole("link", { name: /Continue to sign in/ })).toBeVisible();
    await expect(page.getByText("Project scoped", { exact: true })).toBeVisible();
    await expectNoPageOverflow(page);
    if (captureReview) await page.screenshot({ path: testInfo.outputPath("public-mobile.png"), fullPage: true });
  });

  test("quick jump is keyboard-first, access-aware and routes without a reload", async ({ page }) => {
    await loginAs(page, "hub-viewer");
    await page.goto("/");
    await expect(page.getByRole("button", { name: "Open quick jump" })).toBeVisible();
    await page.keyboard.press("Control+K");

    const dialog = page.getByRole("dialog", { name: "Quick jump" });
    await expect(dialog).toBeVisible();
    const search = dialog.getByLabel("Find a workspace");
    await expect(search).toBeFocused();
    await expect(dialog.getByRole("button", { name: /Audit/ })).toHaveCount(0);

    await search.fill("catalog");
    await dialog.getByRole("button", { name: /Catalog/ }).click();
    await expect(page).toHaveURL(/\/tools$/);
    await expect(page.getByRole("heading", { name: "Catalog", level: 2 })).toBeVisible();
  });

  test("resource filtering is debounced, normalized and URL-addressable", async ({ page }) => {
    await loginAs(page, "hub-admin");
    await page.goto("/tools");
    const filter = page.getByLabel("Filter records");
    await filter.fill("  Fleet Ops  ");
    await expect(page).toHaveURL(/\/tools\?q=Fleet%20Ops$/);
    await expect(page.getByText("Updating results…")).toHaveCount(0);

    await filter.fill("   ");
    await expect(page).toHaveURL(/\/tools$/);
  });

  test("the authenticated control plane retains hierarchy and has no overflow at key viewports", async ({ page }, testInfo) => {
    await loginAs(page, "hub-viewer");
    for (const viewport of [{ width: 1440, height: 900 }, { width: 1280, height: 800 }, { width: 768, height: 1024 }, { width: 390, height: 844 }]) {
      await page.setViewportSize(viewport);
      await page.goto("/");
      await expect(page.getByRole("heading", { name: "Governed MCP, with the current signal first." })).toBeVisible();
      await expect(page.getByLabel("Governed MCP request path")).toBeVisible();
      const topbar = await page.locator(".topbar").boundingBox();
      expect(topbar?.y ?? Number.POSITIVE_INFINITY, `topbar position at ${viewport.width}px`).toBeLessThan(100);
      await expectNoPageOverflow(page);
      if (captureReview) await page.screenshot({
        path: testInfo.outputPath(`dashboard-${viewport.width}.png`),
        fullPage: false,
      });
    }
  });

  test("catalog, operations and onboarding remain workable beyond the dashboard", async ({ page }, testInfo) => {
    const consoleErrors: string[] = [];
    page.on("console", (message) => { if (message.type() === "error") consoleErrors.push(message.text()); });
    await loginAs(page, "hub-admin");
    await page.setViewportSize({ width: 1440, height: 900 });

    await page.goto("/tools");
    await expect(page.getByRole("heading", { name: "Catalog", level: 2 })).toBeVisible();
    await expect(page.getByLabel("Filter records")).toBeVisible();
    await expectNoPageOverflow(page);
    if (captureReview) await page.screenshot({ path: testInfo.outputPath("catalog-desktop.png"), fullPage: false });

    await page.goto("/operations");
    await expect(page.getByRole("heading", { name: "Governed-call trend" })).toBeVisible();
    await expectNoPageOverflow(page);
    if (captureReview) await page.screenshot({ path: testInfo.outputPath("operations-desktop.png"), fullPage: false });

    await page.goto("/clients");
    const onboarding = page.locator(".onboarding-panel");
    await expect(onboarding).toBeVisible();
    await expectNoPageOverflow(page);
    if (captureReview) await onboarding.screenshot({ path: testInfo.outputPath("client-onboarding.png") });

    await page.setViewportSize({ width: 390, height: 844 });
    await page.goto("/tools");
    await expect(page.getByLabel("Filter records")).toBeVisible();
    await expectNoPageOverflow(page);
    if (captureReview) await page.screenshot({ path: testInfo.outputPath("catalog-mobile.png"), fullPage: false });

    expect(consoleErrors).toEqual([]);
  });
});