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

async function expectCenteredStart(panel: Locator) {
  await expect(panel).toHaveAttribute("data-agent-centered", "true");
  await expect.poll(async () => {
    const body = (await panel.locator(".agent-panel-body").boundingBox())!;
    const group = (await panel.locator(".agent-panel-band").boundingBox())!;
    return Math.abs(group.y + group.height / 2 - body.y - body.height / 2);
  }).toBeLessThan(2);
  const body = (await panel.locator(".agent-panel-body").boundingBox())!;
  const form = (await panel.locator("form").boundingBox())!;
  expect(Math.abs(form.x + form.width / 2 - body.x - body.width / 2)).toBeLessThan(1);
  expect(form.width).toBeLessThanOrEqual(552);
  await expect(panel.locator("form")).toHaveCount(1);
}

async function preparePreview(page: import("@playwright/test").Page) {
  await page.evaluate(() => document.fonts.ready);
  // Close this snapshot together; positional locators shift as earlier notices exit.
  await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => {
    for (const button of buttons) (button as HTMLButtonElement).click();
  });
}

test.beforeEach(async ({ page }) => {
  await page.emulateMedia({ reducedMotion: "reduce" });
  await mockWorkbenchContext(page);
  await mockAgentApi(page, { sessions: [{
    session_id: "recent-pressure", title: "城南供水压力复核", created_at: Date.now() - 3_600_000, updated_at: Date.now() - 60_000,
  }] });
});

test("empty conversation centers the first question and sends an Agent-generated recent activity question", async ({ page }) => {
  let requests = 0;
  await page.route("**/api/v1/suggestions", async (route) => {
    if (route.request().method() === "OPTIONS") return route.fallback();
    requests += 1;
    const body = route.request().postDataJSON() as { model: string; activities: Array<{ id: string; title: string; kind: string }> };
    expect(body.model).toBe("test/model");
    const recent = body.activities.find((item) => item.title === "城南供水压力复核");
    expect(recent).toBeDefined();
    await route.fulfill({ headers: { "Access-Control-Allow-Origin": "*" }, json: { suggestions: [{
      question: "重新核对城南供水压力复核涉及的监测证据", activity_id: recent!.id,
    }] } });
  });
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
  const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
  await expect(panel).toHaveAttribute("data-agent-starting", "true");
  await expect(panel.getByRole("heading", { name: "有什么可以帮你？" })).toBeVisible();
  const question = panel.getByRole("button", { name: /重新核对城南供水压力复核涉及的监测证据/ });
  await expect(question).toBeVisible();
  await expect(question).toContainText("近期会话");
  const composer = (await panel.locator("form").boundingBox())!;
  await expectCenteredStart(panel);
  const suggestions = (await panel.getByRole("group", { name: "推荐问题" }).boundingBox())!;
  expect(suggestions.y).toBeGreaterThan(composer.y + composer.height);
  expect(composer.height).toBeLessThan(150);
  await expect(panel.locator("form")).toHaveCount(1);
  await panel.screenshot({ path: "/tmp/nexttjwater-agent-start-preview/centered-desktop.png" });
  const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
  for (const width of [400, 640]) {
    const box = (await handle.boundingBox())!;
    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
    await page.mouse.down();
    await page.mouse.move(width, box.y + box.height / 2);
    await page.mouse.up();
    await expect.poll(async () => Math.round((await panel.boundingBox())!.width)).toBe(width);
    await expectCenteredStart(panel);
  }
  expect(requests).toBe(1);
  await question.click();
  await expect(panel).toHaveAttribute("data-agent-starting", "false");
  await expect(panel.locator(".agent-panel-composer-motion")).toHaveCSS("transform", "none");
  await expect(panel.locator("textarea")).toHaveCSS("min-height", "64px");
  expect((await panel.locator(".agent-panel-band").last().boundingBox())!.height).toBeLessThanOrEqual(180);
  await expect(panel.locator(".agent-panel-user-message")).toHaveText("重新核对城南供水压力复核涉及的监测证据");
  await expect(panel.locator("form")).toHaveCount(1);
  await expect.poll(async () => {
    const form = (await panel.locator("form").boundingBox())!;
    const box = (await panel.boundingBox())!;
    return Math.abs(form.y + form.height - (box.y + box.height - 8));
  }).toBeLessThan(1);
  await panel.screenshot({ path: "test-results/agent-history-ui/agent-conversation-compact.png" });


});

