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

// Keep the expected copy in one place so a product-wide copy refresh cannot
// silently desynchronise this suite from web-next/src/pages/auth/LoginPage.tsx.
const LOGIN_HEADING = "登录 TallyNote 工作台";

test("未登录时显示中文登录入口", async ({ page }) => {
  await page.goto("/");
  await expect(page.getByRole("heading", { name: LOGIN_HEADING, exact: true })).toBeVisible();
  await expect(page.locator(".tn-login-header")).toHaveCount(0);
  await expect(page.getByLabel("用户名", { exact: true })).toBeVisible();
  await expect(page.getByLabel("密码", { exact: true })).toBeVisible();
  await expect(page.getByRole("button", { name: "登录" })).toBeVisible();
});

for (const viewport of [
  { width: 320, height: 800 },
  { width: 375, height: 812 },
  { width: 768, height: 1024 },
]) {
  test(`未登录入口适配 ${viewport.width}px`, async ({ page }) => {
    await page.setViewportSize(viewport);
    await page.goto("/");
    await expect(page.getByRole("heading", { name: LOGIN_HEADING, exact: true })).toBeVisible();
    await expect(page.getByLabel("用户名", { exact: true })).toBeVisible();
    await expect(page.getByLabel("密码", { exact: true })).toBeVisible();
    await expect(page.getByRole("button", { name: "登录" })).toBeVisible();
    const width = await page.evaluate(() => ({
      scrollWidth: document.documentElement.scrollWidth,
      clientWidth: document.documentElement.clientWidth,
    }));
    expect(width.scrollWidth).toBeLessThanOrEqual(width.clientWidth);
  });
}