import { expect, test, type Page } from "@playwright/test";

import { prepareApp, resultSnapshot } from "./fixtures";

const chartWindowSnapshot = {
  ...resultSnapshot,
  id: "e2e-pending-chart-windows",
  result: {
    ...resultSnapshot.result,
    variables: [
      ...resultSnapshot.result.variables,
      {
        key: "generic_sensor_1.pressure",
        componentId: "generic_sensor_1",
        componentType: "generic_sensor",
        scope: "component",
        portName: null,
        name: "pressure",
        label: "压力",
        quantity: "pressure",
        unit: "Pa",
        category: "state",
        order: 2,
      },
    ],
    final: {
      ...resultSnapshot.result.final,
      "generic_sensor_1.pressure": 120000,
    },
    series: {
      ...resultSnapshot.result.series,
      "generic_sensor_1.pressure": [100000, 110000, 120000],
    },
  },
};

async function openResults(page: Page) {
  await page.getByRole("tab", { name: "结果", exact: true }).click();
  await expect(page.locator(".results-chart-workspace")).toBeVisible();
}

test.beforeEach(async ({ page }) => {
  await prepareApp(page);
  await page.addInitScript((snapshot) => {
    window.sessionStorage.setItem(
      "system-simulation-flow:latest-result",
      JSON.stringify(snapshot),
    );
  }, chartWindowSnapshot);
});

test("组合曲线窗口先创建为空窗，并在删除最后一条曲线后恢复待定", async ({
  page,
}) => {
  await page.goto("/");
  await openResults(page);

  await page
    .getByRole("button", { name: "新建同单位多曲线对比窗口", exact: true })
    .click();
  let sameUnitWindow = page.locator(
    '.result-chart-window[data-chart-kind="multi"]',
  );
  await expect(sameUnitWindow).toHaveCount(1);
  await expect(sameUnitWindow).toHaveAttribute("data-pending", "true");
  await expect(sameUnitWindow).toContainText("等待第一条曲线");

  const valueVariable = page
    .locator(".results-variable-list button")
    .filter({ hasText: "数值" })
    .first();
  await valueVariable.dragTo(sameUnitWindow);
  await expect(sameUnitWindow).toHaveAttribute("data-pending", "false");
  await expect(sameUnitWindow).toContainText("1/1 条显示");
  await expect(sameUnitWindow).toContainText("无量纲");

  await sameUnitWindow
    .getByRole("button", {
      name: "管理多曲线窗口中的曲线",
      exact: true,
    })
    .click();
  await sameUnitWindow.locator(".result-chart-multi-menu-row .remove").click();
  await expect(sameUnitWindow).toHaveCount(1);
  await expect(sameUnitWindow).toHaveAttribute("data-pending", "true");
  await expect(sameUnitWindow).toContainText("等待第一条曲线");

  await page.reload();
  await openResults(page);
  sameUnitWindow = page.locator(
    '.result-chart-window[data-chart-kind="multi"]',
  );
  await expect(sameUnitWindow).toHaveCount(1);
  await expect(sameUnitWindow).toHaveAttribute("data-pending", "true");

  await page
    .getByRole("button", { name: "新建异单位上下对比窗口", exact: true })
    .click();
  const mixedWindow = page.locator(
    '.result-chart-window[data-chart-kind="mixed"]',
  );
  await expect(mixedWindow).toHaveCount(1);
  await expect(mixedWindow).toHaveAttribute("data-pending", "true");

  const pressureVariable = page
    .locator(".results-variable-list button")
    .filter({ hasText: "压力" })
    .first();
  await pressureVariable.dragTo(mixedWindow);
  await expect(mixedWindow).toHaveAttribute("data-pending", "false");
  await expect(mixedWindow).toContainText("Pa");

  await mixedWindow
    .getByRole("button", {
      name: "管理多曲线窗口中的曲线",
      exact: true,
    })
    .click();
  await mixedWindow.locator(".result-chart-multi-menu-row .remove").click();
  await expect(mixedWindow).toHaveCount(1);
  await expect(mixedWindow).toHaveAttribute("data-pending", "true");
});

test("a pending window recovered from stale variable keys accepts a new first curve", async ({
  page,
}) => {
  await page.addInitScript((snapshotId) => {
    window.sessionStorage.setItem(
      `system-simulation-flow:result-layout:${snapshotId}`,
      JSON.stringify([
        {
          id: "chart-1",
          kind: "multi",
          variableKey: "removed.variable",
          variableKeys: ["removed.variable"],
          hiddenVariableKeys: [],
          variableUnits: { "removed.variable": "Pa" },
          x: 40,
          y: 40,
          width: 620,
          height: 330,
          unit: "Pa",
          cursorEnabled: false,
          zIndex: 1,
        },
      ]),
    );
  }, chartWindowSnapshot.id);

  await page.goto("/");
  await openResults(page);

  const pendingWindow = page.locator(
    '.result-chart-window[data-chart-kind="multi"]',
  );
  await expect(pendingWindow).toHaveAttribute("data-pending", "true");

  await page.locator(".results-variable-list button").first().dragTo(pendingWindow);
  await expect(pendingWindow).toHaveAttribute("data-pending", "false");
});