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

async function setupTopics(page: Page) {
  await page.emulateMedia({ reducedMotion: "reduce" });
  await mockWorkbenchContext(page);
  await mockAgentApi(page);
  const topics = [{ id: "10000000-0000-4000-8000-000000000001", name: "压力异常事件", createdAt: "2026-10-22T01:00:00Z", updatedAt: "2026-10-22T01:00:00Z" },
    { id: "10000000-0000-4000-8000-000000000002", name: "阀门检修问题", createdAt: "2026-10-22T01:00:00Z", updatedAt: "2026-10-22T01:00:00Z" }];
  const sessions = [{ id: "topic-chat-a", title: "夜间压力复核", topic_id: topics[0].id, updated_at: Date.now(), created_at: Date.now(), purpose: "ordinary_chat" },
    { id: "topic-chat-b", title: "检修记录核对", topic_id: topics[1].id, updated_at: Date.now() - 1000, created_at: Date.now() - 1000, purpose: "ordinary_chat" }];
  const metrics = { topicReads: 0, sentTopic: "" };
  await page.route(/\/api\/v1\/topics(?:\/[^?]+)?$/, (route) => {
    const request = route.request(); if (request.method() === "OPTIONS") return route.fallback();
    const id = new URL(request.url()).pathname.split("/").at(-1);
    const headers = { "Access-Control-Allow-Origin": "*" };
    if (request.method() === "GET") { metrics.topicReads++; return route.fulfill({ headers, json: { topics } }); }
    if (request.method() === "POST") {
      const topic = { id: "10000000-0000-4000-8000-000000000003", name: request.postDataJSON().name, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() };
      topics.push(topic); return route.fulfill({ headers, status: 201, json: topic });
    }
    if (request.method() === "PATCH") { const topic = topics.find((entry) => entry.id === id)!; topic.name = request.postDataJSON().name; return route.fulfill({ headers, json: topic }); }
    const index = topics.findIndex((entry) => entry.id === id); topics.splice(index, 1);
    return route.fulfill({ headers, status: 204 });
  });
  await page.route("**/api/v1/sessions?**", (route) => {
    if (route.request().method() === "OPTIONS") return route.fallback();
    const query = new URL(route.request().url()).searchParams;
    const q = query.get("q") ?? "";
    const topicId = query.get("topic_id");
    return route.fulfill({ headers: { "Access-Control-Allow-Origin": "*" }, json: {
      sessions: sessions.map((session) => ({ ...session, topic_id: topics.some((topic) => topic.id === session.topic_id) ? session.topic_id : null,
        topic_name: topics.find((topic) => topic.id === session.topic_id)?.name,
        search_snippet: q && "南桥阀门夜间巡检记录".includes(q) ? "正文命中：南桥阀门夜间巡检记录" : undefined,
      })).filter((session) => (!q || session.title.includes(q) || session.search_snippet)
        && (!topicId || (topicId === "unclassified" ? !session.topic_id : session.topic_id === topicId))), has_more: false, next_cursor: null,
    } });
  });
  await page.route(/\/api\/v1\/session\/topic-chat-[ab]\/topic$/, (route) => {
    if (route.request().method() === "OPTIONS") return route.fallback();
    const id = new URL(route.request().url()).pathname.split("/").at(-2);
    const topicId = route.request().postDataJSON().topic_id;
    sessions.find((session) => session.id === id)!.topic_id = topicId;
    return route.fulfill({ headers: { "Access-Control-Allow-Origin": "*" }, json: { session_id: id, topic_id: topicId } });
  });
  await page.route("**/api/v1/responses", (route) => {
    if (route.request().method() === "OPTIONS") return route.fallback();
    metrics.sentTopic = route.request().postDataJSON().tjwater.topic_id;
    const write = responseFixtureWriter("new-topic-conversation");
    return route.fulfill({ headers: { "Access-Control-Allow-Origin": "*" }, contentType: "text/event-stream", body: [
      { type: "start", messageId: "topic-answer" }, { type: "text-start", id: "topic-text" },
      { type: "text-delta", id: "topic-text", delta: "已按当前主题整理问题。" }, { type: "text-end", id: "topic-text" }, { type: "finish" },
    ].map(write).join("") });
  });
  return metrics;
}

