import AxeBuilder from "@axe-core/playwright";
import { expect, test } from "@playwright/test";
import type { Locator, Page, TestInfo } from "@playwright/test";

// allow: SIZE_OK - ordered Community browser states intentionally share one E2E narrative.

const interactiveActionRoles = ["button", "link", "menuitem"] as const;
const tinyGif = Buffer.from("R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==", "base64");
const tinyPng = Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFElEQVQYV2NkYGD4z0AEYBxVSF+FAAfiAQELhYkNAAAAAElFTkSuQmCC", "base64");

async function captureScreenshot(page: Page, testInfo: TestInfo, name: string): Promise<void> {
  const path = testInfo.outputPath(name);
  await page.screenshot({ fullPage: true, path });
  await testInfo.attach(name, { contentType: "image/png", path });
}

async function expectNoHorizontalOverflow(page: Page): Promise<void> {
  const hasHorizontalOverflow = await page.evaluate(
    () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
  );

  expect(hasHorizontalOverflow).toBe(false);
}

async function expectNoClippedKoreanText(root: Locator): Promise<void> {
  const clippedText = await root.evaluate((element) => Array.from(element.querySelectorAll<HTMLElement>("*"))
    .filter((candidate) => candidate.childElementCount === 0 && /[가-힣]/.test(candidate.textContent ?? ""))
    .filter((candidate) => {
      const style = getComputedStyle(candidate);
      return style.display !== "none" && style.visibility !== "hidden" && candidate.clientWidth > 0 && candidate.clientHeight > 0;
    })
    .filter((candidate) => candidate.scrollWidth > candidate.clientWidth + 1 || candidate.scrollHeight > candidate.clientHeight + 1)
    .map((candidate) => candidate.textContent?.trim()));

  expect(clippedText).toEqual([]);
}

async function expectNoCriticalOrSeriousAxeViolations(page: Page): Promise<void> {
  const results = await new AxeBuilder({ page }).analyze();
  const blockingViolations = results.violations.filter(
    (violation) => violation.impact === "critical" || violation.impact === "serious",
  );

  expect(blockingViolations).toEqual([]);
}

async function expectNoRawAdultBoolean(page: Page): Promise<void> {
  await expect(page.locator("body")).not.toContainText(/성인 (?:true|false)/);
}

async function expectActionAbsentAcrossInteractiveRoles(page: Page, name: string): Promise<void> {
  for (const role of interactiveActionRoles) {
    await expect(page.getByRole(role, { name })).toBeHidden();
  }
}

async function pressTabUntilFocused(page: Page, target: Locator): Promise<void> {
  for (let attempt = 0; attempt < 50; attempt += 1) {
    if (await target.evaluate((element) => element === document.activeElement || element.contains(document.activeElement))) {
      return;
    }

    await page.keyboard.press("Tab");
  }

  await expect(target).toBeFocused();
}

async function loginThroughMockMode(page: Page): Promise<void> {
  await page.goto("/login");
  await page.getByLabel("이메일").fill("admin@test.com");
  await page.getByLabel("비밀번호").fill("password");
  await page.getByRole("button", { name: "로그인" }).click();
  await expect(page).toHaveURL(/\/ai-characters$/);
}

test("Community mock audio preview loads metadata in Chromium", async ({ browserName, page }) => {
  test.skip(browserName !== "chromium", "Chromium metadata decode is the required mock proof.");

  // Given
  await loginThroughMockMode(page);
  await page.goto("/ai-characters/101/community-posts");
  const player = page.getByRole("group", { name: "커뮤니티 게시글 7003 오디오 플레이어" });

  // When
  await expect(player).toBeVisible();
  const audioStatus = await page.evaluate(async () => {
    const audio = document.querySelector<HTMLAudioElement>("audio[src^='data:audio/wav']");
    if (audio === null) {
      return { kind: "missing" } as const;
    }
    if (audio.readyState >= HTMLMediaElement.HAVE_METADATA) {
      return { duration: audio.duration, errorCode: audio.error?.code ?? null, kind: "loaded" } as const;
    }

    return new Promise<{ readonly duration: number; readonly errorCode: number | null; readonly kind: "loaded" } | { readonly errorCode: number | null; readonly kind: "error" }>((resolve) => {
      audio.addEventListener("loadedmetadata", () => resolve({ duration: audio.duration, errorCode: audio.error?.code ?? null, kind: "loaded" }), { once: true });
      audio.addEventListener("error", () => resolve({ errorCode: audio.error?.code ?? null, kind: "error" }), { once: true });
      audio.load();
    });
  });

  // Then
  expect(audioStatus).toMatchObject({ errorCode: null, kind: "loaded" });
  if (audioStatus.kind === "loaded") {
    expect(audioStatus.duration).toBeGreaterThan(0);
  }
});

