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

// 폼 필드 스타일 TDD
// - formInput: 색상/패딩/너비/둥글기 스타일
// - formSelect: 색상/패딩/너비/둥글기 스타일
// - formCheckbox/formRadio: 옵션 컨테이너 색상/패딩/둥글기 스타일

function getFirstLabel(root: HTMLElement): HTMLLabelElement {
  const label = root.querySelector("label");
  if (!label) {
    throw new Error("label element not found");
  }
  return label as HTMLLabelElement;
}

describe("PublicPageRenderer - 폼 필드 스타일", () => {
  afterEach(() => {
    cleanup();
  });

  it("formInput 블록은 색상/패딩/너비/둥글기 스타일을 반영해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_input_styles",
        type: "formInput",
        props: {
          label: "이메일",
          formFieldName: "email",
          align: "center",
          widthMode: "fixed",
          widthPx: 320,
          paddingX: 16,
          paddingY: 8,
          textColorCustom: "#112233",
          fillColorCustom: "#123456",
          strokeColorCustom: "#ff0000",
          borderRadius: "lg",
        } as any,
      },
    ];

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

    const wrapper = getByTestId("preview-form-input-wrapper") as HTMLElement;
    const input = wrapper.querySelector('[data-testid="preview-form-input"]') as HTMLElement | null;
    expect(input).not.toBeNull();

    // 정렬
    expect((input as HTMLInputElement).style.textAlign).toBe("center");
    // width: 320px / 16 = 20em
    expect((input as HTMLInputElement).style.width).toBe("20em");
    // padding-inline/block: 16px/8px -> 1em / 0.5em
    expect((input as HTMLInputElement).style.paddingInline).toBe("1em");
    expect((input as HTMLInputElement).style.paddingBlock).toBe("0.5em");
    // 색상: hex -> rgb 변환
    expect((input as HTMLInputElement).style.color).toBe("rgb(17, 34, 51)");
    expect((input as HTMLInputElement).style.backgroundColor).toBe("rgb(18, 52, 86)");
    expect((input as HTMLInputElement).style.borderColor).toBe("rgb(255, 0, 0)");
    // borderRadius: lg -> 6px
    expect((input as HTMLInputElement).style.borderRadius).toBe("6px");
  });

  it("formInput 블록에서 inputType/email 과 formFieldName 은 type/name/placeholder 로 반영되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_input_email_attrs",
        type: "formInput",
        props: {
          label: "이메일",
          formFieldName: "email_field",
          inputType: "email",
          placeholder: "이메일 주소",
        } as any,
      },
    ];

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

    const input = getByLabelText("이메일") as HTMLInputElement;
    expect(input.type).toBe("email");
    expect(input.name).toBe("email_field");
    expect(input.placeholder).toBe("이메일 주소");
  });

  it("formInput 블록의 타이포그래피 커스텀 값은 em 단위 스타일로 반영되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_input_typography",
        type: "formInput",
        props: {
          label: "커스텀 타이포",
          formFieldName: "typo",
          fontSizeCustom: "24px",
          lineHeightCustom: "30px",
          letterSpacingCustom: "2px",
        } as any,
      },
    ];

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

    const wrapper = getByTestId("preview-form-input-wrapper") as HTMLElement;
    const input = wrapper.querySelector('[data-testid="preview-form-input"]') as HTMLInputElement | null;
    expect(input).not.toBeNull();

    expect(input!.style.fontSize).toBe("1.5em");
    expect(input!.style.lineHeight).toBe("1.875em");
    expect(input!.style.letterSpacing).toBe("0.125em");
  });

	it("formInput 기본 래퍼 클래스에는 text-slate-* 색상 클래스가 없어야 한다", () => {
		const blocks: Block[] = [
			{
				id: "form_input_neutral_wrapper",
				type: "formInput",
				props: {
					label: "이름",
					formFieldName: "name",
				} as any,
			},
		];

		const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
		const wrapper = getByTestId("preview-form-input-wrapper") as HTMLElement;
		// 기본 래퍼에는 text-slate-* 색상 클래스를 사용하지 않고, 텍스트 색상은 상위/브라우저 기본값을 따른다.
		expect(wrapper.className).not.toContain("text-slate-");
	});

  it("formInput 블록에서 라벨 표시 방식이 hidden 이면 sr-only 클래스로 시각적으로 숨겨야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_input_hidden_label",
        type: "formInput",
        props: {
          label: "숨김 라벨",
          formFieldName: "hidden_label",
          labelDisplay: "hidden",
        } as any,
      },
    ];

    const { getByTestId, getByLabelText } = render(<PublicPageRenderer blocks={blocks} />);

    const wrapper = getByTestId("preview-form-input-wrapper") as HTMLElement;
    const span = wrapper.querySelector("span");
    expect(span).not.toBeNull();
    expect((span as HTMLSpanElement).className).toContain("sr-only");

    // label 이 숨김이더라도 접근성 측면에서 getByLabelText 로는 접근 가능해야 한다.
    const input = getByLabelText("숨김 라벨") as HTMLInputElement;
    expect(input).toBeTruthy();
  });

  it("formInput 블록에서 라벨 표시 방식이 floating 이면 pb-form-field/pb-form-label 기반 플로팅 라벨 마크업을 사용해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_input_floating_label",
        type: "formInput",
        props: {
          label: "플로팅 라벨",
          formFieldName: "floating_label",
          labelDisplay: "floating",
        } as any,
      },
    ];

    const { container, getByLabelText } = render(<PublicPageRenderer blocks={blocks} />);

    const field = container.querySelector(
      '[data-testid="preview-form-input-wrapper"]',
    ) as HTMLDivElement | null;
    expect(field).not.toBeNull();
    expect(field!.className).toContain("pb-form-field");
    expect(field!.className).toContain("pb-form-field--floating");

    const firstChild = field!.firstElementChild as HTMLElement | null;
    const lastChild = field!.lastElementChild as HTMLElement | null;
    expect(firstChild).not.toBeNull();
    expect(lastChild).not.toBeNull();
    // 플로팅 라벨 CSS 는 input/textarea 다음 형제 label 을 기준으로 동작하므로,
    // DOM 상에서 input 이 먼저, label 이 나중에 와야 한다.
    expect(firstChild!.getAttribute("data-testid")).toBe("preview-form-input");
    expect(lastChild!.tagName).toBe("LABEL");

    const label = lastChild as HTMLLabelElement;
    expect(label.className).toContain("pb-form-label");

    const input = getByLabelText("플로팅 라벨") as HTMLInputElement;
    expect(input.className).toContain("pb-input");
    // 플로팅 라벨 모드에서는 placeholder 를 공백으로 두고, 라벨만 인풋 안/위에서 이동시킨다.
    expect(input.placeholder).toBe(" ");
    // formFieldName 은 name/id/htmlFor 로 연결되어야 한다.
    expect(input.name).toBe("floating_label");
    expect(input.id).toBe("floating_label");
    expect(label.htmlFor).toBe("floating_label");
  });

  it("formInput 플로팅 라벨에서 paddingY 값은 pb-form-field--floating 의 --pb-input-padding-y CSS 변수로 전달되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_input_floating_padding",
        type: "formInput",
        props: {
          label: "플로팅 패딩",
          formFieldName: "floating_padding",
          labelDisplay: "floating",
          paddingY: 16,
        } as any,
      },
    ];

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

    const field = getByTestId("preview-form-input-wrapper") as HTMLDivElement;
    // paddingY: 16px -> 1rem 으로 변환되어 CSS 변수에 설정되어야 한다.
    expect(field.style.getPropertyValue("--pb-input-padding-y")).toBe("1rem");
  });

	it("formInput 플로팅 라벨에서 strokeColorCustom 은 wrapper 의 --pb-input-border-color CSS 변수로 전달되어야 한다", () => {
		const blocks: Block[] = [
			{
				id: "form_input_floating_border_color",
				type: "formInput",
				props: {
					label: "플로팅 보더",
					formFieldName: "floating_border",
					labelDisplay: "floating",
					strokeColorCustom: "#ff0000",
				} as any,
			},
		];

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

		const field = getByTestId("preview-form-input-wrapper") as HTMLDivElement;
		// CSS 변수는 원본 hex 문자열 그대로 설정된다.
		expect(field.style.getPropertyValue("--pb-input-border-color")).toBe("#ff0000");
	});

  it("formInput 플로팅 라벨에서 label 과 placeholder 가 같으면 placeholder 텍스트를 인풋 안에 표시하지 않아야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_input_floating_same_placeholder",
        type: "formInput",
        props: {
          label: "이름",
          formFieldName: "name",
          labelDisplay: "floating",
          placeholder: "이름",
        } as any,
      },
    ];

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

    const input = getByLabelText("이름") as HTMLInputElement;
    // 플로팅 라벨 모드에서는 placeholder 를 공백으로 두고, 라벨만 인풋 안/위에서 이동시킨다.
    expect(input.placeholder).toBe(" ");
  });

  it("formSelect 블록은 색상/패딩/너비/둥글기 스타일을 반영해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_select_styles",
        type: "formSelect",
        props: {
          label: "카테고리",
          formFieldName: "category",
          options: [
            { label: "A", value: "a" },
            { label: "B", value: "b" },
          ],
          widthMode: "fixed",
          widthPx: 240,
          paddingX: 16,
          paddingY: 8,
          textColorCustom: "#00ff00",
          fillColorCustom: "#123456",
          strokeColorCustom: "#ff0000",
          borderRadius: "lg",
        } as any,
      },
    ];

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

    const wrapper = getByTestId("preview-form-select") as HTMLElement;
    const select = wrapper.querySelector("select") as HTMLSelectElement | null;
    expect(select).not.toBeNull();

    // width: 240px / 16 = 15em
    expect(wrapper.style.width).toBe("15em");
    // padding-inline/block: 16px/8px -> 1em / 0.5em
    expect(select!.style.paddingInline).toBe("1em");
    expect(select!.style.paddingBlock).toBe("0.5em");
    // 색상
    expect(select!.style.color).toBe("rgb(0, 255, 0)");
    expect(select!.style.backgroundColor).toBe("rgb(18, 52, 86)");
    expect(select!.style.borderColor).toBe("rgb(255, 0, 0)");
    // 둥글기
    expect(select!.style.borderRadius).toBe("6px");
  });

  it("formSelect 블록에서 라벨 표시 방식이 hidden 이면 sr-only 클래스로 시각적으로 숨겨야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_select_hidden_label",
        type: "formSelect",
        props: {
          label: "숨김 셀렉트 라벨",
          formFieldName: "select_hidden",
          options: [
            { label: "A", value: "a" },
          ],
          labelDisplay: "hidden",
        } as any,
      },
    ];

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

    const label = container.querySelector("label") as HTMLLabelElement | null;
    expect(label).not.toBeNull();
    const span = label!.querySelector("span");
    expect(span).not.toBeNull();
    expect((span as HTMLSpanElement).className).toContain("sr-only");
  });

  it("formSelect 블록의 select 요소는 formFieldName 을 name 속성으로 사용해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_select_name_attr",
        type: "formSelect",
        props: {
          label: "카테고리",
          formFieldName: "category_field",
          options: [
            { label: "A", value: "a" },
            { label: "B", value: "b" },
          ],
        } as any,
      },
    ];

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

    const wrapper = getByTestId("preview-form-select") as HTMLElement;
    const select = wrapper.querySelector("select") as HTMLSelectElement | null;
    expect(select).not.toBeNull();
    expect(select!.name).toBe("category_field");
  });

  it("formCheckbox 블록은 옵션 컨테이너에 색상/패딩/둥글기 스타일을 반영해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_checkbox_styles",
        type: "formCheckbox",
        props: {
          groupLabel: "옵션들",
          formFieldName: "features",
          options: [{ label: "옵션 1", value: "opt1" }],
          widthMode: "fixed",
          widthPx: 320,
          paddingX: 8,
          paddingY: 4,
          optionGapPx: 16,
          textColorCustom: "#ffffff",
          fillColorCustom: "#123456",
          strokeColorCustom: "#ff0000",
          borderRadius: "lg",
        } as any,
      },
    ];

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