test("multiline follow-up stays reachable in a short desktop viewport", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
  const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
  await panel.locator("textarea").fill("核对供水压力");
  await panel.getByRole("button", { name: "发送 Agent 指令" }).click();
  await expect(panel).toHaveAttribute("data-agent-starting", "false");
  const prompt = panel.locator("textarea");
  await prompt.focus();
  await page.keyboard.type("核对监测点");
  await page.keyboard.press("Shift+Enter");
  await page.keyboard.type("补充现场记录");
  await expect(prompt).toHaveValue("核对监测点\n补充现场记录");
  const initialHeight = (await prompt.boundingBox())!.height;
  expect(initialHeight).toBeGreaterThanOrEqual(64);
  expect(initialHeight).toBeLessThanOrEqual(70);
  await prompt.fill("监测点、异常时间及现场核验记录。\n".repeat(30));
  for (const height of [900, 640]) {
    await page.setViewportSize({ width: 1280, height });
    const promptBox = (await prompt.boundingBox())!;
    expect(promptBox.height).toBeGreaterThan(initialHeight);
    expect(promptBox.height).toBeLessThanOrEqual(Math.min(height * 0.24, 160));
    expect(promptBox.x).toBeGreaterThanOrEqual(0);
    await expect.poll(() => prompt.evaluate((element) => {
      const input = element.getBoundingClientRect();
      const container = element.closest("aside")!.getBoundingClientRect();
      return input.left >= container.left && input.right <= container.right;
    })).toBe(true);
    expect(await prompt.evaluate((element) => element.scrollHeight > element.clientHeight)).toBe(true);
    const send = panel.getByRole("button", { name: "发送 Agent 指令" });
    await expect(send).toBeVisible();
    const sendBox = (await send.boundingBox())!;
    expect(sendBox.y + sendBox.height).toBeLessThanOrEqual(height);
    expect((await panel.getByRole("log").boundingBox())!.height).toBeGreaterThan(100);
  }
  await prompt.fill("");
  await expect(prompt).toHaveCSS("height", "64px");
  await panel.screenshot({ path: "test-results/agent-history-ui/agent-conversation-short-viewport.png" });
});

test("failed recommendation generation leaves the input ready for a normal conversation", async ({ page }) => {
  await page.route("**/api/v1/suggestions", (route) => route.request().method() === "OPTIONS" ? route.fallback() : route.fulfill({
    status: 503, headers: { "Access-Control-Allow-Origin": "*" }, json: { message: "unavailable" },
  }));
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
  const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
  await expect(panel.getByText("推荐问题暂不可用，可直接输入任务。")).toBeVisible();
  const prompt = panel.getByPlaceholder("询问供水问题，或描述需要处理的任务");
  await prompt.fill("核对供水运行情况");
  await panel.getByRole("button", { name: "发送 Agent 指令" }).click();
  await expect(panel.locator(".agent-panel-user-message")).toHaveText("核对供水运行情况");
  await expect(panel).toHaveAttribute("data-agent-starting", "false");
});

