import { expect, test, type Page } from "@playwright/test";
import {
  completeAlliancePreCheckpoint,
  expectNoDocumentOverflow,
  expectNoHorizontalOverflow,
  fetchAvailablePersona,
  signInAsLearner,
} from "./support";

async function expectSessionPageHeightToMatchViewport(page: Page) {
  const metrics = await page.evaluate(() => {
    const sessionPage = document.querySelector<HTMLElement>(".sx-page--active");
    const topbar = document.querySelector<HTMLElement>(".vg-topbar");
    const sessionbar = document.querySelector<HTMLElement>(".sx-sessionbar");

    if (!sessionPage) {
      return null;
    }

    const pageHeight = sessionPage.getBoundingClientRect().height;
    const expectedHeight = window.innerHeight;

    return {
      pageHeight: Math.round(pageHeight),
      expectedHeight: Math.round(expectedHeight),
      delta: Math.abs(pageHeight - expectedHeight),
      hasTopbar: Boolean(topbar),
      hasSessionbar: Boolean(sessionbar),
    };
  });

  expect(metrics, "Expected active session page to be present").not.toBeNull();
  expect(metrics!.hasTopbar, "Active session should hide the global topbar").toBe(false);
  expect(metrics!.hasSessionbar, "Active session should show the in-session navigation bar").toBe(true);
  expect(
    metrics!.delta,
    `Expected .sx-page height ${metrics!.pageHeight}px to match viewport ${metrics!.expectedHeight}px`,
  ).toBeLessThanOrEqual(1);
}

async function expectNoSessionInternalCopy(page: Page) {
  await expect(page.getByText(/API|GET \/|OPENAI_API_KEY|API와 엔진/)).toHaveCount(0);
}

async function expectNoLocalStageDemoControl(page: Page) {
  await expect(page.getByRole("button", { name: /다음 단계로/ })).toHaveCount(0);
  await expect(page.locator(".sx-track__advance")).toHaveCount(0);
}

async function expectMobileContextIfNarrow(page: Page) {
  const isNarrow = await page.evaluate(() =>
    window.matchMedia("(max-width: 1180px)").matches,
  );

  if (!isNarrow) {
    return;
  }

  const isPhoneLayout = await page.evaluate(() =>
    window.matchMedia("(max-width: 880px)").matches,
  );
  await expect(page.locator(".sx-page--active .sx-col-right")).toBeHidden();
  if (isPhoneLayout) {
    await expect(page.locator(".sx-page--active .sx-col-left")).toBeHidden();
  } else {
    await expect(page.locator(".sx-page--active .sx-col-left")).toBeVisible();
  }
  const mobileContext = page.getByLabel("현재 회기 요약");
  await expect(mobileContext).toBeVisible();
  await expect(page.locator(".sx-page--active .sx-mobile-context__brief")).toBeVisible();
  await expect(mobileContext).toContainText("조용히 표시");
  await expect(mobileContext).toContainText("내담자");
  await expect(mobileContext).toContainText("마이크");
}

async function expectSessionControlsInsideViewport(page: Page) {
  const selectors = [
    ".sx-grid",
    ".sx-stage",
    ".sx-transcript",
    ".sx-transcript__scroll",
    ".sx-compose",
    ".sx-sessionbar",
    ".sx-controlbar",
  ];
  const result = await page.evaluate((items) => {
    const viewport = { width: window.innerWidth, height: window.innerHeight };
    const checks = items.map((selector) => {
      const el = document.querySelector<HTMLElement>(selector);
      if (!el) return { selector, ok: false, reason: "missing" };
      const rect = el.getBoundingClientRect();
      const style = window.getComputedStyle(el);
      const visible =
        style.display !== "none" &&
        style.visibility !== "hidden" &&
        Number(style.opacity) !== 0 &&
        rect.width > 0 &&
        rect.height > 0;
      const ok =
        visible &&
        rect.top >= -1 &&
        rect.left >= -1 &&
        rect.right <= viewport.width + 1 &&
        rect.bottom <= viewport.height + 1;
      return {
        selector,
        ok,
        reason: visible ? "out-of-viewport" : "not-visible",
        rect: {
          top: Math.round(rect.top),
          left: Math.round(rect.left),
          right: Math.round(rect.right),
          bottom: Math.round(rect.bottom),
          width: Math.round(rect.width),
          height: Math.round(rect.height),
        },
      };
    });
    return { viewport, checks };
  }, selectors);

  const failures = result.checks.filter((check) => !check.ok);
  expect(
    failures,
    `Viewport ${result.viewport.width}x${result.viewport.height} clipped session controls: ${JSON.stringify(failures)}`,
  ).toEqual([]);
}

