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

test("Agent panel resizes by drag without exceeding half the viewport", 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);
  await page.mouse.up();

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

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

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