import { expect, type Page, test } from "@playwright/test";
import {
  type ClientRelation,
  type Consent,
  installDevApiMock,
  makeClient,
  seedAuth,
} from "./helpers/devfront-fixtures";
import { installDevFrontStaticRoutes } from "./helpers/static-devfront";

function expectClientTabsOrder(pagePath: string, expectedActive: RegExp) {
  return async ({ page }: { page: Page }) => {
    const state = {
      clients: [makeClient("client-tabs", { name: "탭 테스트 앱" })],
      consents: [] as Consent[],
      relations: {
        "client-tabs": [
          {
            relation: "config_editor",
            subject: "User:user-1",
            subjectType: "User",
            subjectId: "user-1",
          },
        ] satisfies ClientRelation[],
      },
      auditLogsByCursor: undefined,
    };
    await installDevFrontStaticRoutes(page);
    await installDevApiMock(page, state);

    await page.goto(`http://devfront.test${pagePath}`);

    const header = page
      .locator("header")
      .filter({ hasText: "탭 테스트 앱" })
      .first();
    const tabs = header.locator(
      "div.border-b.border-border .whitespace-nowrap",
    );

    await expect(tabs).toHaveText([
      "연동 설정",
      "동의 및 Claims",
      "설정",
      "관계",
    ]);

    await expect(
      header
        .locator("div.border-b.border-border .text-primary")
        .filter({ hasText: expectedActive }),
    ).toHaveCount(1);
  };
}

test.describe("DevFront client detail tabs", () => {
  test.beforeEach(async ({ page }) => {
    await seedAuth(page, "super_admin");
  });

  test(
    "settings page keeps tab order and uses localized relationships label",
    expectClientTabsOrder("/clients/client-tabs/settings", /^설정$/),
  );

  test(
    "relationships page keeps tab order and uses localized relationships label",
    expectClientTabsOrder("/clients/client-tabs/relationships", /^관계$/),
  );
});