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

test("clients page loads correctly", async ({ page }) => {
  const nowInSeconds = Math.floor(Date.now() / 1000);

  await page.addInitScript((issuedAt) => {
    const mockOidcUser = {
      id_token: "playwright-id-token",
      session_state: "playwright-session",
      access_token: "playwright-access-token",
      refresh_token: "playwright-refresh-token",
      token_type: "Bearer",
      scope: "openid profile email",
      profile: {
        sub: "playwright-user",
        email: "playwright@example.com",
        name: "Playwright User",
      },
      expires_at: issuedAt + 3600,
    };

    // oidc-client-ts storage key format: oidc.user:{authority}:{client_id}
    window.localStorage.setItem(
      "oidc.user:http://localhost:5000/oidc:devfront",
      JSON.stringify(mockOidcUser),
    );
    window.localStorage.setItem(
      "oidc.user:http://localhost:5000/oidc/:devfront",
      JSON.stringify(mockOidcUser),
    );
  }, nowInSeconds);

  await page.route("**/api/v1/dev/clients**", async (route) => {
    if (route.request().method() !== "GET") {
      await route.fulfill({
        status: 404,
        contentType: "application/json",
        body: JSON.stringify({ error: "Not found" }),
      });
      return;
    }

    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify({
        items: [
          {
            id: "client-playwright",
            name: "Playwright Client",
            type: "confidential",
            status: "active",
            createdAt: new Date().toISOString(),
            redirectUris: ["http://localhost:5174/callback"],
            scopes: ["openid", "profile", "email"],
          },
        ],
        limit: 50,
        offset: 0,
      }),
    });
  });

  await page.goto("/clients");
  await expect(page).toHaveURL(/\/clients$/);

  // 타이틀 확인
  await expect(page).toHaveTitle(/바론 개발자 서비스/);

  // 페이지 내 주요 텍스트 확인
  await expect(page.getByText("클라이언트 목록")).toBeVisible();

  // 테이블 헤더 확인
  await expect(
    page.getByRole("columnheader", { name: "애플리케이션" }),
  ).toBeVisible();
  await expect(
    page.getByRole("columnheader", { name: "Client ID" }),
  ).toBeVisible();
});