test("sending moves the same centered composer to the bottom and new conversation restores the start", async ({ page }) => {
  await page.emulateMedia({ reducedMotion: "no-preference" });
  await mockAgentApi(page, { sessions: [] });
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
  const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
  await expect(panel.getByRole("group", { name: "推荐问题" }).getByRole("button")).toHaveCount(3);
  const form = panel.locator("form");
  await preparePreview(page);
  await panel.screenshot({ path: "/tmp/nexttjwater-agent-start-preview/centered-desktop.png" });
  await form.locator("textarea").fill("核对近期供水压力变化");
  await panel.evaluate(async (element) => {
    await Promise.allSettled(element.getAnimations({ subtree: true })
      .filter((animation) => animation.effect?.getComputedTiming().iterations !== Infinity)
      .map((animation) => animation.finished));
  });
  await page.evaluate(() => { Object.assign(window, { __agentComposerBefore: document.querySelector('aside[aria-label="Agent 命令面板"] form') }); });
  const before = (await form.boundingBox())!;
  await form.evaluate((element) => {
    const positions: number[] = [];
    Object.assign(window, { composerMotionPositions: positions });
    const start = performance.now();
    const sample = () => {
      positions.push(element.getBoundingClientRect().y);
      if (performance.now() - start < 700) requestAnimationFrame(sample);
    };
    requestAnimationFrame(sample);
  });
  await panel.getByRole("button", { name: "发送 Agent 指令" }).click();
  await expect(panel).toHaveAttribute("data-agent-starting", "false");
  await expect(panel.locator(".agent-panel-user-message")).toBeVisible();
  await expect(panel.locator(".agent-panel-composer-motion")).toHaveCSS("transform", "none");
  const after = (await form.boundingBox())!;
  expect(after.y).toBeGreaterThan(before.y + 100);
  await expect(panel).toHaveAttribute("data-agent-centered", "false");
  const panelBox = (await panel.boundingBox())!;
  expect(Math.abs(after.y + after.height - (panelBox.y + panelBox.height - 8))).toBeLessThan(1);
  expect(Math.abs(after.height - before.height)).toBeLessThan(1);
  await expect.poll(() => page.evaluate(({ start, end }) =>
    (window as unknown as { composerMotionPositions: number[] }).composerMotionPositions
      .some((y) => y > start + 2 && y < end - 2),
  { start: before.y, end: after.y })).toBe(true);
  expect(await page.evaluate(() => (window as typeof window & { __agentComposerBefore: Element }).__agentComposerBefore === document.querySelector('aside[aria-label="Agent 命令面板"] form'))).toBe(true);
  await expect(panel.locator("form")).toHaveCount(1);
  await panel.getByRole("button", { name: "新建 Agent 对话" }).click();
  await expect(panel.locator(".agent-panel-composer-motion")).toHaveCSS("transform", "none");
  await expectCenteredStart(panel);
  await expect(form.locator("textarea")).toHaveValue("");
});

for (const width of [320, 375]) {
  test(`centered first question and restored persona fit at ${width}px`, async ({ page }) => {
    await page.setViewportSize({ width, height: 844 });
    await page.goto("/", { waitUntil: "domcontentloaded" });
    await page.getByRole("button", { name: "打开 Agent 面板" }).click();
    const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
    await expect(panel.getByRole("heading", { name: "有什么可以帮你？" })).toBeVisible();
    await expect(panel.getByRole("group", { name: "推荐问题" }).getByRole("button")).toHaveCount(3);
    const form = (await panel.locator("form").boundingBox())!;
    expect(form.x).toBeGreaterThanOrEqual(0);
    expect(form.x + form.width).toBeLessThanOrEqual(width);
    expect(form.height).toBeLessThan(150);
    await expectCenteredStart(panel);
    await expect(panel.locator("header").getByLabel("Agent 状态")).toBeVisible();
    await preparePreview(page);
    await panel.screenshot({ path: `/tmp/nexttjwater-agent-start-preview/centered-${width}.png` });
    await panel.locator("textarea").fill("短屏下也能完成首次提问");
    await page.setViewportSize({ width, height: 480 });
    const send = panel.getByRole("button", { name: "发送 Agent 指令" });
    await send.scrollIntoViewIfNeeded();
    expect(await panel.evaluate((element) => element.scrollWidth <= element.clientWidth + 1)).toBe(true);
    const sendBox = (await send.boundingBox())!;
    expect(sendBox.y + sendBox.height).toBeLessThanOrEqual(480);
    await send.click();
    await expect(panel.locator(".agent-panel-user-message")).toHaveText("短屏下也能完成首次提问");
    await expect(panel).toHaveAttribute("data-agent-centered", "false");
  });
}