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

// PublicPageRenderer 텍스트 블록 스타일 TDD
// - computeTextPublicTokens 결과가 실제 프리뷰 렌더링에 올바르게 반영되는지 검증한다.

describe("PublicPageRenderer - 텍스트 블록 스타일", () => {
  afterEach(() => {
    cleanup();
  });

  const makeTextBlock = (override: Partial<TextBlockProps> = {}): Block => {
    const base: TextBlockProps = {
      text: "퍼블릭 텍스트 스타일 테스트",
      align: "left",
      size: "base",
    } as TextBlockProps;

    return {
      id: "text_1",
      type: "text",
      props: { ...base, ...override },
    } as any;
  };

  it("기본 텍스트 블록은 text-left / text-base 및 기본 색상으로 렌더되어야 한다", () => {
    const blocks: Block[] = [makeTextBlock()];

    render(<PublicPageRenderer blocks={blocks} />);

    const el = screen.getByText("퍼블릭 텍스트 스타일 테스트") as HTMLParagraphElement;

    expect(el.className).toContain("text-left");
    expect(el.className).toContain("text-base");
    // 기본 색상은 Tailwind text-slate-50 클래스로 고정되어 있다.
    expect(el.className).toContain("text-slate-50");
  });

  it("fontSizeMode=custom, fontSizeCustom, colorCustom, backgroundColorCustom 이 설정되면 스타일이 인라인으로 반영되어야 한다", () => {
    const blocks: Block[] = [
      makeTextBlock({
        align: "center",
        fontSizeMode: "custom",
        fontSizeCustom: "24px",
        colorCustom: "#ff0000",
        backgroundColorCustom: "#123456",
      }),
    ];

    render(<PublicPageRenderer blocks={blocks} />);

    const el = screen.getByText("퍼블릭 텍스트 스타일 테스트") as HTMLParagraphElement;

    // 정렬 클래스
    expect(el.className).toContain("text-center");
    // 커스텀 폰트 크기: sizeClass 는 비워지고, 인라인 스타일로 설정된다.
    expect(el.style.fontSize).toBe("1.5em");
    // 커스텀 색상/배경색
    expect(el.style.color).toBe("rgb(255, 0, 0)");
    expect(el.style.backgroundColor).toBe("rgb(18, 52, 86)");
  });
});