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

test("Dev Panel opens on desktop, owns the right workspace, and closes with Escape", async ({ page }) => {
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.waitForFunction(() => Boolean(window.__waterNetworkMap));
  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(page.getByRole("navigation", { name: "地图工具" })).toBeHidden();
  await expect(panel.getByRole("button", { name: "定位并高亮" })).toBeVisible();
  await expect(panel.getByRole("button", { name: "重置全部" })).toBeVisible();

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