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

const BASE = "http://localhost:4173";

test.describe("Dynamic routes with getServerSideProps", () => {
  test("renders post page with dynamic id from GSSP", async ({ page }) => {
    await page.goto(`${BASE}/posts/123`);
    await expect(page.locator('[data-testid="post-title"]')).toHaveText("Post: 123");
    // router.pathname returns the route pattern, not the resolved path
    await expect(page.locator('[data-testid="pathname"]')).toHaveText("Pathname: /posts/[id]");
    await expect(page.locator('[data-testid="query"]')).toHaveText("Query ID: 123");
  });

  test("renders with different dynamic id", async ({ page }) => {
    await page.goto(`${BASE}/posts/456`);
    await expect(page.locator('[data-testid="post-title"]')).toHaveText("Post: 456");
    await expect(page.locator('[data-testid="query"]')).toHaveText("Query ID: 456");
  });

  test("GSSP provides data for each unique id", async ({ page }) => {
    // First request
    await page.goto(`${BASE}/posts/abc`);
    await expect(page.locator('[data-testid="post-title"]')).toHaveText("Post: abc");

    // Navigate to different post via client navigation
    await page.evaluate(() => {
      (window as any).__NAV_MARKER__ = true;
    });

    // Use router to navigate
    await page.evaluate(() => {
      const router = (window as any).__NEXT_DATA__ && (window as any).next?.router;
      if (router) router.push("/posts/xyz");
      else window.location.href = "/posts/xyz";
    });

    await expect(page.locator('[data-testid="post-title"]')).toHaveText("Post: xyz");
  });
});

test.describe("Catch-all routes with getServerSideProps", () => {
  test("renders with single segment", async ({ page }) => {
    await page.goto(`${BASE}/docs/intro`);
    await expect(page.locator('[data-testid="docs-title"]')).toHaveText("Docs");
    await expect(page.locator('[data-testid="docs-slug"]')).toHaveText("Path: intro");
  });

  test("renders with multiple segments", async ({ page }) => {
    await page.goto(`${BASE}/docs/api/v2/users`);
    await expect(page.locator('[data-testid="docs-title"]')).toHaveText("Docs");
    await expect(page.locator('[data-testid="docs-slug"]')).toHaveText("Path: api/v2/users");
  });

  test("renders with two segments", async ({ page }) => {
    await page.goto(`${BASE}/docs/getting-started/installation`);
    await expect(page.locator('[data-testid="docs-slug"]')).toHaveText(
      "Path: getting-started/installation",
    );
  });
});

test.describe("Dynamic API routes", () => {
  test("GET /api/users/[id] returns user data", async ({ request }) => {
    const response = await request.get(`${BASE}/api/users/42`);
    expect(response.status()).toBe(200);
    const body = await response.json();
    expect(body).toEqual({ user: { id: "42", name: "User 42" } });
  });

  test("GET /api/users/[id] with string id", async ({ request }) => {
    const response = await request.get(`${BASE}/api/users/alice`);
    expect(response.status()).toBe(200);
    const body = await response.json();
    expect(body).toEqual({ user: { id: "alice", name: "User alice" } });
  });
});
