import { expect, test } from "@playwright/test";
import { mockScadaApi } from "./support/mock-scada-api";

test("loads SCADA from the backend API and aligns map features by device_id", async ({ page }) => {
  await page.route("**/runtime-config.js", async (route) => {
    await route.fulfill({
      contentType: "application/javascript",
      body: `globalThis.__TJWATER_CONFIG__ = {
        TJWATER_AUTH_MODE: "disabled",
        TJWATER_MAPBOX_ACCESS_TOKEN: "",
        TJWATER_MAP_URL: "https://scada-map.invalid/geoserver",
        TJWATER_GEOSERVER_WORKSPACE: "tjwater_next",
        TJWATER_SERVER_API_BASE_URL: "https://tjwater-api.invalid",
        TJWATER_AGENT_API_BASE_URL: "http://127.0.0.1:8787",
        TJWATER_ENABLE_DEV_PANEL: "false",
        TJWATER_ENABLE_MSW: "false"
      };`
    });
  });
  await page.route("https://scada-map.invalid/**", async (route) => {
    await route.fulfill({ status: 204, body: "" });
  });
  await mockScadaApi(page, [{
    device_id: "SCADA-1",
    device_type: "pressure",
    node_id: "J-1",
    link_id: null,
    api_query_id: "query-1",
    transmission_mode: "realtime",
    transmission_frequency: "2s",
    reliability: 100,
    x: 1,
    y: 2,
    longitude: 121.5,
    latitude: 30.9
  }]);
  const deviceRequestPromise = page.waitForRequest((request) =>
    request.url().includes("/api/v1/scada-devices")
  );

  await page.goto("/", { waitUntil: "domcontentloaded" });

  const deviceRequest = await deviceRequestPromise;
  expect(deviceRequest.headers()["x-project-id"]).toBe("project-1");
  await expect.poll(async () => page.evaluate(() => {
    const map = globalThis.__waterNetworkMap;
    if (!map) return [];
    return map.querySourceFeatures("scada").map((feature) => ({
      id: String(feature.id),
      deviceId: String(feature.properties?.device_id)
    }));
  })).toContainEqual({ id: "SCADA-1", deviceId: "SCADA-1" });
});