import { expect, test, type Page } from "@playwright/test";

// The Topologies page: browse the catalog and build a topology graph against
// the real /api/topologies endpoints (frontend → proxy → backend).

const OWNER_EMAIL = "owner@acme.test";
const OWNER_PASSWORD = "e2e-password";

async function signIn(page: Page) {
  await page.goto("/login");
  await page.getByLabel("Email address").fill(OWNER_EMAIL);
  await page.getByLabel("Password").fill(OWNER_PASSWORD);
  await page.getByRole("button", { name: "Sign in" }).click();
  await page.waitForURL((url) => !url.pathname.endsWith("/login"), { timeout: 15000 });
}

test("browse the topology catalog and build a graph", async ({ page }) => {
  await signIn(page);

  await page.getByRole("link", { name: "Topologies" }).click();
  await expect(page).toHaveURL(/\/topologies$/);
  await expect(page.getByRole("heading", { name: "Topologies" })).toBeVisible();

  // The catalog lists the kinds.
  await expect(page.getByRole("button", { name: /hierarchical/i })).toBeVisible();

  // Build a pipeline topology and confirm the graph renders.
  await page.getByRole("button", { name: /^pipeline$/i }).click();
  await page.getByLabel(/Roles/).fill("alpha, beta, gamma");
  await page.getByRole("button", { name: "Build" }).click();
  await expect(page.locator("svg[aria-label*='topology']")).toBeVisible();
});

test("compare topologies shows a leaderboard and Pareto chart", async ({ page }) => {
  await signIn(page);
  await page.getByRole("link", { name: "Topologies" }).click();
  await page.getByRole("tab", { name: /compare/i }).click();

  await page.getByRole("button", { name: "Run comparison" }).click();

  // Leaderboard table + Pareto chart render from the comparison result.
  await expect(page.getByRole("cell", { name: /pipeline/i })).toBeVisible();
  await expect(page.locator("svg[aria-label*='pareto']")).toBeVisible();
});