import { expect, test } from "@playwright/test";
import { mockInvestigationPresentation } from "./support/mock-investigation-presentation";

for (const width of [1440, 1024]) {
  test(`batch feature location highlights all matches and reports missing IDs at ${width}px`, async ({ page }) => {
    await page.setViewportSize({ width, height: 900 });
    await mockInvestigationPresentation(page, []);
    const queries: string[] = [];
    await page.route("https://workbench-map.invalid/**/ows?**", (route) => {
      const filter = new URL(route.request().url()).searchParams.get("cql_filter");
      if (!filter) return route.fallback();
      queries.push(filter);
      const features = [
        { type: "Feature", properties: { id: "P-1" }, geometry: { type: "LineString", coordinates: [[121.4, 31.05], [121.42, 31.06]] } },
        { type: "Feature", properties: { id: "P-2" }, geometry: { type: "LineString", coordinates: [[121.5, 31.12], [121.52, 31.14]] } }
      ].filter((feature) => filter.includes(`'${feature.properties.id}'`));
      return route.fulfill({ json: { type: "FeatureCollection", features } });
    });
    await page.goto("/", { waitUntil: "domcontentloaded" });
    await page.waitForFunction(() => Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")));
    await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
    const panel = page.getByTestId("map-dev-panel");
    await panel.getByRole("tab", { name: "地图调试", exact: true }).click();
    const ids = panel.getByRole("textbox", { name: "要素 ID（可多个）" });
    await ids.fill("P-1，P-2\nP-1 missing");
    await panel.getByRole("button", { name: "定位并高亮", exact: true }).click();
    await expect(panel.getByRole("status").filter({ hasText: "本次命中" })).toHaveText("本次命中 2 个，未找到 1 个：missing");
    expect(queries).toEqual(['"id" IN (\'P-1\',\'P-2\',\'missing\')']);
    const highlights = () => page.evaluate(() => ["P-1", "P-2"].map((id) =>
      window.__waterNetworkMap?.getFeatureState({ source: "pipes", sourceLayer: "pipes", id }).highlighted ?? false
    ));
    await expect.poll(highlights).toEqual([true, true]);
    await expect.poll(() => page.evaluate(() => {
      const bounds = window.__waterNetworkMap?.getBounds();
      return bounds?.contains([121.4, 31.05]) && bounds.contains([121.52, 31.14]);
    })).toBe(true);
    await expect(panel).toHaveJSProperty("scrollWidth", await panel.evaluate((element) => element.clientWidth));
    await page.screenshot({ path: `/tmp/map-multi-feature-location-${width}.png` });

    await panel.getByRole("button", { name: "清除高亮", exact: true }).click();
    await expect.poll(highlights).toEqual([false, false]);
    await expect(panel.getByRole("status").filter({ hasText: "本次命中" })).toHaveCount(0);
    await panel.getByRole("button", { name: "缩放到要素", exact: true }).click();
    await expect(panel.getByRole("status").filter({ hasText: "本次命中" })).toContainText("本次命中 2 个");
    await expect.poll(highlights).toEqual([false, false]);
    await panel.getByRole("button", { name: "仅高亮", exact: true }).click();
    await expect.poll(highlights).toEqual([true, true]);

    await ids.fill("missing");
    await panel.getByRole("button", { name: "定位并高亮", exact: true }).click();
    await expect(panel.getByRole("alert")).toContainText("目标要素不存在");
    await expect(panel.getByRole("status").filter({ hasText: "本次命中" })).toHaveText("本次命中 0 个，未找到 1 个：missing");
    await expect.poll(highlights).toEqual([true, true]);
    await panel.getByRole("button", { name: "清除高亮", exact: true }).click();
    await expect.poll(highlights).toEqual([false, false]);
    await ids.fill(" ");
    await expect(panel.getByRole("button", { name: "定位并高亮", exact: true })).toBeDisabled();
    await page.keyboard.press("Escape");
    await expect(panel).toBeHidden();
  });
}