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

test("lists Agent overlays in the layer panel and synchronizes visibility and cleanup", async ({ page }, testInfo) => {
  test.setTimeout(60_000);
  const task = investigationFixture(1, "覆盖面图层核验");
  const mock = await mockInvestigationPresentation(page, [task]);
  await page.emulateMedia({ reducedMotion: "reduce" });
  await selectInvestigation(page, task.title);
  await expect.poll(() => page.evaluate(() => Boolean(window.__waterNetworkMap?.getLayer("simulation-backend-analysis-fill")))).toBe(true);
  expect(await page.evaluate(() => Boolean(window.__waterNetworkMap?.getSource("simulation-impact-area")))).toBe(false);
  const layerTool = page.getByRole("button", { name: /图层：管理地图图层/ });
  await layerTool.click();
  const panel = page.getByRole("region", { name: "图层", exact: true });
  await expect(panel.getByText("模拟结果", { exact: true })).toHaveCount(0);
  await expect(panel.getByText("分析覆盖", { exact: true })).toHaveCount(0);

  const command = { action: "set_overlay", overlay_id: "affected-area", title: "爆管影响范围", mode: "geometry", evidence_id: "test:area", data: {
    type: "FeatureCollection", features: [{ type: "Feature", properties: {}, geometry: {
      type: "Polygon", coordinates: [[[121.48, 31.1], [121.49, 31.1], [121.49, 31.11], [121.48, 31.1]]]
    } }]
  } };
  await mock.emit(task, command);
  const row = panel.getByRole("button", { name: /^爆管影响范围，/ });
  await expect(row).toBeVisible();
  await expect(row).toHaveAttribute("aria-pressed", "true");
  const visibility = () => page.evaluate(() => window.__waterNetworkMap?.getLayoutProperty("investigation-presentation-overlay-fill", "visibility"));
  await expect.poll(visibility).toBe("visible");
  await row.click();
  await expect(row).toHaveAttribute("aria-pressed", "false");
  await expect.poll(visibility).toBe("none");
  await layerTool.click();
  const display = page.getByLabel("调查实时展示", { exact: true });
  await display.getByRole("button", { name: "显示覆盖层", exact: true }).click();
  await expect.poll(visibility).toBe("visible");
  await layerTool.click();
  await expect(row).toHaveAttribute("aria-pressed", "true");
  await page.screenshot({ path: testInfo.outputPath("agent-overlay-layer-desktop.png"), animations: "disabled" });

  await page.setViewportSize({ width: 390, height: 844 });
  await row.scrollIntoViewIfNeeded();
  await expect(row).toBeVisible();
  await row.click();
  await expect.poll(visibility).toBe("none");
  await row.click();
  await expect.poll(visibility).toBe("visible");
  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
  await page.screenshot({ path: testInfo.outputPath("agent-overlay-layer-mobile.png"), animations: "disabled" });

  await mock.emit(task, { action: "clear_overlay", overlay_id: "affected-area" });
  await expect(row).toHaveCount(0);
  await expect(panel.getByText("分析覆盖", { exact: true })).toHaveCount(0);
  expect(mock.mutations).toEqual([]);
});