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

test("opening Agent and condition panels does not move the map camera", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.waitForFunction(
    () =>
      Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")) &&
      !window.__waterNetworkMap?.isMoving()
  );
  const initialCamera = await readCamera(page);

  await expect(page.locator('aside[aria-label="Agent 折叠栏"]')).toBeVisible();
  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
  await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeVisible();
  await page.getByRole("button", { name: "折叠 Agent 面板" }).click();
  await expect(page.locator('aside[aria-label="Agent 折叠栏"]')).toBeVisible();
  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
  await expect(page.locator('aside[aria-label="Agent 命令面板"]')).toBeVisible();

  await page.getByRole("button", { name: "工况任务", exact: true }).click();
  const conditionPanel = page.getByRole("region", { name: "工况任务", exact: true });
  await conditionPanel.getByRole("button", { name: "展开工况任务" }).click();
  await expect(conditionPanel.getByRole("button", { name: "收起工况任务" })).toBeVisible();
  await expect
    .poll(async () => (await conditionPanel.boundingBox())?.width ?? 0)
    .toBeGreaterThan(800);

  await page.waitForFunction(() => !window.__waterNetworkMap?.isMoving());
  const finalCamera = await readCamera(page);

  expect(finalCamera.longitude).toBeCloseTo(initialCamera.longitude, 10);
  expect(finalCamera.latitude).toBeCloseTo(initialCamera.latitude, 10);
  expect(finalCamera.zoom).toBeCloseTo(initialCamera.zoom, 10);
  expect(finalCamera.bearing).toBeCloseTo(initialCamera.bearing, 10);
  expect(finalCamera.pitch).toBeCloseTo(initialCamera.pitch, 10);
});

async function readCamera(page: import("@playwright/test").Page) {
  return page.evaluate(() => {
    const map = window.__waterNetworkMap;
    if (!map) throw new Error("Map is not ready");
    const center = map.getCenter();

    return {
      longitude: center.lng,
      latitude: center.lat,
      zoom: map.getZoom(),
      bearing: map.getBearing(),
      pitch: map.getPitch()
    };
  });
}