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

// PublicPageRenderer 폼 제출 UX TDD
// - 성공 응답 시 FormBlockProps 의 successMessage 를 success 스타일로 표시해야 한다.
// - 실패 응답 시 FormBlockProps 의 errorMessage 를 error 스타일로 표시해야 한다.

describe("PublicPageRenderer - 폼 제출 메시지", () => {
  afterEach(() => {
    cleanup();
    // fetch 목 초기화
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (globalThis as any).fetch = undefined;
  });

  it("성공 응답 시 FormBlock 의 successMessage 를 성공 메시지로 렌더해야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "form_success",
        type: "form",
        props: {
          kind: "contact",
          submitTarget: "internal",
          successMessage: "폼 성공 메시지 (config)",
          errorMessage: "폼 에러 메시지 (config)",
          fields: [
            { id: "f1", name: "name", label: "이름", type: "text", required: true },
          ],
          fieldIds: [],
          submitButtonId: null,
        } as any,
      },
    ];

    const fetchMock = vi.fn(async () =>
      new Response("ok", {
        status: 200,
        headers: { "Content-Type": "text/plain" },
      }),
    );
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (globalThis as any).fetch = fetchMock;

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

    const form = screen.getByTestId("preview-form-controller") as HTMLFormElement;
    expect(form).toBeTruthy();

    const input = form.querySelector('input[name="name"]') as HTMLInputElement | null;
    expect(input).not.toBeNull();

    const submitButton = screen.getByRole("button", { name: "폼 전송" });
    expect(submitButton).toBeTruthy();

    fireEvent.submit(form);

    await waitFor(() => {
      expect(fetchMock).toHaveBeenCalledTimes(1);
    });

    await waitFor(() => {
      const msg = screen.getByText("폼 성공 메시지 (config)");
      expect(msg).toBeTruthy();
    });
  });

  it("실패 응답 시 FormBlock 의 errorMessage 를 에러 메시지로 렌더해야 한다", async () => {
    const blocks: Block[] = [
      {
        id: "form_error",
        type: "form",
        props: {
          kind: "contact",
          submitTarget: "internal",
          successMessage: "폼 성공 메시지 (config)",
          errorMessage: "폼 에러 메시지 (config)",
          fields: [
            { id: "f1", name: "name", label: "이름", type: "text", required: true },
          ],
          fieldIds: [],
          submitButtonId: null,
        } as any,
      },
    ];

    const fetchMock = vi.fn(async () =>
      new Response("error", {
        status: 500,
        headers: { "Content-Type": "text/plain" },
      }),
    );
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (globalThis as any).fetch = fetchMock;

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

    const form = screen.getByTestId("preview-form-controller") as HTMLFormElement;
    expect(form).toBeTruthy();

    const submitButton = screen.getByRole("button", { name: "폼 전송" });
    expect(submitButton).toBeTruthy();

    fireEvent.submit(form);

    await waitFor(() => {
      expect(fetchMock).toHaveBeenCalledTimes(1);
    });

    await waitFor(() => {
      const errorMsg = screen.getByText("폼 에러 메시지 (config)");
      expect(errorMsg).toBeTruthy();
    });
  });
});
