import { expect, test, type APIResponse, type Page, type Response, type TestInfo } from "@playwright/test";
import {
  completeOnboarding,
  expectNoHorizontalOverflow,
  signInAsLearner,
  useRealApi,
  withGlobalEngineConfigLock,
} from "./support";

type AdminHealthStatus = "ok" | "degraded" | "down";

interface AdminServiceHealth {
  key: string;
  name: string;
  status: AdminHealthStatus;
  detail: string;
  metric: string;
  load: number;
}

interface AdminHealthResponse {
  status: AdminHealthStatus;
  environment: string;
  engine_mode: string;
  services: AdminServiceHealth[];
}

interface AdminManagedUser {
  user_id: string;
  email: string;
  display_name: string;
  role: "learner" | "teacher" | "admin";
  account_status: "pending" | "approved" | "suspended";
  affiliation: string;
  cohort_ids: string[];
  active_sessions: number;
  last_seen_at: number;
  created_at: number;
}

interface AdminUsersResponse {
  source: "database" | "server_session_registry";
  durable: boolean;
  users: AdminManagedUser[];
}

interface AdminUsageBreakdown {
  provider: string;
  model: string;
  turns: number;
  tokens_in: number;
  tokens_out: number;
  cost_usd: number;
}

interface AdminUsageBudget {
  limit_usd: number;
  used_ratio: number;
  remaining_usd: number | null;
  status: "disabled" | "ok" | "warn" | "exceeded";
}

interface AdminUsageResponse {
  source: "database" | "server_session_registry";
  durable: boolean;
  window_days: number;
  total_turns: number;
  metered_turns: number;
  tokens_in: number;
  tokens_out: number;
  cost_usd: number;
  budget: AdminUsageBudget;
  by_provider: AdminUsageBreakdown[];
}

interface AdminUptimeResponse {
  source: "database" | "unavailable";
  durable: boolean;
  window_hours: number;
  sample_count: number;
  ok_ratio: number;
  degraded_events: number;
  down_events: number;
  last_down_at: number | null;
}

interface AdminTicketReporter {
  email: string;
  display_name: string;
  role: string;
}

interface AdminSupportTicket {
  ticket_id: string;
  reporter: AdminTicketReporter;
  category: string;
  priority: "low" | "normal" | "high" | "urgent";
  status: "open" | "triaged" | "in_progress" | "resolved" | "closed";
  subject: string;
  body: string;
  source_path: string;
  created_at: number;
  updated_at: number;
}

interface AdminTicketsResponse {
  source: "database" | "unavailable";
  durable: boolean;
  tickets: AdminSupportTicket[];
  summary: {
    total: number;
    open_count: number;
    high_priority_count: number;
    stale_count: number;
  };
}

async function expectResponseOk(response: APIResponse | Response) {
  if (!response.ok()) {
    expect(response.ok(), await response.text()).toBeTruthy();
  }
}

async function signInAsAdmin(page: Page) {
  let res: APIResponse | null = null;
  for (let attempt = 0; attempt < 3; attempt += 1) {
    res = await page.request.post("/api/auth/dev-login", {
      data: {
        email: "admin@twentyoz.kr",
        role: "admin",
        display_name: "E2E Admin",
      },
    });
    if (res.ok()) break;
    await new Promise((resolve) => setTimeout(resolve, 300));
  }
  if (!res) throw new Error("admin dev-login did not return a response");
  await expectResponseOk(res);
  await completeOnboarding(page, {
    legal_name: "E2E Admin",
    affiliation: "한신대학교",
    department: "운영",
    grade_level: "관리자",
    phone: "010-2222-2222",
    contact_address: "경기도 오산시 한신대학교",
  });
}

function isJsonResponse(response: Response) {
  return response.headers()["content-type"]?.includes("application/json") ?? false;
}

function isAdminHealthResponse(response: Response) {
  const url = new URL(response.url());
  return (
    response.request().method() === "GET" &&
    url.pathname.endsWith("/admin/health") &&
    isJsonResponse(response)
  );
}

function isAdminUsersResponse(response: Response) {
  const url = new URL(response.url());
  return (
    response.request().method() === "GET" &&
    url.pathname.endsWith("/admin/users") &&
    isJsonResponse(response)
  );
}

function isAdminUsageResponse(response: Response) {
  const url = new URL(response.url());
  return (
    response.request().method() === "GET" &&
    url.pathname.endsWith("/admin/usage") &&
    isJsonResponse(response)
  );
}

