import { expect, test } from "../support/browser/strict-browser-test.js";

/** @param {import("@playwright/test").Page} page */
async function openReferenceForm(page) {
  await page.goto("/examples/reference-resources/new");
  await page.getByRole("button", { name: "로그인 시작" }).click();
  await expect(
    page.getByRole("heading", { name: "Reference resource 만들기" }),
  ).toBeVisible();
}

test("validates a reference form and focuses the first invalid field", async ({
  page,
}) => {
  await openReferenceForm(page);
  await page.getByRole("button", { name: "저장" }).click();

  const firstField = page.getByRole("textbox", { name: /새 항목 이름/ });
  await expect(firstField).toBeFocused();
  await expect(firstField).toHaveAttribute("aria-invalid", "true");
  await expect(page.getByRole("alert")).toContainText("입력 내용을 확인해 주세요.");
});

test("guards dirty cancellation and restores focus when writing continues", async ({
  page,
}) => {
  await openReferenceForm(page);
  await page
    .getByRole("textbox", { name: /새 항목 이름/ })
    .fill("Unsaved reference");
  const cancel = page.getByRole("button", { name: "취소" });
  await cancel.click();

  await expect(
    page.getByRole("dialog", { name: "저장하지 않은 변경이 있습니다." }),
  ).toBeVisible();
  await page.getByRole("button", { name: "계속 작성" }).click();
  await expect(cancel).toBeFocused();
  await expect(page).toHaveURL(/\/examples\/reference-resources\/new$/);
});

test("keeps the form template within a 320px viewport", async ({ page }) => {
  await page.setViewportSize({ width: 320, height: 720 });
  await openReferenceForm(page);
  const viewport = await page.evaluate(() => ({
    clientWidth: document.documentElement.clientWidth,
    scrollWidth: document.documentElement.scrollWidth,
  }));
  expect(viewport.scrollWidth).toBeLessThanOrEqual(viewport.clientWidth);
});