test("topics organize chats while full-text history searches across all topics", async ({ page }) => {
  test.setTimeout(60_000);
  const metrics = await setupTopics(page);
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
  const topicTrigger = page.getByRole("button", { name: "选择主题" });
  await topicTrigger.click();
  await page.getByRole("menuitem", { name: "新建主题", exact: true }).click();
  const create = page.getByRole("dialog", { name: "新建主题", exact: true });
  await expect(create.getByRole("textbox", { name: "主题名称" })).toBeFocused();
  await expect(create).toHaveCSS("background-color", "rgb(255, 255, 255)");
  await expect(page.locator(".agent-history-overlay")).toHaveCSS("backdrop-filter", "none");
  await create.screenshot({ path: "test-results/agent-topics/create.png" });
  await create.getByRole("textbox", { name: "主题名称" }).fill("城南供水复盘");
  await create.getByRole("button", { name: "创建主题", exact: true }).click();
  await expect(create).toBeHidden();
  await expect(topicTrigger).toHaveText("城南供水复盘");
  await topicTrigger.click();
  await page.getByRole("menuitemradio", { name: "压力异常事件", exact: true }).click();
  await expect(topicTrigger).toHaveText("压力异常事件");
  await topicTrigger.click();
  await page.getByRole("menuitemradio", { name: "城南供水复盘", exact: true }).click();
  await expect(topicTrigger).toHaveText("城南供水复盘");
  const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
  await panel.locator("textarea").fill("整理相关事件与待查问题");
  await panel.getByRole("button", { name: "发送 Agent 指令", exact: true }).click();
  await expect(panel.getByText("已按当前主题整理问题。", { exact: true })).toBeVisible();
  expect(metrics.sentTopic).toBe("10000000-0000-4000-8000-000000000003");
  await panel.locator("textarea").fill("这段草稿稍后继续整理");
  await panel.getByRole("button", { name: "新建 Agent 对话" }).click();
  await expect(panel.locator("textarea")).toHaveValue("");
  await expect(topicTrigger).toHaveText("城南供水复盘");
  await page.getByRole("button", { name: "打开 Agent 历史记录" }).click();
  await page.getByRole("dialog", { name: "历史对话", exact: true }).locator(".agent-history-session-trigger").filter({ hasText: "新对话" }).click();
  await expect(page.getByRole("dialog", { name: "历史对话", exact: true })).toBeHidden();
  await expect(panel.locator("textarea")).toHaveValue("这段草稿稍后继续整理");
  await page.getByRole("button", { name: "打开 Agent 历史记录" }).click();
  const history = page.getByRole("dialog", { name: "历史对话", exact: true });
  await history.getByRole("searchbox").fill("南桥阀门");
  await expect(history.locator(".agent-history-session-trigger")).toHaveCount(2);
  await expect(history.getByText("压力异常事件", { exact: true })).toBeVisible();
  await expect(history.getByText("阀门检修问题", { exact: true })).toBeVisible();
  await expect(history.getByText("正文命中：南桥阀门夜间巡检记录", { exact: true })).toHaveCount(2);
  await history.getByRole("button", { name: "会话操作：夜间压力复核" }).click();
  await page.getByRole("menuitem", { name: "移入主题", exact: true }).click();
  await history.getByRole("button", { name: "城南供水复盘", exact: true }).click();
  await expect(history.getByText("城南供水复盘", { exact: true })).toBeVisible();
  await history.getByRole("button", { name: "筛选历史主题" }).click();
  await expect(page.getByRole("menu")).toHaveCSS("background-color", "rgb(255, 255, 255)");
  await page.getByRole("menuitemradio", { name: "阀门检修问题", exact: true }).click();
  await expect(history.locator(".agent-history-session-trigger")).toHaveCount(1);
  await history.getByRole("button", { name: "筛选历史主题" }).click();
  await page.getByRole("menuitemradio", { name: "全部主题", exact: true }).click();
  await expect(history.locator(".agent-history-session-trigger")).toHaveCount(2);
  await history.screenshot({ path: "test-results/agent-topics/cross-topic-search.png" });
  await page.keyboard.press("Escape");
  await topicTrigger.click(); await page.getByRole("menuitem", { name: "管理主题", exact: true }).click();
  const manage = page.getByRole("dialog", { name: "管理主题", exact: true });
  await expect(manage.getByRole("button", { name: "新建主题", exact: true })).toBeFocused();
  await manage.screenshot({ path: "test-results/agent-topics/manage.png" });
  await manage.getByRole("button", { name: "重命名主题：城南供水复盘" }).click();
  await expect(page.getByRole("dialog", { name: "重命名主题", exact: true }).getByRole("textbox", { name: "主题名称" })).toBeFocused();
  await page.getByRole("dialog", { name: "重命名主题", exact: true }).getByRole("textbox", { name: "主题名称" }).fill("城南复盘与跟进");
  await page.getByRole("dialog", { name: "重命名主题", exact: true }).getByRole("button", { name: "保存主题" }).click();
  await expect(manage.getByText("城南复盘与跟进", { exact: true })).toBeVisible();
  await manage.getByRole("button", { name: "关闭主题窗口" }).click();
  await expect(topicTrigger).toHaveText("城南复盘与跟进");
  await topicTrigger.click(); await page.getByRole("menuitem", { name: "管理主题", exact: true }).click();
  await manage.getByRole("button", { name: "删除主题：城南复盘与跟进" }).click();
  await page.getByRole("dialog", { name: "删除主题", exact: true }).screenshot({ path: "test-results/agent-topics/delete.png" });
  await page.getByRole("dialog", { name: "删除主题", exact: true }).getByRole("button", { name: "确认删除主题" }).click();
  await expect(manage.getByText("城南复盘与跟进", { exact: true })).toHaveCount(0);
  await expect(manage.getByRole("button", { name: "关闭主题窗口" })).toBeEnabled();
  await page.keyboard.press("Escape");
  await expect(manage).toBeHidden();
  await expect(topicTrigger).toHaveText("未分类");
  const reads = metrics.topicReads;
  for (let i = 0; i < 3; i++) { await topicTrigger.click(); await expect(page.getByRole("menuitem", { name: "新建主题", exact: true })).toBeVisible(); await page.keyboard.press("Escape"); }
  expect(metrics.topicReads).toBe(reads);
  await page.getByRole("button", { name: "打开 Agent 历史记录" }).click();
  await expect(history.getByText("夜间压力复核", { exact: true })).toBeVisible();
  await expect(history.getByText("未分类", { exact: true })).toBeVisible();
});

