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

for (const width of [1280, 375, 320]) {
  test(`SCADA 新告警进入通知中心并可从弹窗打开调查 ${width}`, async ({ page }, testInfo) => {
    await page.setViewportSize({ width, height: 900 });
    const task = investigationFixture(1, "SCADA 通知关联调查");
    task.workflow = "scada_anomaly";
    task.source = { kind: "external_system", external_id: "scada:test", external_revision: 1, event_kind: "scada_anomaly",
      replay_context: { replay_id: "97000000-0000-4000-8000-000000000001", knowledge_cutoff: task.created_at, batch_sequence: 1 } };
    await mockInvestigationPresentation(page, [task]);
    const alert = {
      id: "scada-incident-1", condition_id: `operational-task:${task.task_id}`,
      source: { kind: "scada_replay", replay_id: "replay-1", rule_id: "scada_diagnosis", batch_sequence: 1 },
      title: "SCADA 指标异常", description: "已启动调查，详细诊断见调查报告。",
      occurred_at: "2026-07-16T00:00:00Z", severity: "warning"
    };
    let alerts: typeof alert[] = [];
    let cursor = 10;
    await page.route("https://tjwater-api.invalid/api/v1/workbench/sync-snapshot", (route) => route.fulfill({ json: {
      schema: "workbench-sync-snapshot@1", event_cursor: cursor, generated_at: task.created_at,
      runtime: { availability: "not_configured", source: "none", scenario_availability: "not_configured",
        artifact_availability: "not_configured", schedule_availability: "not_configured", work_order_availability: "not_configured",
        alert_availability: "ready", generated_at: task.created_at, conditions: [], alerts, scenarios: [], latest_analysis: null, work_orders: [] },
      tasks: [Object.fromEntries(Object.entries(task).filter(([key]) =>
        !["latest_plan", "latest_report", "latest_progress", "evidence", "actions", "access_requests", "work_order_snapshot", "permissions", "questions"].includes(key)))],
      notifications: []
    } }));
    const emit = async (topic = "workbench.alert.changed") => {
      await page.evaluate((event) => {
        (window as unknown as { emitInvestigationTestEvent: (event: unknown) => void }).emitInvestigationTestEvent(event);
      }, { schema: "workbench-event@1", event_seq: ++cursor,
        event_id: `96000000-0000-4000-8000-${String(cursor).padStart(12, "0")}`, project_id: task.project_id,
        topic, aggregate_type: topic === "workbench.alert.changed" ? "task_alert" : "operational_task",
        aggregate_id: topic === "workbench.alert.changed" ? alert.id : task.task_id,
        aggregate_revision: cursor - 10, occurred_at: task.created_at, metadata: {} });
    };
    const initialSnapshot = page.waitForResponse("https://tjwater-api.invalid/api/v1/workbench/sync-snapshot");
    await page.goto("/", { waitUntil: "domcontentloaded" });
    expect((await (await initialSnapshot).json()).runtime.alerts).toEqual([]);
    await page.waitForFunction(() => Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")));
    const menu = page.getByRole("button", { name: /查看待办与告警/ });
    await expect(menu).toHaveAccessibleName("查看待办与告警，当前 0 条待处理事项");
    // Open and close the panel first: announcements belong to the workbench, not its tab.
    await page.getByRole("button", { name: "外围系统", exact: true }).click();
    await page.getByRole("button", { name: "关闭外围系统" }).click();
    alerts = [alert];
    await emit();
    const atmosphere = page.getByTestId("scada-alert-atmosphere");
    await expect(atmosphere).toBeVisible();
    await expect(atmosphere).toHaveAttribute("data-preview", "false");
    await expect(atmosphere).toContainText("爆管风险调查中");
    const popup = page.locator("[data-sonner-toast]").filter({ hasText: alert.title });
    await expect(popup).toBeVisible();
    await expect(popup).toHaveAttribute("data-y-position", "top");
    await expect(popup).toHaveAttribute("data-x-position", "center");
    await expect(menu).toHaveAccessibleName("查看待办与告警，当前 1 条待处理事项");
    await menu.click();
    await expect(page.getByRole("menuitem", { name: `打开通知：${alert.title}` })).toBeVisible();
    await page.keyboard.press("Escape");
    await page.getByRole("button", { name: "外围系统", exact: true }).click();
    const action = popup.getByRole("button", { name: "查看调查" });
    const summary = popup.locator("[data-slot=map-notice-summary]");
    const actionRow = popup.locator("[data-slot=map-notice-actions]");
    await expect(actionRow).toBeVisible();
    await expect(action).toHaveCSS("height", "36px");
    const layout = await popup.evaluate((element) => {
      const summary = element.querySelector("[data-slot=map-notice-summary]")!.getBoundingClientRect();
      const row = element.querySelector("[data-slot=map-notice-actions]")!.getBoundingClientRect();
      const action = element.querySelector("[data-slot=map-notice-actions] button")!.getBoundingClientRect();
      const close = element.querySelector('button[data-cancel="true"]')!.getBoundingClientRect();
      return { gap: row.top - summary.bottom, rightInset: row.right - action.right,
        closeOverlaps: close.bottom > action.top && close.left < action.right,
        overflows: element.scrollWidth > element.clientWidth };
    });
    expect(layout).toEqual({ gap: 0, rightInset: 12, closeOverlaps: false, overflows: false });
    await expect(summary).toContainText(alert.description);
    await expect.poll(() => action.evaluate((element) => {
      const box = element.getBoundingClientRect();
      return element.contains(document.elementFromPoint(box.x + box.width / 2, box.y + box.height / 2));
    })).toBe(true);
    await page.evaluate(() => document.fonts.ready);
    await expect(popup).toHaveCSS("opacity", "1");
    expect(await popup.evaluate((element) => getComputedStyle(element).fontFamily)).toBe(
      await page.evaluate(() => getComputedStyle(document.body).fontFamily)
    );
    await testInfo.attach(`scada-notification-${width}`, {
      body: await page.screenshot({ path: testInfo.outputPath("notification.png") }), contentType: "image/png"
    });
    await action.click();
    await expect(page.getByRole("complementary", { name: "外围系统" })).toHaveCount(0);
    await expect(page.getByRole("region", { name: "工况任务", exact: true })).toBeVisible();
    await expect(page.getByRole("region", { name: "工况任务", exact: true }).getByRole("heading", { name: task.title })).toBeVisible();
    await expect(popup).toBeVisible();
    await menu.click();
    const alertRow = page.locator(`[data-alert-id="${alert.id}"]`);
    const titleBox = await alertRow.locator("p").first().boundingBox();
    const rowBox = await alertRow.boundingBox();
    await alertRow.click({ position: { x: titleBox!.x - rowBox!.x + titleBox!.width / 2,
      y: titleBox!.y - rowBox!.y + titleBox!.height / 2 } });
    await expect(page.getByRole("menu")).toHaveCount(0);
    await expect(page.getByRole("region", { name: "工况任务", exact: true }).getByRole("heading", { name: task.title })).toBeVisible();
    await emit();
    await expect(popup).toBeVisible();
    alerts = [];
    await emit();
    await expect(menu).toHaveAccessibleName("查看待办与告警，当前 0 条待处理事项");
    await expect(atmosphere).toBeVisible();
    task.lifecycle_status = "completed";
    task.status = "completed";
    task.active_run = null;
    task.revision++;
    await emit("operational.task.changed");
    await expect(atmosphere).toHaveCount(0);
    await expect(popup).toBeVisible();
    await popup.getByRole("button", { name: "关闭通知" }).click();
    await expect(popup).toHaveCount(0);
  });
}