import { expect, gotoWorkbench, saveScreenshot, test } from "../fixtures/test";
import { selectors, sessionTab } from "../fixtures/selectors";

test("session rail keeps low-frequency metadata behind details and preserves active session while collapsed", async ({ page }, testInfo) => {
  await gotoWorkbench(page);
  await expect(page.locator(sessionTab("ses_running"))).toHaveAttribute("data-active", "true");
  await expect(page.locator("#session-model-channel")).toHaveCount(0);
  await expect(page.locator("#session-status")).toHaveCount(0);
  await expect(page.locator("#session-sidebar")).not.toContainText("模型通道：codex");
  await expect(page.locator("#session-sidebar")).not.toContainText(/当前\s+ses_/u);
  await expect(page.locator("#session-sidebar")).not.toContainText(/trace\s+trc_/u);
  await saveScreenshot(page, testInfo, "session-rail-default");

  await page.locator(selectors.sessionDetailToggle).click();
  const detail = page.locator(selectors.sessionDetailDialog);
  await expect(detail).toBeVisible();
  await expect(detail).toContainText("sessionId");
  await expect(detail).toContainText("ses_running");
  await expect(detail).toContainText("threadId");
  await expect(detail).toContainText("thr_running");
  await expect(detail).toContainText("lastTraceId");
  await expect(detail).toContainText("trc_running");
  await expect(page.locator(selectors.sessionDetailCopy)).toBeVisible();
  await saveScreenshot(page, testInfo, "session-rail-detail-dialog");
  await page.keyboard.press("Escape");
  await page.locator(`${selectors.sessionDetailDialog} .dialog-close`).click();

  const rail = page.locator("#session-sidebar");
  const center = page.locator(".workbench-center");
  const beforeRail = await rail.boundingBox();
  const beforeCenter = await center.boundingBox();
  await page.locator(selectors.sessionCollapseToggle).click();
  await expect(rail).toHaveAttribute("data-collapsed", "true");
  const collapsedRail = await rail.boundingBox();
  const collapsedCenter = await center.boundingBox();
  expect(collapsedRail?.width ?? 0).toBeLessThan(80);
  expect(collapsedCenter?.width ?? 0).toBeGreaterThan((beforeCenter?.width ?? 0) + 100);
  expect(collapsedRail?.width ?? 0).toBeLessThan((beforeRail?.width ?? 0) - 120);
  await expect(page).toHaveURL(/\/workbench\/sessions\/ses_running/u);
  await expect(page.locator(`${selectors.messageCard}[data-role="agent"][data-status="running"]`)).toBeVisible();
  await expect(page.locator(selectors.commandInput)).toBeVisible();
  await saveScreenshot(page, testInfo, "session-rail-collapsed");

  await page.locator(selectors.sessionCollapseToggle).click();
  await expect(rail).toHaveAttribute("data-collapsed", "false");
  await expect(page.locator(sessionTab("ses_running"))).toHaveAttribute("data-active", "true");
  await expect(page.locator(`${selectors.messageCard}[data-role="agent"][data-status="running"]`)).toBeVisible();
  const expandedRail = await rail.boundingBox();
  expect(expandedRail?.width ?? 0).toBeGreaterThan(200);
  await saveScreenshot(page, testInfo, "session-rail-expanded-after-collapse");
});

test.describe("mobile session rail collapse", () => {
  test.use({ viewport: { width: 390, height: 844 } });

  test("collapse toggle remains reachable on narrow screens", async ({ page }, testInfo) => {
    await gotoWorkbench(page);
    await expect(page.locator(selectors.sessionCollapseToggle)).toBeVisible();
    await page.locator(selectors.sessionCollapseToggle).click();
    await expect(page.locator("#session-sidebar")).toHaveAttribute("data-collapsed", "true");
    await expect(page.locator(selectors.commandInput)).toBeVisible();
    await saveScreenshot(page, testInfo, "session-rail-mobile-collapsed");
    await page.locator(selectors.sessionCollapseToggle).click();
    await expect(page.locator(selectors.sessionTabs)).toBeVisible();
  });
});
