import { expect, test } from "@playwright/test";
import { mockAgentApi } from "./support/mock-agent-api";
import { mockWorkbenchContext } from "./support/mock-workbench-context";
import { responsesFixture } from "./support/responses-fixture";

const title = "空间候选管段（距离近，非故障定位）";
const ids = ["19025", "19026", "19022", "19027"];
const distances = [283.85, 283.86, 291.45, 292.44];

for (const width of [1440, 375]) for (const kind of ["Table", "Chart"] as const) {
  test(`${kind} data stays display-only inline and expanded at ${width}px`, async ({ page }, testInfo) => {
    await page.setViewportSize({ width, height: 1000 });
    await page.emulateMedia({ reducedMotion: "reduce" });
    await mockWorkbenchContext(page, undefined, undefined, {}, [], { runtimeMode: "backend" });
    await mockAgentApi(page);
    const block = { version: "answer-ui@1", block_id: "selection-style", fallback_text: "演练候选管段", spec: {
      root: "data", elements: { data: { type: kind, children: [], props: kind === "Table"
        ? { title, columns: ["管段", "距离（米）"], rows: ids.map((id, index) => [id, String(distances[index])]) }
        : { title, chart_type: "line", x_data: ids, series: [{ name: "距离（米）", data: distances }], source: "浏览器演练" } } }
    } };
    await page.route("**/api/v1/responses", async (route) => {
      if (route.request().method() === "OPTIONS") return route.fallback();
      await route.fulfill({ headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "text/event-stream" }, body: responsesFixture([
        { type: "start", messageId: "selection-answer" },
        { type: "data-answer_ui", id: block.block_id, data: block },
        { type: "data-final_answer", data: { content: "以下为浏览器演练资料。", ui_block_ids: [block.block_id] } },
        { type: "finish", finishReason: "stop" },
      ]) });
    });
    await page.goto("/", { waitUntil: "domcontentloaded" });
    await page.getByRole("button", { name: width < 1024 ? "打开 Agent 面板" : /展开 Agent 助手面板/ }).click();
    const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
    await panel.locator(".agent-panel-prompt-textarea").fill("查看演练候选管段");
    await panel.getByRole("button", { name: "发送 Agent 指令" }).click();
    let ui = panel.locator('[data-answer-ui="selection-style"]');
    await expect(ui).toBeVisible();
    if (kind === "Chart") await ui.getByRole("tab", { name: "数据", exact: true }).click();
    await expect(ui.getByRole("table")).toContainText("19025");
    await expect(ui.getByRole("table")).toContainText("283.85");
    await expect(ui.getByRole("columnheader")).toHaveCount(2);
    await expect(ui.getByRole("checkbox")).toHaveCount(0);
    await expect(ui.getByRole("button", { name: /加入分析|针对.*提问|取消选行/ })).toHaveCount(0);
    await expect(ui.getByRole("region", { name: "分析内容篮" })).toHaveCount(0);
    await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
    await page.evaluate(() => document.fonts.ready);
    await ui.locator("table").screenshot({ path: testInfo.outputPath("inline-display.png") });
    const sort = ui.getByRole("button", { name: "按距离（米）排序", exact: true });
    await sort.click();
    await sort.click();
    await expect(ui.getByRole("columnheader", { name: "距离（米）" })).toHaveAttribute("aria-sort", "descending");
    await expect(ui.locator("tbody tr").first()).toContainText("19027");
    await ui.getByRole("textbox", { name: `搜索${title}` }).fill("19025");
    await expect(ui.locator("tbody tr")).toHaveCount(1);
    await panel.getByRole("button", { name: "展开查看", exact: true }).click();
    const workspace = page.getByRole("region", { name: "展开报告工作区", exact: true });
    ui = workspace.locator('[data-answer-ui="selection-style"]');
    await expect(ui.getByRole("textbox", { name: `搜索${title}` })).toHaveValue("19025");
    await expect(ui.getByRole("columnheader", { name: "距离（米）" })).toHaveAttribute("aria-sort", "descending");
    await expect(ui.getByRole("checkbox")).toHaveCount(0);
    await expect(ui.locator('tbody tr[data-state="selected"]')).toHaveCount(0);
    await expect(ui.getByRole("button", { name: /加入分析|针对.*提问|取消选行/ })).toHaveCount(0);
    await ui.getByRole("textbox", { name: `搜索${title}` }).fill("");
    await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
    await ui.locator("[data-interactive-table]").screenshot({ path: testInfo.outputPath("expanded-display.png") });
    await ui.getByRole("button", { name: "按距离（米）排序", exact: true }).focus();
    await page.keyboard.press("Enter");
    await expect(ui.getByRole("columnheader", { name: "距离（米）" })).toHaveAttribute("aria-sort", "none");
    await ui.getByRole("textbox", { name: `搜索${title}` }).fill("没有匹配的管段");
    await expect(ui.getByRole("cell", { name: "当前筛选没有匹配的数据。" })).toHaveAttribute("colspan", "2");
    await expect(ui.getByRole("checkbox")).toHaveCount(0);
  });
}