import { expect, test, type Locator } from "@playwright/test";
import { AI_DOC_URL } from "../../common/lib/project";
import { installRoutes } from "./helpers";

// Release 16 slice DX: a site has no /use-with-ai page. Its "Use with AI"
// links — the header's nav (inline from `lg`, in the slide-out menu below it),
// the footer's and the one on Ask AI — go to the homepage's AI and MCP doc
// (AI_DOC_URL), in the same tab, as plain anchors: the doc is on another
// origin, so there is no client navigation to make. The label is unchanged.

async function expectDocLink(link: Locator) {
  await expect(link).toHaveAttribute("href", AI_DOC_URL);
  await expect(link).not.toHaveAttribute("target", /./);
}

test.beforeEach(async ({ page }) => {
  await installRoutes(page);
});

test("the header's and the footer's Use with AI go to the homepage doc", async ({ page }) => {
  await page.goto("/");
  await expectDocLink(
    page.getByRole("banner").getByRole("link", { name: "Use with AI", exact: true }),
  );
  await expectDocLink(
    page.getByRole("contentinfo").getByRole("link", { name: "Use with AI", exact: true }),
  );
});

test("the slide-out menu's Use with AI goes to the homepage doc", async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto("/");
  await page.getByRole("button", { name: "Open menu" }).click();
  await expectDocLink(
    page.getByRole("dialog").getByRole("link", { name: "Use with AI", exact: true }),
  );
});

test("Ask AI's Use with AI goes to the homepage doc", async ({ page }) => {
  await page.goto("/ask/");
  await expectDocLink(
    page.getByRole("main").getByRole("link", { name: "Use with AI", exact: true }),
  );
});

test("the page is gone", async ({ page }) => {
  const res = await page.request.get("/use-with-ai/");
  expect(res.status()).toBe(404);
});