import { createRoot } from "react-dom/client";
import { act } from "react-dom/test-utils";
import { afterEach, describe, expect, it, vi } from "vitest";
import { DeveloperAccessRequestCard } from "./DeveloperAccessRequestCard";

describe("DeveloperAccessRequestCard", () => {
  afterEach(() => {
    document.body.innerHTML = "";
  });

  it("renders the request CTA for pending and denied states", () => {
    const onAction = vi.fn();
    const container = document.createElement("div");
    document.body.appendChild(container);
    const root = createRoot(container);

    act(() => {
      root.render(
        <DeveloperAccessRequestCard
          title="운영 현황"
          isPending={true}
          canRequest={false}
          pendingMessage="검토 중"
          deniedMessage="거부됨"
          pendingDetailMessage="승인 대기"
          deniedDetailMessage="신청 필요"
          actionLabel="개발자 권한 신청"
          onAction={onAction}
        />,
      );
    });

    expect(container.querySelector("h2")?.textContent).toBe("운영 현황");
    expect(container.textContent).toContain("검토 중");
    expect(container.textContent).toContain("승인 대기");

    const button = container.querySelector("button");
    expect(button?.textContent).toBe("개발자 권한 신청");

    act(() => {
      button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    expect(onAction).toHaveBeenCalledTimes(1);

    act(() => {
      root.render(
        <DeveloperAccessRequestCard
          title="감사 로그"
          isPending={false}
          canRequest={true}
          pendingMessage="검토 중"
          deniedMessage="거부됨"
          pendingDetailMessage="승인 대기"
          deniedDetailMessage="신청 필요"
          actionLabel="개발자 권한 신청"
          onAction={onAction}
        />,
      );
    });

    expect(container.querySelector("h2")?.textContent).toBe("감사 로그");
    expect(container.textContent).toContain("거부됨");
    expect(container.textContent).toContain("신청 필요");
    expect(container.querySelector("button")).not.toBeNull();
  });
});