import { describe, it, expect, afterEach } from "vitest";
import { render, screen, cleanup } from "@testing-library/react";
import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
import { EditorCanvas } from "@/app/editor/EditorCanvas";

// 에디터 캔버스/페이지 배경색 적용 규칙에 대한 최소 TDD
// - canvasBgColorHex: 실제 캔버스 영역(editor-canvas-inner)의 배경색
// - bodyBgColorHex: 에디터 내 페이지 배경(캔버스 바깥 래퍼)의 배경색

afterEach(() => {
  cleanup();
});

describe("EditorCanvas - 캔버스/페이지 배경색", () => {
  const baseProjectConfig: ProjectConfig = {
    title: "배경 테스트",
    slug: "bg-test",
    canvasPreset: "full",
    canvasBgColorHex: "#111111",
    bodyBgColorHex: "#222222",
  };

  const baseProps = {
    blocks: [] as Block[],
    rootBlocks: [] as Block[],
    selectedBlockId: null as string | null,
    editingBlockId: null as string | null,
    editingText: "",
    activeDragId: null as string | null,
    sensors: null as any,
    onCanvasEmptyClick: () => {},
    renderBlocks: () => null as any,
    handleDragStart: () => {},
    handleDragEnd: () => {},
    handleDragCancel: () => {},
    projectConfig: baseProjectConfig,
  };

  it("canvasBgColorHex 는 editor-canvas-inner 배경색에 적용되어야 한다", () => {
    render(<EditorCanvas {...baseProps} />);

    const inner = screen.getByTestId("editor-canvas-inner") as HTMLElement;

    expect(inner.style.backgroundColor).toBe("rgb(17, 17, 17)");
  });

  it("bodyBgColorHex 는 editor-canvas 바깥 래퍼(editor-canvas)의 배경색에 적용되어야 한다", () => {
    const { container } = render(<EditorCanvas {...baseProps} />);

    const outer = container.querySelector('[data-testid="editor-canvas"]') as HTMLElement | null;

    expect(outer).not.toBeNull();
    expect(outer!.style.backgroundColor).toBe("rgb(34, 34, 34)");
  });

  it("canvasPreset / canvasWidthPx 에 따라 editor-canvas-inner 의 maxWidth 가 설정되어야 한다", () => {
    const renderWithConfig = (partial: Partial<ProjectConfig>) => {
      const projectConfig = { ...baseProjectConfig, ...partial } as ProjectConfig;
      const { getByTestId, unmount } = render(<EditorCanvas {...baseProps} projectConfig={projectConfig} />);
      const inner = getByTestId("editor-canvas-inner") as HTMLElement;
      const maxWidth = inner.style.maxWidth;
      unmount();
      return maxWidth;
    };

    expect(renderWithConfig({ canvasPreset: "mobile", canvasWidthPx: 390 })).toBe("390px");
    expect(renderWithConfig({ canvasPreset: "tablet", canvasWidthPx: 768 })).toBe("768px");
    expect(renderWithConfig({ canvasPreset: "desktop", canvasWidthPx: 1200 })).toBe("1200px");

    // full 프리셋에서 canvasWidthPx 가 없으면 maxWidth 는 비워져 있어야 한다.
    expect(renderWithConfig({ canvasPreset: "full", canvasWidthPx: undefined })).toBe("");

    // custom 프리셋에서는 canvasWidthPx 값이 그대로 사용된다.
    expect(renderWithConfig({ canvasPreset: "custom", canvasWidthPx: 1024 })).toBe("1024px");
  });
});