import { describe, expect, it } from "vitest";

import {
  CanvasEditHistory,
  createEditorCanvasState,
  defaultBackgroundAdjustments,
  deserializeFabricCanvas,
  switchBackground,
  updateBackgroundAdjustments,
} from "../../apps/web/src/editor-canvas.js";

const element = {
  colors: ["#111111", "#222222", "#333333", "#444444", "#555555"],
  created_at: "2026-08-02T18:00:00.000Z",
  element_id: "00000000-0000-4000-8000-000000000001",
  opacity: 1,
  position: { x: 0.25, y: 0.35 },
  resource_version: "palette-v1",
  rotation: 14,
  scale: { x: 1.2, y: 0.8 },
  template_or_asset_id: "palette-fixture",
  type: "color_card" as const,
  z_index: 0,
};

describe("TDD-WP4-BG-001/002 canvas boundary", () => {
  it("switches background without moving overlays, resets processing, and re-extracts palette", () => {
    const initial = createEditorCanvasState({ assetId: "00000000-0000-4000-8000-000000000010", ratio: "3:4" });
    const withOverlay = { ...initial, background: { ...initial.background, adjustments: { ...initial.background.adjustments, brightness: 42, filter: "mono" } }, elements: [element] };
    const nextPalette = ["#abcdef", "#123456", "#fedcba", "#654321", "#a1b2c3"];
    const switched = switchBackground(withOverlay, "00000000-0000-4000-8000-000000000011", nextPalette);
    expect(switched.background).toEqual({ asset_id: "00000000-0000-4000-8000-000000000011", adjustments: defaultBackgroundAdjustments() });
    expect(switched.elements[0]).toMatchObject({ position: element.position, scale: element.scale, rotation: element.rotation, colors: nextPalette });
  });

  it("keeps preview changes immutable and allows one committed history step", () => {
    const initial = createEditorCanvasState({ assetId: "00000000-0000-4000-8000-000000000010", ratio: "1:1" });
    const history = new CanvasEditHistory(initial);
    const preview = updateBackgroundAdjustments(initial, { brightness: 25, contrast: -10, fit: "fit" });
    expect(initial.background.adjustments).toEqual(defaultBackgroundAdjustments());
    expect(preview.background.adjustments).toMatchObject({ brightness: 25, contrast: -10, fit: "fit" });
    history.commit(preview);
    expect(history.canUndo).toBe(true);
    expect(history.undo()).toEqual(initial);
    expect(history.canRedo).toBe(true);
    expect(history.redo()).toEqual(preview);
  });

  it("strips Fabric-private fields at the persistence boundary", () => {
    const state = createEditorCanvasState({ assetId: "00000000-0000-4000-8000-000000000010", ratio: "9:16" });
    const decoded = deserializeFabricCanvas({ ...state, _objects: [{ type: "fabric-private" }], viewportTransform: [1, 0, 0, 1, 0, 0] });
    expect(decoded).toEqual(state);
    expect(deserializeFabricCanvas({ ...state, elements: [{ ...element, _cacheCanvas: {} }] })).toBeUndefined();
  });
});