function isAdminUptimeResponse(response: Response) {
  const url = new URL(response.url());
  return (
    response.request().method() === "GET" &&
    url.pathname.endsWith("/admin/uptime") &&
    isJsonResponse(response)
  );
}

function isAdminTicketsResponse(response: Response) {
  const url = new URL(response.url());
  return (
    response.request().method() === "GET" &&
    url.pathname.endsWith("/admin/tickets") &&
    isJsonResponse(response)
  );
}

function isAdminTicketPatch(ticketId: string) {
  return (response: Response) => {
    const url = new URL(response.url());
    return (
      response.request().method() === "PATCH" &&
      url.pathname.endsWith(`/admin/tickets/${ticketId}`) &&
      isJsonResponse(response)
    );
  };
}

function isAdminUserCreate(response: Response) {
  const url = new URL(response.url());
  return (
    response.request().method() === "POST" &&
    url.pathname.endsWith("/admin/users") &&
    isJsonResponse(response)
  );
}

function isAdminUserPatch(userId: string) {
  return (response: Response) => {
    const url = new URL(response.url());
    return (
      response.request().method() === "PATCH" &&
      url.pathname.endsWith(`/admin/users/${userId}`) &&
      isJsonResponse(response)
    );
  };
}

function isAdminUserDelete(userId: string) {
  return (response: Response) => {
    const url = new URL(response.url());
    return (
      response.request().method() === "DELETE" &&
      url.pathname.endsWith(`/admin/users/${userId}`) &&
      isJsonResponse(response)
    );
  };
}

function environmentLabel(value: string) {
  if (value === "prod") return "운영";
  if (value === "staging") return "스테이징";
  if (value === "dev") return "개발";
  return value;
}

function engineModeLabel(value: string) {
  if (value === "claude_cli") return "Claude CLI 게이트웨이";
  if (value === "claude_api" || value === "messages_api") return "Anthropic API";
  if (value === "openai") return "OpenAI 호환";
  if (value === "solar") return "Solar";
  return value;
}

function countLabel(value: number) {
  if (!Number.isFinite(value)) return "0";
  return Math.round(value).toLocaleString("ko-KR");
}

function costLabel(value: number) {
  if (!Number.isFinite(value) || value <= 0) return "$0";
  return `$${value.toFixed(value < 0.01 ? 6 : 4)}`;
}

function isOnline(seconds: number) {
  return Number.isFinite(seconds) && seconds > 0 && Date.now() / 1000 - seconds < 15 * 60;
}

async function openAdminAndReadHealth(page: Page) {
  const healthResponsePromise = page.waitForResponse(isAdminHealthResponse);
  const usageResponsePromise = page.waitForResponse(isAdminUsageResponse);
  const usersResponsePromise = page.waitForResponse(isAdminUsersResponse);
  const uptimeResponsePromise = page.waitForResponse(isAdminUptimeResponse);
  const ticketsResponsePromise = page.waitForResponse(isAdminTicketsResponse);

  await page.goto("/admin");

  const [healthResponse, usageResponse, usersResponse, uptimeResponse, ticketsResponse] = await Promise.all([
    healthResponsePromise,
    usageResponsePromise,
    usersResponsePromise,
    uptimeResponsePromise,
    ticketsResponsePromise,
  ]);
  await expectResponseOk(healthResponse);
  await expectResponseOk(usageResponse);
  await expectResponseOk(usersResponse);
  await expectResponseOk(uptimeResponse);
  await expectResponseOk(ticketsResponse);

  const health = (await healthResponse.json()) as AdminHealthResponse;
  const usage = (await usageResponse.json()) as AdminUsageResponse;
  const users = (await usersResponse.json()) as AdminUsersResponse;
  const uptime = (await uptimeResponse.json()) as AdminUptimeResponse;
  const tickets = (await ticketsResponse.json()) as AdminTicketsResponse;
  expect(health.services.length).toBeGreaterThan(0);
  return { health, usage, users, uptime, tickets };
}

async function openAdminAndReadUsers(page: Page) {
  const usersResponsePromise = page.waitForResponse(isAdminUsersResponse);

  await page.goto("/admin/users");

  const usersResponse = await usersResponsePromise;
  await expectResponseOk(usersResponse);
  return (await usersResponse.json()) as AdminUsersResponse;
}