test("mobile Community route stays read-only while list sheet and audio remain available", async ({ page }) => {
  // Given
  await page.setViewportSize({ width: 320, height: 640 });
  await loginThroughMockMode(page);

  // When / Then
  await page.goto("/ai-characters/101/community-posts");
  await expect(page.getByRole("heading", { name: "커뮤니티 게시글", exact: true })).toBeVisible();
  await expect(page.locator("article").filter({ hasText: "오디오가 포함된 커뮤니티 게시글입니다." }).getByText("일반 · 댓글 허용 · 성인 콘텐츠", { exact: true })).toBeVisible();
  await expectNoRawAdultBoolean(page);
  await expect(page.getByRole("button", { name: "오디오가 포함된 커뮤니티 게시글입니다. 게시글 열기" })).toBeVisible();
  await expect(page.getByRole("group", { name: "커뮤니티 게시글 7003 오디오 플레이어" })).toBeVisible();
  await expectActionAbsentAcrossInteractiveRoles(page, "커뮤니티 게시글 생성");
  await expectNoHorizontalOverflow(page);

  const opener = page.getByRole("button", { name: "오디오가 포함된 커뮤니티 게시글입니다. 게시글 열기" });
  await opener.click();
  const dialog = page.getByRole("dialog", { name: "커뮤니티 게시글" });
  await expect(dialog).toBeVisible();
  await expect(dialog.getByRole("group", { name: "커뮤니티 게시글 7003 오디오 플레이어" })).toBeVisible();
  await expect(dialog.getByText("오디오가 포함된 커뮤니티 게시글입니다.", { exact: true })).toBeVisible();
  await expect(dialog.getByRole("textbox", { name: "내용" })).toBeHidden();
  await expectActionAbsentAcrossInteractiveRoles(page, "수정 저장");
  await expectActionAbsentAcrossInteractiveRoles(page, "고정하기");
  await expectActionAbsentAcrossInteractiveRoles(page, "고정 해제");
  await expectActionAbsentAcrossInteractiveRoles(page, "비활성화");
  await expectNoHorizontalOverflow(page);
});

test("mobile Community create route shows guidance instead of the create form", async ({ page }, testInfo) => {
  // Given
  await page.setViewportSize({ width: 375, height: 812 });
  await loginThroughMockMode(page);

  // When
  await page.goto("/ai-characters/101/community-posts/new");

  // Then
  await expect(page.getByRole("heading", { name: "모바일에서는 커뮤니티 게시글 생성을 제한합니다" })).toBeVisible();
  await expect(page.getByRole("form", { name: "커뮤니티 게시글 생성 입력 화면" })).toBeHidden();
  await expectActionAbsentAcrossInteractiveRoles(page, "생성");
  await expectNoHorizontalOverflow(page);
  await expectNoClippedKoreanText(page.locator("main"));
  await expectNoCriticalOrSeriousAxeViolations(page);
  await captureScreenshot(page, testInfo, "community-create-375-guidance.png");
});