async function expectNoVisibleSessionPanelOverlap(page: Page) {
  const result = await page.evaluate(() => {
    const selectors = [
      ".sx-page--active .sx-mobile-context",
      ".sx-page--active .sx-col-left",
      ".sx-page--active .sx-stage",
      ".sx-page--active .sx-transcript",
      ".sx-page--active .sx-col-right",
      ".sx-page--active .sx-controlbar",
    ];

    const panels = selectors
      .map((selector) => {
        const el = document.querySelector<HTMLElement>(selector);
        if (!el) return null;
        const rect = el.getBoundingClientRect();
        const style = window.getComputedStyle(el);
        const visible =
          style.display !== "none" &&
          style.visibility !== "hidden" &&
          Number(style.opacity) !== 0 &&
          rect.width > 0 &&
          rect.height > 0;
        if (!visible) return null;
        return {
          selector,
          rect: {
            top: rect.top,
            right: rect.right,
            bottom: rect.bottom,
            left: rect.left,
            width: rect.width,
            height: rect.height,
          },
        };
      })
      .filter((item): item is NonNullable<typeof item> => Boolean(item));

    const overlaps: Array<{ a: string; b: string; area: number }> = [];
    for (let i = 0; i < panels.length; i += 1) {
      for (let j = i + 1; j < panels.length; j += 1) {
        const a = panels[i];
        const b = panels[j];
        const width = Math.min(a.rect.right, b.rect.right) - Math.max(a.rect.left, b.rect.left);
        const height = Math.min(a.rect.bottom, b.rect.bottom) - Math.max(a.rect.top, b.rect.top);
        const area = Math.max(0, width) * Math.max(0, height);
        if (area > 1) {
          overlaps.push({ a: a.selector, b: b.selector, area: Math.round(area) });
        }
      }
    }

    return {
      viewport: { width: window.innerWidth, height: window.innerHeight },
      panels: panels.map((panel) => ({
        selector: panel.selector,
        rect: {
          top: Math.round(panel.rect.top),
          right: Math.round(panel.rect.right),
          bottom: Math.round(panel.rect.bottom),
          left: Math.round(panel.rect.left),
          width: Math.round(panel.rect.width),
          height: Math.round(panel.rect.height),
        },
      })),
      overlaps,
    };
  });

  expect(
    result.overlaps,
    `Visible session panels overlap at ${result.viewport.width}x${result.viewport.height}: ${JSON.stringify(result)}`,
  ).toEqual([]);
}

