import "../../index.css";

import { page, userEvent } from "vite-plus/test/browser";
import { afterEach, describe, expect, it, vi } from "vite-plus/test";
import { render } from "vitest-browser-react";

import type { DesktopCloudAuthOAuthOption } from "../../cloud/desktopAuth";
import { DesktopClerkSignInCard } from "./DesktopClerkSignIn";

const GOOGLE: DesktopCloudAuthOAuthOption = {
  strategy: "oauth_google",
  label: "Google",
  providerId: "google",
  iconUrl: null,
};

const PROVIDERS: readonly DesktopCloudAuthOAuthOption[] = [
  {
    strategy: "oauth_apple",
    label: "Apple",
    providerId: "apple",
    iconUrl: null,
  },
  GOOGLE,
  {
    strategy: "oauth_microsoft",
    label: "Microsoft",
    providerId: "microsoft",
    iconUrl: null,
  },
];

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

  it("uses Clerk's compact provider grid when more than two providers are enabled", async () => {
    await render(
      <DesktopClerkSignInCard
        isStarting={false}
        oauthOptions={PROVIDERS}
        startingStrategy={null}
        onJoinWaitlist={vi.fn()}
        onStartOAuth={vi.fn()}
      />,
    );

    expect(document.querySelectorAll('button[aria-label^="Continue with "]')).toHaveLength(3);
    expect(document.body.textContent).toContain("Want early access?");
    expect(document.body.textContent).not.toContain("Continue with Google");
  });

  it("renders a full provider label and starts OAuth for a single provider", async () => {
    const onStartOAuth = vi.fn();
    await render(
      <DesktopClerkSignInCard
        isStarting={false}
        oauthOptions={[GOOGLE]}
        startingStrategy={null}
        onJoinWaitlist={vi.fn()}
        onStartOAuth={onStartOAuth}
      />,
    );

    await userEvent.click(page.getByRole("button", { name: "Continue with Google" }));

    expect(document.body.textContent).toContain("Continue with Google");
    expect(onStartOAuth).toHaveBeenCalledWith("oauth_google");
  });
});