for (const width of [768, 1280] as const) {
  test(`tablet and desktop Community management remains available at ${width}px`, async ({ page }, testInfo) => {
    // Given
    await page.setViewportSize({ width, height: 900 });
    await loginThroughMockMode(page);

    // When / Then
    await page.goto("/ai-characters/101/community-posts");
    await expect(page.getByRole("link", { name: "커뮤니티 게시글 생성" })).toBeVisible();
    await expect(page.getByRole("table").getByText("고정 · 댓글 허용 · 일반 콘텐츠", { exact: true })).toBeVisible();
    await expect(page.getByRole("table").getByText("일반 · 댓글 허용 · 성인 콘텐츠", { exact: true })).toBeVisible();
    await expectNoRawAdultBoolean(page);

    await page.getByRole("button", { name: "오늘의 상담 기록입니다. 게시글 열기" }).click();
    const dialog = page.getByRole("dialog", { name: "커뮤니티 게시글" });
    await expect(dialog.getByRole("textbox", { name: "내용" })).toBeVisible();
    await expect(dialog.getByRole("button", { name: "수정 저장" })).toBeVisible();
    await expect(dialog.getByRole("button", { name: "고정 해제" })).toBeVisible();
    await expect(dialog.getByRole("button", { name: "비활성화" })).toBeVisible();
    await dialog.getByRole("button", { name: "닫기" }).click();

    await page.getByRole("link", { name: "커뮤니티 게시글 생성" }).click();
    const form = page.getByRole("form", { name: "커뮤니티 게시글 생성 입력 화면" });
    const imageInput = form.locator("input[type='file']").first();
    const audioInput = form.locator("input[type='file']").nth(1);
    const imageSelectButton = form.getByRole("button", { name: "게시글 이미지 파일 선택" });
    const contentInput = form.getByRole("textbox", { name: "내용" });
    const priceInput = form.getByRole("spinbutton", { name: "가격" });

    await expect(form).toBeVisible();
    await expect(page.getByRole("button", { name: "생성" })).toBeVisible();
    await expect(audioInput).toBeHidden();
    await expect(priceInput).toHaveValue("0");
    expect(await form.evaluate((element) => {
      const image = element.querySelector("input[type='file']");
      const content = element.querySelector("textarea");
      return image !== null && content !== null && Boolean(image.compareDocumentPosition(content) & Node.DOCUMENT_POSITION_FOLLOWING);
    })).toBe(true);
    await expectNoHorizontalOverflow(page);
    await expectNoClippedKoreanText(form);
    await expectNoCriticalOrSeriousAxeViolations(page);
    await captureScreenshot(page, testInfo, `community-create-${width}-initial.png`);

    await pressTabUntilFocused(page, imageSelectButton);
    await expect(imageSelectButton).toBeFocused();
    expect(await imageSelectButton.evaluate((element) => {
      const style = getComputedStyle(element);
      return style.outlineStyle !== "none" || style.boxShadow !== "none";
    })).toBe(true);

    const imagePreview = form.getByRole("img", { name: "게시글 이미지 업로드 미리보기" });
    const cropDialog = page.getByRole("dialog", { name: "이미지 crop" });

    await imageInput.setInputFiles({ buffer: tinyPng, mimeType: "image/png", name: "community-crop.png" });
    await expect(cropDialog).toBeVisible();
    await expect(imagePreview).toBeHidden();
    await expect(audioInput).toBeHidden();
    await captureScreenshot(page, testInfo, `community-create-${width}-crop.png`);

    await cropDialog.getByRole("button", { name: "적용" }).click();
    await expect(cropDialog).toBeHidden();
    await expect(imagePreview).toBeVisible();
    expect(await imagePreview.evaluate((image) => image instanceof HTMLImageElement && image.complete && image.naturalWidth > 0)).toBe(true);
    await expect(audioInput).toBeVisible();
    await captureScreenshot(page, testInfo, `community-create-${width}-applied.png`);

    await audioInput.setInputFiles({ buffer: Buffer.from("ID3"), mimeType: "audio/mpeg", name: "community-audio.mp3" });
    await imageInput.setInputFiles({ buffer: tinyPng, mimeType: "image/png", name: "community-replacement.png" });
    await expect(cropDialog).toBeVisible();
    await expect(imagePreview).toBeHidden();
    await expect(audioInput).toBeHidden();
    await captureScreenshot(page, testInfo, `community-create-${width}-replacement.png`);

    await cropDialog.getByRole("button", { name: "취소" }).click();
    await expect(cropDialog).toBeHidden();
    await expect(imagePreview).toBeHidden();
    await expect(audioInput).toBeHidden();

    await imageInput.setInputFiles({ buffer: Buffer.from("not-an-image"), mimeType: "image/png", name: "community-invalid.png" });
    const imageErrorAlert = form.getByRole("alert");
    await expect(cropDialog).toBeHidden();
    await expect(imagePreview).toBeHidden();
    await expect(audioInput).toBeHidden();
    await expect(imageErrorAlert).toContainText("이미지 미리보기를 불러오지 못했습니다.");
    await expect(imageErrorAlert).toBeVisible();
    await imageErrorAlert.scrollIntoViewIfNeeded();
    await captureScreenshot(page, testInfo, `community-create-${width}-error.png`);

    await imageInput.setInputFiles({ buffer: tinyGif, mimeType: "image/gif", name: "community-final.gif" });
    await expect(imagePreview).toBeVisible();
    expect(await imagePreview.evaluate((image) => image instanceof HTMLImageElement && image.complete && image.naturalWidth > 0)).toBe(true);
    await expect(audioInput).toBeVisible();
    expect(await form.evaluate((element) => {
      const [image, audio] = element.querySelectorAll("input[type='file']");
      const content = element.querySelector("textarea");
      return image !== undefined && audio !== undefined && content !== null
        && Boolean(image.compareDocumentPosition(audio) & Node.DOCUMENT_POSITION_FOLLOWING)
        && Boolean(audio.compareDocumentPosition(content) & Node.DOCUMENT_POSITION_FOLLOWING);
    })).toBe(true);
    await expectNoHorizontalOverflow(page);
    await expectNoClippedKoreanText(form);
    await expectNoCriticalOrSeriousAxeViolations(page);
    await captureScreenshot(page, testInfo, `community-create-${width}-gif-ready.png`);

    await audioInput.setInputFiles({ buffer: Buffer.from("ID3"), mimeType: "audio/mpeg", name: "community-audio.mp3" });
    await expect(audioInput).not.toHaveValue("");
    await form.getByRole("button", { name: "게시글 이미지 선택 취소" }).click();
    await expect(form.locator("img")).toBeHidden();
    await expect(audioInput).toBeHidden();
    await expectNoHorizontalOverflow(page);
    await expectNoClippedKoreanText(form);
    await captureScreenshot(page, testInfo, `community-create-${width}-image-removed.png`);

    await imageInput.setInputFiles({ buffer: tinyGif, mimeType: "image/gif", name: "community-final.gif" });
    await expect(audioInput).toBeVisible();
    await expect(audioInput).toHaveValue("");
    await contentInput.fill("가격 검증을 위한 커뮤니티 게시글입니다.");
    await priceInput.fill("");
    const createRequests: string[] = [];
    page.on("request", (request) => {
      if (request.method() === "POST" && request.url().includes("/community-posts")) {
        createRequests.push(request.url());
      }
    });
    await page.getByRole("button", { name: "생성" }).click();
    await expect(page.getByRole("alert")).toContainText("가격은 0 이상 99,999 이하 정수 캔으로 입력하세요.");
    await expect(priceInput).toBeFocused();
    await expect(priceInput).toHaveValue("");
    await expect(page).toHaveURL(/\/ai-characters\/101\/community-posts\/new$/);
    expect(createRequests).toEqual([]);
    await expectNoHorizontalOverflow(page);
    await expectNoClippedKoreanText(form);
    await expectNoCriticalOrSeriousAxeViolations(page);
    await page.evaluate(() => window.scrollTo(0, 0));
    await captureScreenshot(page, testInfo, `community-create-${width}-blank-price-error.png`);
  });
}

