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(`short structured replies stay inline at ${width}px`, async ({ page }) => {
    await page.setViewportSize({ width, height: 900 });
    await page.emulateMedia({ reducedMotion: "reduce" });
    await mockWorkbenchContext(page, undefined, undefined, {}, [], { runtimeMode: "backend" });
    const title = "管道定位结果";
    await mockAgentApi(page, { sessions: [{ session_id: "short-answer", title, created_at: Date.now(), updated_at: Date.now() }] });
    const content = "已将管道 **533793、486121、523616** 定位到地图视图。但当前可用操作未提供独立的管道高亮功能，所以不能确认它们已高亮。";
    const warning = "已将三根管道定位到地图视图。当前可用工具未提供独立的管道高亮操作，因此不能确认已高亮。";
    const block = {
      version: "answer-ui@1", block_id: "location-note", fallback_text: warning,
      spec: { root: "note", elements: { note: { type: "Text", props: { tone: "warning", text: warning }, children: [] } } },
    };
    await page.route("**/api/v1/session/short-answer?**", (route) => route.fulfill({
      headers: { "Access-Control-Allow-Origin": "*" },
      json: {
        session_id: "short-answer", title, purpose: "ordinary_chat", status: "active", is_streaming: false,
        messages: [{ id: "short-reply", role: "assistant", parts: [
          { type: "text", text: content }, { type: "data-answer_ui", data: block },
          { type: "data-final_answer", data: { content, ui_block_ids: ["location-note"] } },
        ] }],
      },
    }));
    await page.route("**/api/v1/session/short-answer/ui-state**", (route) => route.fulfill({
      headers: { "Access-Control-Allow-Origin": "*" },
      json: {
        version: "answer-view-state@1", message_id: "short-reply", block_id: "location-note",
        revision: 0, schema_digest: "short-note-fixture", nodes: {},
        block: { evidenceFilter: "all" }, updated_at: null,
      },
    }));
    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: /历史/ }).click();
    await page.locator("button.agent-history-session-trigger").filter({ hasText: title }).click();
    const message = panel.locator('[data-agent-message-id="short-reply"]');
    const note = message.getByRole("note");
    await expect(note).toHaveText(`注意事项${warning}`);
    await expect(message.locator('[data-answer-state="saved"]')).toBeVisible();
    await page.evaluate(() => document.fonts.ready);
    const geometry = await message.evaluate((element) => {
      const paragraph = element.querySelector(".agent-streaming-response")!;
      const header = element.querySelector(".agent-chat-message-header")!;
      const note = element.querySelector('[role="note"]')!;
      const description = note.querySelector('[data-slot="alert-description"]')!;
      return {
        headerToBody: header ? paragraph.getBoundingClientRect().top - header.getBoundingClientRect().bottom : 0,
        bodyToNote: note.getBoundingClientRect().top - paragraph.getBoundingClientRect().bottom,
        noteHeight: note.getBoundingClientRect().height,
        noteBackground: getComputedStyle(note).backgroundColor,
        bodyFont: getComputedStyle(paragraph).fontSize,
        descriptionFont: getComputedStyle(description).fontSize,
        overflows: element.scrollWidth > element.clientWidth,
      };
    });
    console.log(JSON.stringify({ width, ...geometry }));
    await message.screenshot({ path: `/tmp/agent-short-answer-${width}.png` });
    await expect(message.getByRole("button", { name: "展开查看", exact: true })).toHaveCount(0);
    expect(geometry.headerToBody).toBeLessThanOrEqual(16);
    expect(geometry.bodyToNote).toBeGreaterThanOrEqual(19);
    expect(geometry.bodyToNote).toBeLessThanOrEqual(21);
    expect(geometry.noteBackground).toBe("rgb(255, 255, 255)");
    expect(geometry.overflows).toBe(false);
    await expect(message.getByText("533793、486121、523616", { exact: true })).toBeVisible();
  });
}