const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
const firstLabel = getFirstLabel(group);

// width: 320px / 16 = 20em
expect(group.style.width).toBe("20em");
// 옵션 간 간격: 16px -> 1em
const optionsContainer = group.querySelector('[data-testid="preview-form-checkbox-options"]') as HTMLElement | null;
expect(optionsContainer).not.toBeNull();
expect(optionsContainer!.style.rowGap).toBe("1em");

// 옵션 컨테이너 스타일: padding, 배경, 보더, 둥글기
expect(firstLabel.style.paddingInline).toBe("0.5em");
expect(firstLabel.style.paddingBlock).toBe("0.25em");
expect(firstLabel.style.backgroundColor).toBe("rgb(18, 52, 86)");
expect(firstLabel.style.borderColor).toBe("rgb(255, 0, 0)");
expect(firstLabel.style.borderRadius).toBe("6px");
});

it("formCheckbox 그룹 래퍼 클래스에는 text-slate-* 색상 클래스가 없어야 한다", () => {
const blocks: Block[] = [
{
id: "form_checkbox_neutral_wrapper",
type: "formCheckbox",
props: {
groupLabel: "옵션들",
formFieldName: "features",
options: [{ label: "옵션 1", value: "opt1" }],
} as any,
},
];

const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
// 체크박스 그룹 래퍼에는 text-slate-* 색상 클래스를 사용하지 않고, 텍스트 색상은 토큰/브라우저 기본값을 따른다.
expect(group.className).not.toContain("text-slate-");
});