async function expectMainControlsUnclipped(page: Page) {
  const result = await page.evaluate(() => {
    const controls = [
      { selector: ".sx-compose textarea", parent: ".sx-compose" },
      { selector: ".sx-compose .vg-btn", parent: ".sx-compose" },
      { selector: ".sx-controlbar .sx-mic", parent: ".sx-controlbar" },
      { selector: ".sx-controlbar .sx-segmented", parent: ".sx-controlbar" },
      { selector: ".sx-controlbar .sx-pause", parent: ".sx-controlbar" },
      { selector: ".sx-controlbar .sx-end-button", parent: ".sx-controlbar" },
    ];

    return controls.map(({ selector, parent }) => {
      const el = document.querySelector<HTMLElement>(selector);
      const parentEl = document.querySelector<HTMLElement>(parent);
      if (!el || !parentEl) return { selector, ok: false, reason: "missing" };

      const rect = el.getBoundingClientRect();
      const parentRect = parentEl.getBoundingClientRect();
      const style = window.getComputedStyle(el);
      const visible =
        style.display !== "none" &&
        style.visibility !== "hidden" &&
        Number(style.opacity) !== 0 &&
        rect.width > 0 &&
        rect.height > 0;
      const textCanClip = Number.parseFloat(style.fontSize) > 0;
      const textClipped =
        textCanClip &&
        (Math.ceil(el.scrollWidth - el.clientWidth) > 1 ||
          Math.ceil(el.scrollHeight - el.clientHeight) > 1);
      const insideParent =
        rect.top >= parentRect.top - 1 &&
        rect.left >= parentRect.left - 1 &&
        rect.right <= parentRect.right + 1 &&
        rect.bottom <= parentRect.bottom + 1;

      return {
        selector,
        ok: visible && insideParent && !textClipped,
        reason: !visible ? "not-visible" : !insideParent ? "outside-parent" : textClipped ? "text-clipped" : "",
        rect: {
          top: Math.round(rect.top),
          right: Math.round(rect.right),
          bottom: Math.round(rect.bottom),
          left: Math.round(rect.left),
          width: Math.round(rect.width),
          height: Math.round(rect.height),
        },
        parentRect: {
          top: Math.round(parentRect.top),
          right: Math.round(parentRect.right),
          bottom: Math.round(parentRect.bottom),
          left: Math.round(parentRect.left),
          width: Math.round(parentRect.width),
          height: Math.round(parentRect.height),
        },
        scrollWidth: el.scrollWidth,
        clientWidth: el.clientWidth,
        scrollHeight: el.scrollHeight,
        clientHeight: el.clientHeight,
      };
    });
  });

  const failures = result.filter((check) => !check.ok);
  expect(failures, `Main session controls are clipped: ${JSON.stringify(failures)}`).toEqual([]);
}

async function expectRightPanelDoesNotIntersectSessionCore(page: Page) {
  const result = await page.evaluate(() => {
    const right = document.querySelector<HTMLElement>(".sx-page--active .sx-col-right");
    const coreSelectors = [
      ".sx-page--active .sx-col-center",
      ".sx-page--active .sx-stage",
      ".sx-page--active .sx-transcript",
      ".sx-page--active .sx-controlbar",
    ];

    const toSnapshot = (rect: DOMRect) => ({
      top: Math.round(rect.top),
      right: Math.round(rect.right),
      bottom: Math.round(rect.bottom),
      left: Math.round(rect.left),
      width: Math.round(rect.width),
      height: Math.round(rect.height),
    });

    if (!right) {
      return { ok: false, reason: "missing-right-panel" };
    }

    const rightRect = right.getBoundingClientRect();
    const rightStyle = window.getComputedStyle(right);
    const rightVisible =
      rightStyle.display !== "none" &&
      rightStyle.visibility !== "hidden" &&
      Number(rightStyle.opacity) !== 0 &&
      rightRect.width > 0 &&
      rightRect.height > 0;
    const missing: string[] = [];
    const intersections: Array<{ selector: string; rect: ReturnType<typeof toSnapshot> }> = [];

    for (const selector of coreSelectors) {
      const el = document.querySelector<HTMLElement>(selector);
      if (!el) {
        missing.push(selector);
        continue;
      }

      const rect = el.getBoundingClientRect();
      const intersects =
        rightVisible &&
        rightRect.left < rect.right - 1 &&
        rightRect.right > rect.left + 1 &&
        rightRect.top < rect.bottom - 1 &&
        rightRect.bottom > rect.top + 1;
      if (intersects) {
        intersections.push({ selector, rect: toSnapshot(rect) });
      }
    }

    return {
      ok: missing.length === 0 && intersections.length === 0,
      viewport: { width: window.innerWidth, height: window.innerHeight },
      narrow: window.matchMedia("(max-width: 1180px)").matches,
      rightVisible,
      rightRect: toSnapshot(rightRect),
      missing,
      intersections,
    };
  });

  expect(
    result.ok,
    `Right feedback panel intersects session core: ${JSON.stringify(result)}`,
  ).toBeTruthy();
  if ("narrow" in result && result.narrow) {
    expect(
      result.rightVisible,
      `Right feedback panel should be hidden at <=1180px: ${JSON.stringify(result)}`,
    ).toBe(false);
  }
}

