import { expect, test } from "@playwright/test";
import { mockAgentApi } from "./support/mock-agent-api";

test("unified workbench navigation collapses and restores the main workspace", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });

  const navigation = page.getByRole("complementary", { name: "工作台导航" });
  const workspace = page.locator("#main-workspace");
  await expect(navigation).toHaveCSS("width", "368px");
  await expect.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0)).toBe(368);

  await page.getByRole("button", { name: "折叠工作台导航" }).click();
  await expect(navigation).toHaveCSS("width", "48px");
  await expect.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0)).toBe(48);

  await page.getByRole("button", { name: "展开工作台导航" }).click();
  await expect(navigation).toHaveCSS("width", "368px");
  await expect.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0)).toBe(368);
});

test("unified navigation switches between Agent and condition panes", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });

  const mainFrame = page.getByTestId("workbench-main-frame");
  await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeVisible();
  const prompt = page.getByPlaceholder("输入调度问题，Agent 将通过后端会话流式响应");
  await prompt.fill("保留尚未发送的诊断问题");
  await mainFrame.getByRole("button", { name: "工况任务", exact: true }).click();
  const conditionPanel = page.getByRole("region", { name: "工况任务", exact: true });
  await expect(conditionPanel).toBeVisible();
  await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeHidden();
  await conditionPanel.getByRole("button", { name: "展开工况任务" }).click();
  await expect(conditionPanel.getByRole("button", { name: "收起工况任务" })).toBeVisible();
  await conditionPanel.getByRole("button", { name: "收起工况任务" }).click();

  await mainFrame.getByRole("button", { name: "Agent", exact: true }).click();
  await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeVisible();
  await expect(prompt).toHaveValue("保留尚未发送的诊断问题");

  const topBarConditionToggle = page
    .locator("header.acrylic-navigation")
    .getByRole("button", { name: "工况任务", exact: true });
  await page.getByRole("button", { name: "折叠工作台导航" }).click();
  await expect(page.getByRole("complementary", { name: "工作台导航" })).toHaveCSS("width", "48px");
  await topBarConditionToggle.click();
  await expect(page.getByRole("complementary", { name: "工作台导航" })).toHaveCSS("width", "368px");
  await expect(page.getByRole("region", { name: "工况任务", exact: true })).toBeVisible();
  await topBarConditionToggle.click();
  await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeVisible();
});

test("Agent resize handle stays hidden in the mobile layout", async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 812 });
  await page.goto("/", { waitUntil: "domcontentloaded" });

  await expect(page.getByRole("separator", { name: "调整 Agent 面板宽度" })).toBeHidden();
});

test.describe("mobile touch layout", () => {
  test.use({ hasTouch: true, isMobile: true, viewport: { width: 375, height: 812 } });

  test("mobile Agent toggle opens the conversation panel by touch", async ({ page }) => {
    await page.goto("/", { waitUntil: "domcontentloaded" });

    const openButton = page.getByRole("button", { name: "打开 Agent 面板" });
    const buttonBox = await openButton.boundingBox();
    expect(buttonBox).not.toBeNull();

    await page.touchscreen.tap(
      buttonBox!.x + buttonBox!.width / 2,
      buttonBox!.y + buttonBox!.height / 2
    );

    await expect(
      page.locator('aside[aria-label="Agent 命令面板"]').filter({ visible: true })
    ).toBeVisible();
    await expect(page.getByRole("button", { name: "关闭 Agent 面板" })).toBeVisible();
  });
});

test("mobile alert summary opens the Agent conversation panel", async ({ page }) => {
  await mockAgentApi(page);
  await page.clock.setFixedTime(new Date("2026-07-21T10:40:00+08:00"));
  await page.setViewportSize({ width: 375, height: 812 });
  await page.goto("/", { waitUntil: "domcontentloaded" });

  await page.getByRole("button", { name: /查看异常处置面板/ }).click();
  await page.getByRole("button", { name: "工况汇总" }).click();

  await expect(
    page.locator('aside[aria-label="Agent 命令面板"]').filter({ visible: true })
  ).toBeVisible();
  await expect(page.getByRole("button", { name: "关闭 Agent 面板" })).toBeVisible();
  await expect(page.getByText("已发起工况汇总", { exact: true })).toBeVisible();
});