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

test("Dev Panel opens as a floating desktop panel and closes with Escape", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.waitForFunction(() => Boolean(window.__waterNetworkMap));
  await page.waitForFunction(() => Boolean(
    window.__waterNetworkMap?.getLayer("scada-hit")
  ));
  const trigger = page.getByRole("button", { name: "切换地图 Dev Panel" });
  await expect(trigger).toBeVisible();
  await expect(page.getByRole("navigation", { name: "地图工具" })).toBeVisible();
  await trigger.click();

  const panel = page.getByTestId("map-dev-panel");
  await expect(panel).toBeVisible();
  await expect(panel).toHaveCSS("width", "400px");
  await expect(panel).toHaveCSS("border-radius", "16px");
  const panelBox = await panel.boundingBox();
  expect(panelBox).not.toBeNull();
  expect(panelBox!.x).toBe(1028);
  expect(panelBox!.y).toBe(72);
  expect(panelBox!.y + panelBox!.height).toBeLessThanOrEqual(884);
  await expect(page.getByRole("navigation", { name: "地图工具" })).toBeHidden();
  await expect(panel.getByRole("button", { name: "定位并高亮" })).toBeVisible();
  await expect(panel.getByRole("button", { name: "重置全部" })).toBeVisible();

  await panel.getByLabel("管道 ID").fill("P-9");
  await panel.getByLabel("有符号流速").fill("-2.75");
  await panel.getByRole("button", { name: "更新该管道方向" }).click();
  await expect(panel.getByRole("status")).toContainText(
    "已赋值 1 · 正向 0 · 反向 1 · 停止 0"
  );
  await panel.getByRole("button", { name: "开启水流" }).click();
  await expect(panel.getByRole("button", { name: "关闭水流" })).toBeEnabled();

  await page.keyboard.press("Escape");
  await expect(panel).toBeHidden();
});

test("Dev entry is absent below the desktop breakpoint", async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 812 });
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await expect(page.getByRole("button", { name: "切换地图 Dev Panel" })).toBeHidden();
  await expect(page.getByTestId("map-dev-panel")).toHaveCount(0);
});

test("labels remain active per business group and clear globally", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.waitForFunction(() => Boolean(
    window.__waterNetworkMap?.getLayer("workbench-value-label-pipes")
  ));
  await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();

  const panel = page.getByTestId("map-dev-panel");
  const apply = panel.getByRole("button", { name: "应用标注", exact: true });
  await apply.click();
  await panel.getByLabel("业务图层组").selectOption("junctions");
  await apply.click();

  await expect.poll(() => page.evaluate(() => ({
    pipes: window.__waterNetworkMap?.getLayoutProperty(
      "workbench-value-label-pipes",
      "visibility"
    ),
    junctions: window.__waterNetworkMap?.getLayoutProperty(
      "workbench-value-label-junctions",
      "visibility"
    )
  }))).toEqual({ pipes: "visible", junctions: "visible" });

  await panel.getByRole("button", { name: "清除全部标注" }).click();
  await expect.poll(() => page.evaluate(() => ({
    pipes: window.__waterNetworkMap?.getLayoutProperty(
      "workbench-value-label-pipes",
      "visibility"
    ),
    junctions: window.__waterNetworkMap?.getLayoutProperty(
      "workbench-value-label-junctions",
      "visibility"
    )
  }))).toEqual({ pipes: "none", junctions: "none" });
});