async function openAdminTickets(page: Page) {
  const ticketsResponsePromise = page.waitForResponse(isAdminTicketsResponse);
  await page.goto("/admin/tickets");
  const ticketsResponse = await ticketsResponsePromise;
  await expectResponseOk(ticketsResponse);
  return (await ticketsResponse.json()) as AdminTicketsResponse;
}

async function expectCreateUserControlsFit(page: Page, viewportWidth: number) {
  const form = page.locator(".ad-user-create");
  await expect(form).toBeVisible();

  const clippedControls = await form.evaluate((element) => {
    const formRect = element.getBoundingClientRect();
    const controls = Array.from(element.querySelectorAll<HTMLElement>("input, select, button"));

    return controls
      .map((control) => {
        const rect = control.getBoundingClientRect();
        const style = window.getComputedStyle(control);
        const tag = control.tagName.toLowerCase();
        const visible =
          style.display !== "none" &&
          style.visibility !== "hidden" &&
          Number(style.opacity) !== 0 &&
          rect.width > 0 &&
          rect.height > 0;
        const outsideForm =
          rect.left < formRect.left - 1 ||
          rect.right > formRect.right + 1 ||
          rect.top < formRect.top - 1 ||
          rect.bottom > formRect.bottom + 1;
        const contentClipped =
          tag === "button" &&
          (control.scrollWidth > control.clientWidth + 1 ||
            control.scrollHeight > control.clientHeight + 1);

        return {
          tag,
          label: control.getAttribute("aria-label") ?? control.textContent?.replace(/\s+/g, " ").trim(),
          left: Math.floor(rect.left),
          right: Math.ceil(rect.right),
          width: Math.ceil(rect.width),
          outsideForm,
          contentClipped,
          visible,
        };
      })
      .filter((control) => control.visible && (control.outsideForm || control.contentClipped));
  });

  expect(
    clippedControls,
    `Create-user controls clipped at ${viewportWidth}px: ${JSON.stringify(clippedControls)}`,
  ).toEqual([]);
}

async function expectVisibleButtonsFit(page: Page, selector: string, context: string) {
  const clippedButtons = await page.locator(selector).evaluateAll((buttons) =>
    buttons
      .map((button) => {
        const rect = button.getBoundingClientRect();
        const owner = button.closest<HTMLElement>(".ad-user,.ad-user-create") ?? button.parentElement;
        const ownerRect = owner?.getBoundingClientRect();
        const style = window.getComputedStyle(button);
        const visible =
          style.display !== "none" &&
          style.visibility !== "hidden" &&
          Number(style.opacity) !== 0 &&
          rect.width > 0 &&
          rect.height > 0;
        const contentClipped =
          button.scrollWidth > button.clientWidth + 1 ||
          button.scrollHeight > button.clientHeight + 1;
        const outsideOwner = ownerRect
          ? rect.left < ownerRect.left - 1 ||
            rect.right > ownerRect.right + 1 ||
            rect.top < ownerRect.top - 1 ||
            rect.bottom > ownerRect.bottom + 1
          : false;

        return {
          text: button.textContent?.replace(/\s+/g, " ").trim(),
          width: Math.ceil(rect.width),
          contentClipped,
          outsideOwner,
          visible,
        };
      })
      .filter((button) => button.visible && (button.contentClipped || button.outsideOwner)),
  );

  expect(clippedButtons, `${context}: ${JSON.stringify(clippedButtons)}`).toEqual([]);
}

