import { expect, test } from "@playwright/test";
import { mockAgentApi } from "./support/mock-agent-api";
import { mockWorkbenchContext } from "./support/mock-workbench-context";
for (const width of [1440, 375, 320]) {
  test(`conversation title aligns with assistant text ${width}`, async ({ page }) => {
    await page.setViewportSize({ width, height: 900 });
    await page.emulateMedia({ reducedMotion: "reduce" });
    await mockWorkbenchContext(page);
    const title = "育秀路人民路路口部分查找三根大管径的管道";
    await mockAgentApi(page, { sessions: [{ session_id: "header-preview", title, created_at: Date.now(), updated_at: Date.now() }] });
    await page.route("**/api/v1/session/header-preview?**", route => route.fulfill({
      headers: { "Access-Control-Allow-Origin": "*" }, json: {
        session_id: "header-preview", title, purpose: "ordinary_chat", status: "active", is_streaming: false,
        messages: [{ id: "prompt", role: "user", parts: [{ type: "text", text: "重新定位下" }] },
          { id: "reply", role: "assistant", parts: [{ type: "text", text: Array.from({ length: 35 }, (_, i) => `第${i + 1}条核查记录：核对管道位置、压力与流量。`).join("\n\n") }] }]
      }
    }));
    await page.goto("/", { waitUntil: "domcontentloaded" });
    await page.getByRole("button", { name: width < 1024 ? "打开 Agent 面板" : /展开 Agent 助手面板/ }).click();
    const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
    await panel.getByRole("button", { name: "打开 Agent 历史记录" }).click();
    await page.locator(".agent-history-session-trigger").filter({ hasText: title }).click();
    const context = panel.locator(".agent-chat-context-bar");
    await expect(context).toBeVisible();
    await expect(context).toHaveCSS("text-align", "left");
    const paragraph = panel.locator('[data-agent-message-id="reply"] .agent-streaming-response p').first();
    await expect(paragraph).toBeVisible();
    await page.evaluate(() => document.fonts.ready);
    const textLeft = (element: Element) => {
      const text = document.createTreeWalker(element, NodeFilter.SHOW_TEXT).nextNode()!;
      const range = document.createRange();
      range.selectNodeContents(text);
      return range.getClientRects()[0].x;
    };
    const titleX = await context.getByText(title, { exact: true }).evaluate(textLeft);
    const paragraphX = await paragraph.evaluate(textLeft);
    console.log(JSON.stringify({ width, titleX, paragraphX }));
    await panel.screenshot({ path: `/tmp/agent-title-alignment-${width}.png` });
    expect(Math.abs(titleX - paragraphX)).toBeLessThanOrEqual(1);
  });
}