import { expect, test } from "@playwright/test";
import {
  expectAllNodesInsideCanvas,
  prepareApp,
  resultSnapshot,
  wideProject,
} from "./fixtures";

test("加载本地工程后自动适配建模画布", async ({ page }) => {
  await prepareApp(page);
  await page.addInitScript((project) => {
    window.localStorage.setItem(
      "system-simulation-flow:project:demo-system",
      JSON.stringify(project),
    );
  }, wideProject);

  await page.goto("/");
  await page.getByRole("button", { name: "加载工程" }).click();

  await expectAllNodesInsideCanvas(page, ".flow-canvas");
  const consolePanel = page.getByRole("complementary", {
    name: "仿真控制台",
    exact: true,
  });
  await expect(consolePanel).not.toContainText("工程已加载");
  await page.getByRole("button", { name: "展开仿真控制台" }).click();
  await expect(consolePanel).toContainText("工程已加载");
});

test("恢复自动保存工程后自动适配建模画布", async ({ page }) => {
  await prepareApp(page);
  await page.addInitScript((project) => {
    window.localStorage.setItem(
      "system-simulation-flow:autosave",
      JSON.stringify(project),
    );
  }, wideProject);

  await page.goto("/");
  await page.getByRole("button", { name: "恢复" }).click();

  await expectAllNodesInsideCanvas(page, ".flow-canvas");
  const consolePanel = page.getByRole("complementary", {
    name: "仿真控制台",
    exact: true,
  });
  await expect(consolePanel).not.toContainText("已恢复上次自动保存的工程");
  await page.getByRole("button", { name: "展开仿真控制台" }).click();
  await expect(consolePanel).toContainText("已恢复上次自动保存的工程");
});

test("切换到结果页时自动适配只读系统图", async ({ page }) => {
  await prepareApp(page);
  await page.addInitScript(({ project, snapshot }) => {
    window.sessionStorage.setItem(
      "system-simulation-flow:latest-result",
      JSON.stringify(snapshot),
    );
    window.localStorage.setItem(
      "system-simulation-flow:project:demo-system",
      JSON.stringify(project),
    );
  }, { project: wideProject, snapshot: resultSnapshot });

  await page.goto("/");
  await page.getByRole("button", { name: "加载工程" }).click();
  const freeModelingHandle = page.locator(
    '.flow-canvas .react-flow__node[data-id="generic_sensor_1"] .port-handle[data-port-name="port_a"]',
  );
  await freeModelingHandle.dispatchEvent("click");
  await expect(freeModelingHandle).toHaveAttribute(
    "data-connection-state",
    "origin",
  );
  await page.getByRole("tab", { name: /^结果/ }).click();
  await expectAllNodesInsideCanvas(page, ".results-system-canvas");
  await expect(
    page.getByRole("complementary", { name: "仿真控制台", exact: true }),
  ).toHaveCount(0);

  await page.getByRole("tab", { name: "建模" }).click();
  await expect(freeModelingHandle).toHaveAttribute(
    "data-connection-state",
    "idle",
  );
  await expect(
    page.getByRole("complementary", { name: "仿真控制台", exact: true }),
  ).toBeVisible();
  await page.getByRole("tab", { name: /^结果/ }).click();
  await expectAllNodesInsideCanvas(page, ".results-system-canvas");
  await expect(
    page.getByRole("complementary", { name: "仿真控制台", exact: true }),
  ).toHaveCount(0);
  await expect(page.locator(".results-system-canvas .react-flow__edge")).toHaveCount(
    wideProject.edges.length,
  );
  const connectedResultHandles = page.locator(
    '.results-system-canvas .port-handle[data-connected="true"]',
  );
  const idleResultHandles = page.locator(
    '.results-system-canvas .port-handle[data-connected="false"]',
  );
  await expect(connectedResultHandles).toHaveCount(
    wideProject.edges.length * 2,
  );
  await expect(idleResultHandles).toHaveCount(2);
  await expect(connectedResultHandles.first()).toHaveCSS("opacity", "0");
});