test("a topic can be created on a 320px mobile sheet", async ({ page }) => {
  await page.setViewportSize({ width: 320, height: 812 });
  await setupTopics(page);
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.getByRole("button", { name: "打开 Agent 面板" }).click();
  await page.getByRole("button", { name: "选择主题" }).click();
  await page.getByRole("menuitem", { name: "新建主题", exact: true }).click();
  const dialog = page.getByRole("dialog", { name: "新建主题", exact: true });
  await expect(dialog.getByRole("textbox", { name: "主题名称" })).toBeFocused();
  await dialog.getByRole("textbox", { name: "主题名称" }).fill("供水异常事件与问题跟踪");
  expect(await dialog.evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true);
  await dialog.screenshot({ path: "test-results/agent-topics/mobile-create.png" });
  await dialog.getByRole("button", { name: "创建主题", exact: true }).click();
  await expect(dialog).toBeHidden();
  await expect(page.getByRole("button", { name: "选择主题" })).toHaveText("供水异常事件与问题跟踪");
});

test("a topic created during a slow menu read remains available for switching", async ({ page }) => {
  await setupTopics(page);
  let release!: () => void;
  const gate = new Promise<void>((resolve) => { release = resolve; });
  let writes = 0;
  await page.route("**/api/v1/topics", async (route) => {
    if (route.request().method() === "GET") await gate;
    if (route.request().method() === "POST") writes++;
    await route.fallback();
  });
  try {
    await page.goto("/", { waitUntil: "domcontentloaded" });
    await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
    const trigger = page.getByRole("button", { name: "选择主题", exact: true });
    await trigger.click();
    await page.getByRole("menuitem", { name: "新建主题", exact: true }).click();
    const dialog = page.getByRole("dialog", { name: "新建主题", exact: true });
    await dialog.getByRole("textbox", { name: "主题名称" }).fill("新建后持续跟踪");
    await dialog.getByRole("button", { name: "创建主题", exact: true }).click();
    await expect(dialog.locator('button[type="submit"]')).toHaveAttribute("aria-busy", "true");
    expect(writes).toBe(0);
    release();
    await expect(dialog).toBeHidden();
    await expect(trigger).toHaveText("新建后持续跟踪");
    await expect(page.locator("body")).not.toHaveCSS("pointer-events", "none");
    await trigger.click();
    await page.getByRole("menuitemradio", { name: "压力异常事件", exact: true }).click();
    await expect(trigger).toHaveText("压力异常事件");
    await trigger.click();
    await page.getByRole("menuitemradio", { name: "新建后持续跟踪", exact: true }).click();
    await expect(trigger).toHaveText("新建后持续跟踪");
    expect(writes).toBe(1);
  } finally { release(); }
});

test("a failed topic creation keeps the name and allows retry", async ({ page }) => {
  await setupTopics(page);
  let failed = false;
  await page.route("**/api/v1/topics", (route) => {
    if (route.request().method() !== "POST" || failed) return route.fallback();
    failed = true;
    return route.fulfill({ status: 503, headers: { "Access-Control-Allow-Origin": "*" }, json: { message: "主题暂时无法保存，请重试" } });
  });
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
  const trigger = page.getByRole("button", { name: "选择主题", exact: true });
  await trigger.click();
  await page.getByRole("menuitem", { name: "新建主题", exact: true }).click();
  const dialog = page.getByRole("dialog", { name: "新建主题", exact: true });
  await dialog.getByRole("textbox", { name: "主题名称" }).fill("保留输入并重试");
  await dialog.getByRole("button", { name: "创建主题", exact: true }).click();
  await expect(dialog.getByRole("alert")).toContainText("主题暂时无法保存");
  await expect(dialog.getByRole("textbox", { name: "主题名称" })).toHaveValue("保留输入并重试");
  await expect(dialog.getByRole("button", { name: "关闭主题窗口" })).toBeEnabled();
  await dialog.getByRole("button", { name: "创建主题", exact: true }).click();
  await expect(dialog).toBeHidden();
  await expect(trigger).toHaveText("保留输入并重试");
  await expect(trigger).toBeFocused();
});