async function expectActiveSessionUsableLayout(page: Page) {
  const result = await page.evaluate(() => {
    const grid = document.querySelector<HTMLElement>(".sx-page--active .sx-grid");
    const center = document.querySelector<HTMLElement>(".sx-page--active .sx-col-center");
    const stage = document.querySelector<HTMLElement>(".sx-page--active .sx-stage");
    const transcript = document.querySelector<HTMLElement>(".sx-page--active .sx-transcript");
    const scroll = document.querySelector<HTMLElement>(".sx-page--active .sx-transcript__scroll");
    const compose = document.querySelector<HTMLElement>(".sx-page--active .sx-compose");
    const status = document.querySelector<HTMLElement>(".sx-page--active .sx-stage__status");
    const timer = document.querySelector<HTMLElement>(".sx-page--active .sx-stage__timer");
    if (!grid || !center || !stage || !transcript || !scroll || !compose || !status || !timer) {
      return { ok: false, reason: "missing" };
    }

    const gridRect = grid.getBoundingClientRect();
    const centerRect = center.getBoundingClientRect();
    const stageRect = stage.getBoundingClientRect();
    const transcriptRect = transcript.getBoundingClientRect();
    const composeRect = compose.getBoundingClientRect();
    const stageOverflow = stage.scrollHeight - stage.clientHeight;
    const transcriptOverflow = transcript.scrollHeight - transcript.clientHeight;
    const phone = window.matchMedia("(max-width: 880px)").matches;
    const centerHeight = centerRect.height;
    const stageHeight = stageRect.height;
    const transcriptHeight = transcriptRect.height;

    return {
      ok: true,
      phone,
      gridWidth: Math.round(gridRect.width),
      centerWidth: Math.round(centerRect.width),
      centerHeight: Math.round(centerHeight),
      stageHeight: Math.round(stageHeight),
      transcriptHeight: Math.round(transcriptHeight),
      scrollHeight: Math.round(scroll.getBoundingClientRect().height),
      stageOverflow,
      transcriptOverflow,
      stageBottom: Math.round(stageRect.bottom),
      transcriptTop: Math.round(transcriptRect.top),
      transcriptBottom: Math.round(transcriptRect.bottom),
      composeTop: Math.round(composeRect.top),
      statusText: status.textContent ?? "",
      timerText: timer.textContent ?? "",
    };
  });

  expect(result.ok, `Expected active session layout elements: ${JSON.stringify(result)}`).toBeTruthy();
  if ("phone" in result && result.phone) {
    expect(
      Math.abs(result.gridWidth - result.centerWidth),
      `Phone center column should use full grid width: ${JSON.stringify(result)}`,
    ).toBeLessThanOrEqual(2);
  }
  expect(result.scrollHeight, `Transcript viewport too small: ${JSON.stringify(result)}`).toBeGreaterThanOrEqual(110);
  expect(
    result.transcriptHeight,
    `Transcript should be the dominant practice area: ${JSON.stringify(result)}`,
  ).toBeGreaterThanOrEqual(result.stageHeight);
  expect(
    result.transcriptHeight / result.centerHeight,
    `Transcript is using too little of the center column: ${JSON.stringify(result)}`,
  ).toBeGreaterThanOrEqual(0.52);
  expect(result.stageOverflow, `Stage content clipped: ${JSON.stringify(result)}`).toBeLessThanOrEqual(4);
  expect(result.transcriptOverflow, `Transcript chrome clipped: ${JSON.stringify(result)}`).toBeLessThanOrEqual(4);
  expect(result.stageBottom, `Stage overlaps transcript: ${JSON.stringify(result)}`).toBeLessThanOrEqual(result.transcriptTop);
  expect(result.composeTop, `Compose overlaps transcript bounds: ${JSON.stringify(result)}`).toBeLessThan(result.transcriptBottom);
  expect(result.statusText, `Missing visible running status: ${JSON.stringify(result)}`).toContain("회기");
  expect(result.timerText, `Missing visible timer: ${JSON.stringify(result)}`).toMatch(/\d/);
}

