import { expect, test } from "@playwright/test";

test("Agent panel resizes within its responsive 720px workspace limit", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });

  const panel = page.locator('aside[aria-label="Agent 命令面板"]');
  const resizeHandle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
  await expect(panel).toBeVisible();
  await expect(resizeHandle).toBeVisible();

  const handleBox = await resizeHandle.boundingBox();
  expect(handleBox).not.toBeNull();

  await page.mouse.move(handleBox!.x + handleBox!.width / 2, handleBox!.y + handleBox!.height / 2);
  await page.mouse.down();
  await page.mouse.move(1_200, handleBox!.y + handleBox!.height / 2, { steps: 10 });
  await page.mouse.up();

  await expect.poll(async () => (await panel.boundingBox())?.width).toBe(676);

  await resizeHandle.focus();
  await page.keyboard.press("Home");
  await expect.poll(async () => (await panel.boundingBox())?.width).toBe(500);
  await page.keyboard.press("ArrowRight");
  await expect.poll(async () => (await panel.boundingBox())?.width).toBe(516);
  await page.keyboard.press("End");
  await expect.poll(async () => (await panel.boundingBox())?.width).toBe(676);
});

test("collapsed Agent rail is compact and expands as one clear action", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });

  await page.getByRole("button", { name: "折叠 Agent 面板" }).click();

  const rail = page.locator('aside[aria-label="Agent 折叠栏"]');
  const expandButton = page.getByRole("button", { name: /展开 Agent 助手面板/ });
  await expect(rail).toBeVisible();
  await expect(rail).toHaveCSS("width", "72px");
  await expect(expandButton).toHaveAttribute("title", /当前|正在/);

  await expandButton.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();
  });
});

// Temporarily disabled: this regression flow would start a real Agent run.
// Agent analysis must be explicitly triggered by a user, not by automated tests.
test.skip("mobile alert summary opens the Agent conversation panel", async ({ 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();
  // Agent execution must remain an explicit user action.
  // 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();
});