import { expect, test } from "@playwright/test";
import { normalizeFlowBoardSnapshot } from "@/app/api/flow-board/_utils";

test.describe("flow board snapshot compatibility", () => {
  test("upgrades a legacy single-canvas snapshot without losing content", () => {
    const legacyChild = { id: "root", type: "mindmap" };
    const snapshot = normalizeFlowBoardSnapshot({
      children: [legacyChild],
      viewport: { zoom: 1.2 },
      theme: { themeColorMode: "colorful" },
      updatedAt: "2026-09-18T00:00:00.000Z",
    });

    expect(snapshot.version).toBe(2);
    expect(snapshot.activeSheetId).toBe("sheet-1");
    expect(snapshot.children).toEqual([legacyChild]);
    expect(snapshot.sheets).toEqual([
      {
        id: "sheet-1",
        title: "画布 1",
        children: [legacyChild],
        viewport: { zoom: 1.2 },
        theme: { themeColorMode: "colorful" },
        canvas: {
          backgroundColor: "#f7f8fb",
          gridColor: "#d8dde8",
          gridEnabled: false,
          gridSize: 24,
        },
      },
    ]);
  });

  test("mirrors the selected sheet into the legacy top-level fields", () => {
    const snapshot = normalizeFlowBoardSnapshot({
      activeSheetId: "research",
      sheets: [
        {
          id: "plan",
          title: "计划",
          children: [{ id: "plan-root" }],
          canvas: {
            backgroundColor: "#ffffff",
            gridColor: "#cad2df",
            gridEnabled: true,
            gridSize: 32,
          },
        },
        {
          id: "research",
          title: "调研",
          children: [{ id: "research-root" }],
          viewport: { zoom: 0.8 },
          canvas: {
            backgroundColor: "#fff8e7",
            gridColor: "#d8dde8",
            gridEnabled: false,
            gridSize: 24,
          },
        },
      ],
    });

    expect(snapshot.activeSheetId).toBe("research");
    expect(snapshot.children).toEqual([{ id: "research-root" }]);
    expect(snapshot.viewport).toEqual({ zoom: 0.8 });
    expect(snapshot.canvas).toEqual({
      backgroundColor: "#fff8e7",
      gridColor: "#d8dde8",
      gridEnabled: false,
      gridSize: 24,
    });
  });

  test("updates only the active sheet while preserving the other canvases", () => {
    const snapshot = normalizeFlowBoardSnapshot({
      activeSheetId: "research",
      children: [{ id: "research-root-updated" }],
      sheets: [
        {
          id: "plan",
          title: "计划",
          children: [{ id: "plan-root" }],
        },
        {
          id: "research",
          title: "调研",
          children: [{ id: "research-root-old" }],
        },
      ],
    });

    expect(snapshot.sheets).toEqual([
      {
        id: "plan",
        title: "计划",
        children: [{ id: "plan-root" }],
        viewport: null,
        theme: null,
        canvas: {
          backgroundColor: "#f7f8fb",
          gridColor: "#d8dde8",
          gridEnabled: false,
          gridSize: 24,
        },
      },
      {
        id: "research",
        title: "调研",
        children: [{ id: "research-root-updated" }],
        viewport: null,
        theme: null,
        canvas: {
          backgroundColor: "#f7f8fb",
          gridColor: "#d8dde8",
          gridEnabled: false,
          gridSize: 24,
        },
      },
    ]);
  });

  test("keeps canvas settings isolated to the active sheet", () => {
    const snapshot = normalizeFlowBoardSnapshot({
      activeSheetId: "research",
      canvas: {
        backgroundColor: "#eef8f1",
        gridColor: "#aabbcc",
        gridEnabled: true,
        gridSize: 40,
      },
      sheets: [
        {
          id: "plan",
          title: "计划",
          children: [],
          canvas: {
            backgroundColor: "#ffffff",
            gridColor: "#d8dde8",
            gridEnabled: false,
            gridSize: 24,
          },
        },
        {
          id: "research",
          title: "调研",
          children: [],
        },
      ],
    });

    expect(snapshot.sheets?.[0]?.canvas).toEqual({
      backgroundColor: "#ffffff",
      gridColor: "#d8dde8",
      gridEnabled: false,
      gridSize: 24,
    });
    expect(snapshot.sheets?.[1]?.canvas).toEqual(snapshot.canvas);
  });
});