test.describe("learner session full-screen layout", () => {
  test("keeps the prestart and active session routes inside the viewport", async ({ page }) => {
    await signInAsLearner(page);
    const persona = await fetchAvailablePersona(page, 1);
    await page.goto(`/learn/session/${persona.code}`);

    await expect(page.getByRole("button", { name: "회기 시작" })).toBeVisible();
    await expectNoHorizontalOverflow(page);

    await page.getByRole("button", { name: "회기 시작" }).click();
    await completeAlliancePreCheckpoint(page);

    await expect(page.locator(".sx-page.sx-page--active")).toBeVisible({ timeout: 15_000 });
    await expect(page).toHaveURL(/\/learn\/session\/[0-9a-f-]+$/i);
    await expect(page.locator(".sx-sessionbar")).toBeVisible();
    await expect(page.getByRole("button", { name: "기록으로" })).toBeVisible();
    await expect(page.locator(".sx-grid")).toBeVisible();
    await expect(page.locator(".vg-topbar")).toHaveCount(0);
    await expect(page.locator(".vg-nav")).toHaveCount(0);
    await expect(page.locator(".vg-main")).toHaveClass(/(^|\s)vg-main--bleed(\s|$)/);
    await expect(page.locator(".vg-shell__body")).toHaveClass(/(^|\s)vg-shell__body--bare(\s|$)/);

    await expectNoSessionInternalCopy(page);
    await expectNoLocalStageDemoControl(page);
    await expectNoDocumentOverflow(page);
    await expectSessionPageHeightToMatchViewport(page);
    await expectMobileContextIfNarrow(page);
    await expectSessionControlsInsideViewport(page);
    await expectNoVisibleSessionPanelOverlap(page);
    await expectMainControlsUnclipped(page);
    await expectRightPanelDoesNotIntersectSessionCore(page);

    await page.reload();
    await expect(page.locator(".sx-page.sx-page--active")).toBeVisible({ timeout: 15_000 });
    await expect(page.locator(".sx-sessionbar")).toBeVisible();
    await expect(page.getByRole("button", { name: "회기 시작" })).toHaveCount(0);
    await expect(page).toHaveURL(/\/learn\/session\/[0-9a-f-]+$/i);
  });

  test("keeps critical session controls visible across dense viewport sizes", async ({ page }) => {
    await signInAsLearner(page);
    const persona = await fetchAvailablePersona(page, 1);

    const viewports = [
      { width: 1366, height: 768 },
      { width: 1366, height: 720 },
      { width: 1180, height: 768 },
      { width: 1100, height: 768 },
      { width: 1024, height: 768 },
      { width: 1024, height: 640 },
      { width: 900, height: 768 },
      { width: 881, height: 768 },
      { width: 820, height: 1180 },
      { width: 390, height: 844 },
      { width: 375, height: 667 },
      { width: 320, height: 568 },
    ];

    await page.setViewportSize(viewports[0]);
    await page.goto(`/learn/session/${persona.code}`);
    await page.getByRole("button", { name: "회기 시작" }).click();
    await completeAlliancePreCheckpoint(page);
    await expect(page.locator(".sx-page.sx-page--active")).toBeVisible({ timeout: 15_000 });

    for (const viewport of viewports) {
      await page.setViewportSize(viewport);
      await page.evaluate(() => new Promise(requestAnimationFrame));

      await expect(page.locator(".sx-page.sx-page--active")).toBeVisible({ timeout: 15_000 });
      await expectNoDocumentOverflow(page);
      await expectNoHorizontalOverflow(page);
      await expectNoLocalStageDemoControl(page);
      await expectSessionControlsInsideViewport(page);
      await expectNoVisibleSessionPanelOverlap(page);
      await expectMainControlsUnclipped(page);
      await expectSessionPageHeightToMatchViewport(page);
      await expectActiveSessionUsableLayout(page);
      await expectRightPanelDoesNotIntersectSessionCore(page);

      if (viewport.width <= 1180) {
        await expect(page.locator(".sx-page--active .sx-mobile-context")).toBeVisible();
        await expect(page.locator(".sx-page--active .sx-col-right")).toBeHidden();
      } else {
        await expect(page.locator(".sx-page--active .sx-col-right")).toBeVisible();
        await expect(page.locator(".sx-page--active .sx-col-right")).toBeInViewport();
      }
      if (viewport.width > 880 && viewport.width <= 1180) {
        await expect(page.locator(".sx-page--active .sx-col-left")).toBeVisible();
      } else if (viewport.width <= 880) {
        await expect(page.locator(".sx-page--active .sx-col-left")).toBeHidden();
      }
    }
  });

  test("does not leave an unsaved local transcript when a text turn is rejected", async ({ page }) => {
    await signInAsLearner(page);
    const persona = await fetchAvailablePersona(page, 1);
    await page.goto(`/learn/session/${persona.code}`);
    await page.getByRole("button", { name: "회기 시작" }).click();
    await completeAlliancePreCheckpoint(page);
    await expect(page.locator(".sx-page.sx-page--active")).toBeVisible({ timeout: 15_000 });

    await page.route("**/api/sessions/*/stream", async (route) => {
      await route.fulfill({
        status: 503,
        contentType: "application/json",
        body: JSON.stringify({ detail: "engine unavailable: e2e rejection" }),
      });
    });

    const learnerText = "오늘은 너무 힘들었어요";
    const input = page.getByLabel("학습자 발화 입력");
    await input.fill(learnerText);
    await page.getByRole("button", { name: "보내기" }).click();

    await expect(page.getByRole("alert")).toContainText("AI 엔진이 응답하지 않습니다");
    await expect(input).toHaveValue(learnerText);
    await expect(page.locator(".sx-utt")).toHaveCount(0);
    await expect(page.locator(".sx-utt").filter({ hasText: learnerText })).toHaveCount(0);
    await expect(page.getByText("내담자 응답 없음")).toHaveCount(0);
  });

  test("removes pending transcript when an accepted stream later errors", async ({ page }) => {
    await signInAsLearner(page);
    const persona = await fetchAvailablePersona(page, 1);
    await page.goto(`/learn/session/${persona.code}`);
    await page.getByRole("button", { name: "회기 시작" }).click();
    await completeAlliancePreCheckpoint(page);
    await expect(page.locator(".sx-page.sx-page--active")).toBeVisible({ timeout: 15_000 });

    await page.route("**/api/sessions/*/stream", async (route) => {
      await route.fulfill({
        status: 200,
        contentType: "text/event-stream",
        body: [
          "event: token",
          'data: {"text":"부분 응답"}',
          "",
          "event: error",
          'data: {"detail":"engine unavailable: e2e stream error"}',
          "",
        ].join("\n"),
      });
    });

    const learnerText = "스트림 중간에 실패하면 남기지 말아 주세요";
    const input = page.getByLabel("학습자 발화 입력");
    await input.fill(learnerText);
    await page.getByRole("button", { name: "보내기" }).click();

    await expect(page.getByRole("alert")).toContainText("AI 엔진이 응답하지 않습니다");
    await expect(input).toHaveValue(learnerText);
    await expect(page.locator(".sx-utt")).toHaveCount(0);
    await expect(page.locator(".sx-utt").filter({ hasText: learnerText })).toHaveCount(0);
    await expect(page.getByText("부분 응답")).toHaveCount(0);
  });
});