it("formRadio 그룹 래퍼 클래스에는 text-slate-* 색상 클래스가 없어야 한다", () => {
const blocks: Block[] = [
{
id: "form_radio_neutral_wrapper",
type: "formRadio",
props: {
groupLabel: "라디오 그룹",
formFieldName: "radio_group",
options: [{ label: "옵션 A", value: "a" }],
} as any,
},
];

const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
const group = getByTestId("preview-form-radio-group") as HTMLElement;
// 라디오 그룹 래퍼에는 text-slate-* 색상 클래스를 사용하지 않고, 텍스트 색상은 토큰/브라우저 기본값을 따른다.
expect(group.className).not.toContain("text-slate-");
});

it("formRadio 블록의 옵션 input 은 type/name/value 및 FormBlock.requiredFieldIds 기반 required 를 가져야 한다", () => {
const blocks: Block[] = [
{
id: "form_ctrl_radio",
type: "form",
props: {
kind: "contact",
submitTarget: "internal",
requiredFieldIds: ["radio_required"],
} as any,
},
{
id: "radio_required",
type: "formRadio",
props: {
groupLabel: "플랜",
formFieldName: "plan",
options: [
{ label: "A", value: "a" },
{ label: "B", value: "b" },
],
} as any,
},
];

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

const group = getByTestId("preview-form-radio-group") as HTMLElement;
const inputs = group.querySelectorAll("input[type='radio']");
expect(inputs.length).toBe(2);

const first = inputs[0] as HTMLInputElement;
const second = inputs[1] as HTMLInputElement;

expect(first.type).toBe("radio");
expect(first.name).toBe("plan");
expect(first.value).toBe("a");
expect(first.required).toBe(true);

expect(second.type).toBe("radio");
expect(second.name).toBe("plan");
expect(second.value).toBe("b");
expect(second.required).toBe(false);
});

	it("formCheckbox 블록의 각 옵션 라벨은 builder.css 의 pb-form-option 클래스를 사용해야 한다", () => {
		const blocks: Block[] = [
			{
				id: "form_checkbox_pb_option_class",
				type: "formCheckbox",
				props: {
					groupLabel: "옵션들",
					formFieldName: "features",
					options: [
						{ label: "옵션 1", value: "opt1" },
						{ label: "옵션 2", value: "opt2" },
					],
				} as any,
			},
		];

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

		const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
		const optionLabels = group.querySelectorAll("label");
		expect(optionLabels.length).toBeGreaterThan(0);
		optionLabels.forEach((label) => {
			expect((label as HTMLLabelElement).className).toContain("pb-form-option");
		});
	});

	it("formRadio 프리뷰의 옵션 input 은 OS 기본 스타일을 사용하기 위해 색상 관련 Tailwind 클래스(bg-/text-/border-)를 사용하지 않아야 한다", () => {
		const blocks: Block[] = [
			{
				id: "form_radio_os_default",
				type: "formRadio",
				props: {
					groupLabel: "라디오",
					formFieldName: "radio_os",
					options: [{ label: "옵션 A", value: "a" }],
				} as any,
			},
		];

		const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
		const group = getByTestId("preview-form-radio-group") as HTMLElement;
		const input = group.querySelector("input[type='radio']") as HTMLInputElement | null;
		expect(input).not.toBeNull();
		// 크기/모양(h-4,w-4 등)만 유지하고, 색상 관련 Tailwind 유틸은 사용하지 않는다.
		expect(input!.className).not.toContain("bg-");
		expect(input!.className).not.toContain("text-");
		expect(input!.className).not.toContain("border-");
	});

  it("formCheckbox 블록에서 optionLayout 이 stacked 이면 옵션 컨테이너가 pb-form-options--stacked 클래스를 사용해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_checkbox_layout_stacked",
        type: "formCheckbox",
        props: {
          groupLabel: "옵션들",
          formFieldName: "features",
          options: [
            { label: "옵션 1", value: "opt1" },
            { label: "옵션 2", value: "opt2" },
          ],
          optionLayout: "stacked",
        } as any,
      },
    ];

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

    const optionsContainer = getByTestId(
      "preview-form-checkbox-options",
    ) as HTMLElement;
    expect(optionsContainer.className).toContain("pb-form-options");
    expect(optionsContainer.className).toContain("pb-form-options--stacked");
  });

  it("formCheckbox 블록에서 optionLayout 이 inline 이면 옵션 컨테이너가 pb-form-options--inline 클래스를 사용해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_checkbox_layout_inline",
        type: "formCheckbox",
        props: {
          groupLabel: "옵션들",
          formFieldName: "features",
          options: [
            { label: "옵션 1", value: "opt1" },
            { label: "옵션 2", value: "opt2" },
          ],
          optionLayout: "inline",
        } as any,
      },
    ];

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

    const optionsContainer = getByTestId(
      "preview-form-checkbox-options",
    ) as HTMLElement;
    expect(optionsContainer.className).toContain("pb-form-options");
    expect(optionsContainer.className).toContain("pb-form-options--inline");
  });

  it("formCheckbox 블록에서 그룹 타이틀 표시 방식이 hidden 이면 sr-only 클래스로 시각적으로 숨겨야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_checkbox_hidden_group_label",
        type: "formCheckbox",
        props: {
          groupLabel: "숨김 체크박스 그룹",
          formFieldName: "features_hidden",
          options: [{ label: "옵션 1", value: "opt1" }],
          groupLabelDisplay: "hidden",
        } as any,
      },
    ];

    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
    const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
    const spans = group.querySelectorAll("span");
    const spanArray = Array.from(spans) as HTMLSpanElement[];
    const groupLabelSpan = spanArray.find((s) => s.textContent === "숨김 체크박스 그룹");
    expect(groupLabelSpan).toBeTruthy();
    expect(groupLabelSpan!.className).toContain("sr-only");
  });

  it("formCheckbox 블록의 옵션 input 은 type/ name/value 및 FormBlock.requiredFieldIds 기반 required 를 가져야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_ctrl_checkbox",
        type: "form",
        props: {
          kind: "contact",
          submitTarget: "internal",
          requiredFieldIds: ["checkbox_required"],
        } as any,
      },
      {
        id: "checkbox_required",
        type: "formCheckbox",
        props: {
          groupLabel: "기능",
          formFieldName: "feature",
          options: [
            { label: "A", value: "a" },
            { label: "B", value: "b" },
          ],
        } as any,
      },
    ];

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

    const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
    const inputs = group.querySelectorAll("input[type='checkbox']");
    expect(inputs.length).toBe(2);

    const first = inputs[0] as HTMLInputElement;
    const second = inputs[1] as HTMLInputElement;

    expect(first.type).toBe("checkbox");
    expect(first.name).toBe("feature");
    expect(first.value).toBe("a");
    expect(first.required).toBe(true);

    expect(second.type).toBe("checkbox");
    expect(second.name).toBe("feature");
    expect(second.value).toBe("b");
    expect(second.required).toBe(false);
  });

	it("formCheckbox 프리뷰의 옵션 input 은 OS 기본 스타일을 사용하기 위해 색상 관련 Tailwind 클래스(bg-/text-/border-)를 사용하지 않아야 한다", () => {
		const blocks: Block[] = [
			{
				id: "form_checkbox_os_default",
				type: "formCheckbox",
				props: {
					groupLabel: "체크",
					formFieldName: "features_os",
					options: [{ label: "옵션 1", value: "opt1" }],
				} as any,
			},
		];

		const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
		const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
		const input = group.querySelector("input[type='checkbox']") as HTMLInputElement | null;
		expect(input).not.toBeNull();
		// 크기/모양(h-4,w-4,rounded 등)만 유지하고, 색상 관련 Tailwind 유틸은 사용하지 않는다.
		expect(input!.className).not.toContain("bg-");
		expect(input!.className).not.toContain("text-");
		expect(input!.className).not.toContain("border-");
	});

	it("formCheckbox 프리뷰의 옵션 input 은 OS 기본 스타일을 사용하기 위해 색상 관련 Tailwind 클래스(bg-/text-/border-)를 사용하지 않아야 한다", () => {
		const blocks: Block[] = [
			{
				id: "form_checkbox_os_default",
				type: "formCheckbox",
				props: {
					groupLabel: "체크",
					formFieldName: "features_os",
					options: [{ label: "옵션 1", value: "opt1" }],
				} as any,
			},
		];

		const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
		const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
		const input = group.querySelector("input[type='checkbox']") as HTMLInputElement | null;
		expect(input).not.toBeNull();
		// 크기/모양(h-4,w-4,rounded 등)만 유지하고, 색상 관련 Tailwind 유틸은 사용하지 않는다.
		expect(input!.className).not.toContain("bg-");
		expect(input!.className).not.toContain("text-");
		expect(input!.className).not.toContain("border-");
	});

  it("formRadio 블록에서 그룹 타이틀 레이아웃이 inline 이면 그룹 컨테이너가 가로 정렬되고 세로 중앙 정렬 및 columnGap 이 labelGapPx 로 반영되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_radio_label_inline_preview",
        type: "formRadio",
        props: {
          groupLabel: "플랜 인라인",
          formFieldName: "plan-inline",
          groupLabelDisplay: "visible",
          labelLayout: "inline",
          labelGapPx: 16,
          options: [
            { label: "플랜 A", value: "a" },
            { label: "플랜 B", value: "b" },
          ],
        } as any,
      },
    ];

    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
    const group = getByTestId("preview-form-radio-group") as HTMLElement;

    expect(group.className).toContain("flex");
    expect(group.className).toContain("flex-row");
    expect(group.className).toContain("items-center");
    // labelGapPx: 16px → 1em
    expect(group.style.columnGap).toBe("1em");
  });

  it("formCheckbox 블록에서 그룹 타이틀 레이아웃이 inline 이면 그룹 컨테이너가 가로 정렬되고 세로 중앙 정렬 및 columnGap 이 labelGapPx 로 반영되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_checkbox_label_inline_preview",
        type: "formCheckbox",
        props: {
          groupLabel: "체크 인라인",
          formFieldName: "features-inline",
          groupLabelDisplay: "visible",
          labelLayout: "inline",
          labelGapPx: 12,
          options: [
            { label: "옵션 1", value: "opt1" },
            { label: "옵션 2", value: "opt2" },
          ],
        } as any,
      },
    ];

    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
    const group = getByTestId("preview-form-checkbox-group") as HTMLElement;

    expect(group.className).toContain("flex");
    expect(group.className).toContain("flex-row");
    expect(group.className).toContain("items-center");
    // labelGapPx: 12px → 0.75em
    expect(group.style.columnGap).toBe("0.75em");
  });

  it("formRadio 블록은 옵션 컨테이너에 색상/패딩/둥글기 스타일을 반영해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_radio_styles",
        type: "formRadio",
        props: {
          groupLabel: "플랜",
          formFieldName: "plan",
          options: [{ label: "플랜 A", value: "a" }],
          widthMode: "fixed",
          widthPx: 320,
          paddingX: 8,
          paddingY: 4,
          optionGapPx: 16,
          textColorCustom: "#ffffff",
          fillColorCustom: "#123456",
          strokeColorCustom: "#ff0000",
          borderRadius: "lg",
        } as any,
      },
    ];

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

    const group = getByTestId("preview-form-radio-group") as HTMLElement;
    const firstLabel = getFirstLabel(group);

    // width: 320px / 16 = 20em
    expect(group.style.width).toBe("20em");
    // 옵션 간 간격: 16px -> 1em
    const optionsContainer = group.querySelector('[data-testid="preview-form-radio-options"]') as HTMLElement | null;
    expect(optionsContainer).not.toBeNull();
    expect(optionsContainer!.style.rowGap).toBe("1em");

    // 옵션 컨테이너 스타일: padding, 배경, 보더, 둥글기
    expect(firstLabel.style.paddingInline).toBe("0.5em");
    expect(firstLabel.style.paddingBlock).toBe("0.25em");
    expect(firstLabel.style.backgroundColor).toBe("rgb(18, 52, 86)");
    expect(firstLabel.style.borderColor).toBe("rgb(255, 0, 0)");
    expect(firstLabel.style.borderRadius).toBe("6px");
  });

  it("formRadio 블록의 각 옵션 라벨은 builder.css 의 pb-form-option 클래스를 사용해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_radio_pb_option_class",
        type: "formRadio",
        props: {
          groupLabel: "플랜",
          formFieldName: "plan",
          options: [
            { label: "플랜 A", value: "a" },
            { label: "플랜 B", value: "b" },
          ],
        } as any,
      },
    ];

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

    const group = getByTestId("preview-form-radio-group") as HTMLElement;
    const optionLabels = group.querySelectorAll("label");
    expect(optionLabels.length).toBeGreaterThan(0);
    optionLabels.forEach((label) => {
      expect((label as HTMLLabelElement).className).toContain("pb-form-option");
    });
  });
});