test.describe("admin route", () => {
  test.beforeEach(async ({ page }) => {
    await useRealApi(page);
  });

  test("allows an admin to open the live health dashboard", async ({ page }) => {
    test.setTimeout(60_000);
    await signInAsAdmin(page);

    await withGlobalEngineConfigLock("admin-health-dashboard", async () => {
      const { health, usage, users, uptime, tickets } = await openAdminAndReadHealth(page);
      const serviceCards = page.locator(".ad-service:not(.ad-service--skeleton)");
      const counts = {
        ok: health.services.filter((service) => service.status === "ok").length,
        degraded: health.services.filter((service) => service.status === "degraded").length,
        down: health.services.filter((service) => service.status === "down").length,
        total: health.services.length,
      };
      const activeSessions = users.users.reduce(
        (sum, user) => sum + Math.max(0, user.active_sessions),
        0,
      );
      const onlineUsers = users.users.filter((user) => isOnline(user.last_seen_at)).length;

      await expect(page).toHaveURL(/\/admin$/);
      await expect(page.locator(".ad-status")).toContainText(environmentLabel(health.environment));
      await expect(page.locator(".ad-status")).toContainText(engineModeLabel(health.engine_mode));
      await expect(page.locator(".ad-kpi b")).toHaveText([
        countLabel(activeSessions),
        countLabel(onlineUsers),
        countLabel(users.users.length),
        counts.total ? `${counts.ok}/${counts.total}` : "-",
      ]);
      await expect(page.getByRole("heading", { name: "AI 비용" })).toBeVisible();
      await expect(page.locator(".ad-cost")).toContainText(costLabel(usage.cost_usd));
      await expect(page.locator(".ad-cost")).toContainText(
        usage.budget.status === "disabled"
          ? "예산 경고 비활성"
          : usage.budget.status === "exceeded"
            ? "예산 초과"
            : usage.budget.status === "warn"
              ? "예산 주의"
              : "예산 정상",
      );
      await expect(page.getByRole("heading", { name: "가용성" })).toBeVisible();
      await expect(page.getByText("샘플 정상률")).toBeVisible();
      expect(uptime.ok_ratio).toBeGreaterThanOrEqual(0);
      expect(uptime.ok_ratio).toBeLessThanOrEqual(1);
      await expect(page.getByRole("heading", { name: "운영 티켓" })).toBeVisible();
      expect(tickets.summary.open_count).toBeGreaterThanOrEqual(0);
      await expect(page.locator(".ad-panel").filter({ hasText: "운영 티켓" })).toContainText(
        /(\d+건 미해결|미해결 티켓이 없습니다)/,
      );
      await expect(serviceCards).toHaveCount(health.services.length);

      for (const service of health.services) {
        const card = serviceCards.filter({ hasText: service.name });
        await expect(card).toBeVisible();
        await expect(card).toContainText(service.detail);
        expect(service.load, `${service.key} load must be normalized`).toBeGreaterThanOrEqual(0);
        expect(service.load, `${service.key} load must be normalized`).toBeLessThanOrEqual(1);

        if (service.key === "engine" && service.status === "ok") {
          await expect(card).toContainText(/\d+ms/);
        } else if (service.key === "db" && service.status === "ok") {
          await expect(card).toContainText(/풀 \d+\/\d+/);
        } else if (service.key === "evaluation") {
          await expect(card).toContainText(/대기 \d+건/);
        } else if (service.key === "kb" && service.status === "ok") {
          await expect(card).toContainText(/활성 세션 \d+건/);
        } else {
          await expect(card).toContainText(service.metric);
        }
      }

      const byKey = Object.fromEntries(health.services.map((service) => [service.key, service]));
      if (byKey.engine?.status === "ok") {
        expect(byKey.engine.metric).toMatch(/^\d+ms$/);
      }
      if (byKey.db?.status === "ok") {
        expect(byKey.db.metric).toMatch(/^풀 \d+\/\d+$/);
      }
      expect(byKey.evaluation?.metric).toMatch(/^대기 \d+건$/);
      if (byKey.kb?.status === "ok") {
        expect(byKey.kb.metric).toMatch(/^활성 세션 \d+건$/);
      }
    });
  });

  test("allows an admin to manage real server-known users", async ({ page }, testInfo) => {
    test.setTimeout(60_000);
    await signInAsAdmin(page);

    const slug = `${testInfo.project.name}.${testInfo.workerIndex}.${testInfo.retry}.${Date.now()}`;
    const email = `admin-users.${slug}@hs.ac.kr`.toLowerCase();
    const displayName = `관리 대상 ${testInfo.project.name}`;
    const users = await openAdminAndReadUsers(page);
    expect(users.source).toBe("database");
    expect(users.durable).toBe(true);

    await page.getByRole("tab", { name: "사용자 목록" }).click();
    await page.getByLabel("사용자 검색").fill(`no-match-${slug}`);
    await expect(page.getByText("검색 조건에 맞는 사용자가 없습니다.")).toBeVisible();
    await expect(page.getByText("아직 등록된 사용자가 없습니다.")).toHaveCount(0);
    await page.getByLabel("사용자 검색").fill("");

    await page.getByRole("tab", { name: "사용자 등록" }).click();
    await page.getByLabel("새 사용자 이메일").fill(email);
    await page.getByLabel("새 사용자 표시 이름").fill(displayName);
    await page.getByLabel("새 사용자 역할").selectOption("learner");
    await page.getByLabel("새 사용자 승인 상태").selectOption("pending");
    await page.getByLabel("새 사용자 코호트").fill(`created-${testInfo.project.name}`);

    const createPromise = page.waitForResponse(isAdminUserCreate);
    const reloadAfterCreatePromise = page.waitForResponse(isAdminUsersResponse);
    await page.getByRole("button", { name: "사용자 등록" }).click();
    const createResponse = await createPromise;
    await expectResponseOk(createResponse);
    await expectResponseOk(await reloadAfterCreatePromise);
    const created = (await createResponse.json()) as AdminManagedUser;
    expect(created).toMatchObject({
      email,
      display_name: displayName,
      role: "learner",
      account_status: "pending",
      cohort_ids: [`created-${testInfo.project.name}`],
    });

    await expect(page.getByRole("tab", { name: "사용자 목록" })).toHaveAttribute(
      "aria-selected",
      "true",
    );
    const approvalTab = page.getByRole("tab", { name: /가입 승인/ });
    await approvalTab.click();
    await expect(approvalTab).toHaveAttribute("aria-selected", "true");
    const approvalCard = page.locator(".ad-approval").filter({ hasText: email });
    await expect(approvalCard).toBeVisible();
    await expect(approvalCard).toContainText("승인 대기");
    await expectVisibleButtonsFit(page, ".ad-approval__actions .vg-btn", "admin approval buttons");

    const approvePromise = page.waitForResponse(isAdminUserPatch(created.user_id));
    await approvalCard.getByRole("button", { name: "승인" }).click();
    const approveResponse = await approvePromise;
    await expectResponseOk(approveResponse);
    const approved = (await approveResponse.json()) as AdminManagedUser;
    expect(approved).toMatchObject({
      user_id: created.user_id,
      email,
      account_status: "approved",
    });
    await expect(approvalCard).toHaveCount(0);

    await page.getByRole("tab", { name: "사용자 목록" }).click();
    await page.getByLabel("사용자 검색").fill(email);
    const card = page.locator(".ad-user").filter({ hasText: email });
    await expect(card).toBeVisible();
    await expect(card).toContainText(displayName);
    await expect(card).toContainText("승인됨");
    await expectVisibleButtonsFit(page, ".ad-user__actions .vg-btn", "admin user action buttons");

    const nextName = `교수자 ${testInfo.project.name}`;
    const nameInput = card.getByLabel(`${email} 표시 이름`);
    const roleSelect = card.getByLabel(`${email} 역할`);
    const cohortInput = card.getByLabel(`${email} 코호트`);
    const saveButton = card.getByRole("button", { name: "저장" });
    const nextCohort = `cohort-${testInfo.project.name}`;
    await nameInput.fill(nextName);
    await expect(nameInput).toHaveValue(nextName);
    await page.evaluate(() => new Promise(requestAnimationFrame));
    await roleSelect.selectOption("teacher");
    await expect(roleSelect).toHaveValue("teacher");
    await cohortInput.fill(nextCohort);
    await expect(cohortInput).toHaveValue(nextCohort);
    await page.evaluate(() => new Promise(requestAnimationFrame));
    await expect(saveButton).toBeEnabled();

    const patchPromise = page.waitForResponse(isAdminUserPatch(created.user_id));
    await saveButton.click();
    const patchResponse = await patchPromise;
    await expectResponseOk(patchResponse);
    const updated = (await patchResponse.json()) as AdminManagedUser;
    expect(updated).toMatchObject({
      user_id: created.user_id,
      email,
      display_name: nextName,
      role: "teacher",
      account_status: "approved",
      cohort_ids: [nextCohort],
    });

    await expect(card).toContainText(nextName);
    await expect(card).toContainText("교수자");
    await expect(cohortInput).toHaveValue(nextCohort);

    const deletePromise = page.waitForResponse(isAdminUserDelete(created.user_id));
    await card.getByRole("button", { name: "비활성화" }).click();
    const deleteResponse = await deletePromise;
    await expectResponseOk(deleteResponse);
    await expect(card).toHaveCount(0);
  });

  test("shows and resolves user-submitted operation tickets", async ({ page }, testInfo) => {
    await signInAsAdmin(page);

    const slug = `${testInfo.project.name}.${testInfo.workerIndex}.${testInfo.retry}.${Date.now()}`;
    const subject = `[E2E] 운영 티켓 ${slug}`;
    let createdTicketId: string | null = null;

    try {
      const create = await page.request.post("/api/users/support-tickets", {
        data: {
          category: "session_review",
          priority: "high",
          subject,
          body: "E2E 운영 티켓 처리 흐름 검증입니다. 실제 리뷰 생성 지연이 아닙니다.",
          source_path: "/__e2e__/learn/session/test/review",
        },
      });
      await expectResponseOk(create);
      const created = (await create.json()) as { ticket_id: string };
      createdTicketId = created.ticket_id;

      const tickets = await openAdminTickets(page);
      expect(tickets.source).toBe("database");
      expect(tickets.durable).toBe(true);
      expect(tickets.tickets.some((ticket) => ticket.ticket_id === created.ticket_id)).toBeTruthy();

      const card = page.locator(".ad-ticket").filter({ hasText: subject });
      await expect(card).toBeVisible();
      await expect(card).toContainText("높음");
      await expect(card).toContainText("미해결");

      const patchPromise = page.waitForResponse(isAdminTicketPatch(created.ticket_id));
      await card.getByRole("button", { name: "해결" }).click();
      const patchResponse = await patchPromise;
      await expectResponseOk(patchResponse);
      const updated = (await patchResponse.json()) as AdminSupportTicket;
      expect(updated.status).toBe("resolved");
      await expect(card).toContainText("해결");
      await expectNoHorizontalOverflow(page);
    } finally {
      if (createdTicketId) {
        const cleanup = await page.request.patch(`/api/admin/tickets/${createdTicketId}`, {
          data: {
            status: "resolved",
            resolution_note: "E2E cleanup",
          },
        });
        if (!cleanup.ok()) {
          console.warn(`E2E ticket cleanup failed: ${cleanup.status()} ${await cleanup.text()}`);
        }
      }
    }
  });

  test("denies learner access to the admin API and UI", async ({ page }) => {
    await signInAsLearner(page);

    const denied = await page.request.get("/api/admin/health");
    expect(denied.status(), await denied.text()).toBe(403);
    const deniedUsers = await page.request.get("/api/admin/users");
    expect(deniedUsers.status(), await deniedUsers.text()).toBe(403);
    const deniedUptime = await page.request.get("/api/admin/uptime");
    expect(deniedUptime.status(), await deniedUptime.text()).toBe(403);
    const deniedTickets = await page.request.get("/api/admin/tickets");
    expect(deniedTickets.status(), await deniedTickets.text()).toBe(403);

    await page.goto("/admin");

    await expect(page).toHaveURL(/\/learn$/);
    await expect(page.locator(".ad-root")).toHaveCount(0);
  });

  test("keeps admin controls usable at a mobile viewport", async ({ page }) => {
    test.setTimeout(60_000);
    await page.setViewportSize({ width: 390, height: 844 });
    await signInAsAdmin(page);

    const users = await openAdminAndReadUsers(page);
    await page.getByRole("tab", { name: "사용자 등록" }).click();
    const layout = await page.evaluate(() => {
      const form = document.querySelector<HTMLElement>(".ad-user-create");
      if (!form) throw new Error("admin user create form was not rendered");
      return {
        formColumns: window.getComputedStyle(form).gridTemplateColumns.split(" ").length,
      };
    });

    await expectNoHorizontalOverflow(page);
    await expectCreateUserControlsFit(page, 390);
    expect(layout.formColumns).toBe(1);
    if (users.users.length > 0) {
      await page.getByRole("tab", { name: "사용자 목록" }).click();
      await expectVisibleButtonsFit(page, ".ad-user__actions .vg-btn", "mobile admin user actions");
    }
  });

  test("keeps the create-user form contained at tablet widths", async ({ page }) => {
    test.setTimeout(60_000);
    await signInAsAdmin(page);

    for (const width of [861, 900, 1024]) {
      await page.setViewportSize({ width, height: 900 });
      await openAdminAndReadUsers(page);
      await page.getByRole("tab", { name: "사용자 등록" }).click();

      await expectNoHorizontalOverflow(page);
      await expectCreateUserControlsFit(page, width);
    }
  });
});