test("Community sheet traps focus closes on Escape and returns focus", async ({ browserName, page }) => {
  test.skip(browserName === "webkit", "WebKit does not consistently tab-focus range inputs in this keyboard path.");

  // Given
  await page.setViewportSize({ width: 1280, height: 900 });
  await loginThroughMockMode(page);
  await page.goto("/ai-characters/101/community-posts");
  const opener = page.getByRole("button", { name: "오디오가 포함된 커뮤니티 게시글입니다. 게시글 열기" });

  // When / Then
  await opener.click();
  const dialog = page.getByRole("dialog", { name: "커뮤니티 게시글" });
  const closeButton = dialog.getByRole("button", { name: "닫기" });
  await expect(closeButton).toBeFocused();

  await page.keyboard.press("Shift+Tab");
  await expect(dialog.getByRole("button", { name: "비활성화" })).toBeFocused();
  await page.keyboard.press("Tab");
  await expect(closeButton).toBeFocused();

  await pressTabUntilFocused(page, dialog.getByRole("textbox", { name: "내용" }));
  await pressTabUntilFocused(page, dialog.getByRole("group", { name: "커뮤니티 게시글 7003 오디오 플레이어" }));
  await pressTabUntilFocused(page, dialog.getByRole("slider", { name: "재생 위치" }));
  await pressTabUntilFocused(page, dialog.getByRole("combobox", { name: "재생 속도" }));

  await page.keyboard.press("Escape");
  await expect(dialog).toBeHidden();
  await expect(opener).toBeFocused();
});

test("Community list and create routes keep overflow and axe coverage across capability widths", async ({ page }) => {
  // Given
  await loginThroughMockMode(page);

  for (const width of [320, 375, 768, 1280] as const) {
    for (const route of ["/ai-characters/101/community-posts", "/ai-characters/101/community-posts/new"] as const) {
      await page.setViewportSize({ width, height: 900 });
      await page.goto(route);

      await expectNoHorizontalOverflow(page);
      if (width !== 320) {
        await expectNoClippedKoreanText(page.locator("main"));
      }
      await expectNoCriticalOrSeriousAxeViolations(page);
    }
  }
});