import { afterEach, describe, expect, it, vi } from "@suaveplan/testing/runner";
import { cleanup, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { wrapForm } from "../test-wrap.js";
import { EmailVerificationView } from "./email-verification-view.js";

afterEach(cleanup);

function renderView(props: Parameters<typeof EmailVerificationView>[0]) {
    return render(wrapForm(<EmailVerificationView {...props} />));
}

describe("EmailVerificationView", () => {
    it("renders the verifying status with a spinner", { timeout: 5000 }, () => {
        renderView({ status: "verifying" });
        expect(document.querySelector('[role="status"]')).toBeTruthy();
        expect(screen.getByText(/verifying/i)).toBeTruthy();
    });

    it("fires onContinueToLogin from the success CTA", {
        timeout: 5000,
    }, async () => {
        const user = userEvent.setup();
        const onContinueToLogin = vi.fn();
        renderView({
            status: "success",
            onContinueToLogin,
        });
        await user.click(
            screen.getByRole("button", { name: /back to sign in/i })
        );
        expect(onContinueToLogin).toHaveBeenCalledTimes(1);
    });

    it("fires onTryAgain from the error CTA", { timeout: 5000 }, async () => {
        const user = userEvent.setup();
        const onTryAgain = vi.fn();
        renderView({
            status: "error",
            onTryAgain,
        });
        await user.click(
            screen.getByRole("button", {
                name: /resend verification email/i,
            })
        );
        expect(onTryAgain).toHaveBeenCalledTimes(1);
    });

    it("fires onRegisterAgain from the expired CTA", {
        timeout: 5000,
    }, async () => {
        const user = userEvent.setup();
        const onRegisterAgain = vi.fn();
        renderView({
            status: "expired",
            onRegisterAgain,
        });
        await user.click(
            screen.getByRole("button", {
                name: /resend verification email/i,
            })
        );
        expect(onRegisterAgain).toHaveBeenCalledTimes(1);
    });

    it("disables the retry CTA in error mode when isLoading is true", {
        timeout: 5000,
    }, () => {
        renderView({
            status: "error",
            isLoading: true,
        });
        const btn = screen.getByRole("button", {
            name: /resend verification email/i,
        });
        expect(btn.hasAttribute("disabled")).toBe(true);
    });

    it("overrides the default copy when translations prop is supplied", {
        timeout: 5000,
    }, () => {
        renderView({
            status: "success",
            translations: { backToLogin: "Connexion" },
        });
        expect(screen.getByRole("button", { name: /connexion/i })).toBeTruthy();
    });

    it("renders a custom message in the success card when provided", {
        timeout: 5000,
    }, () => {
        renderView({
            status: "success",
            message: "Welcome aboard, Alice!",
        });
        expect(screen.getByText(/welcome aboard, alice/i)).toBeTruthy();
    });

    it("renders a custom message in the error card when provided", {
        timeout: 5000,
    }, () => {
        renderView({
            status: "error",
            message: "Token already consumed",
        });
        const matches = screen.getAllByText(/token already consumed/i);
        expect(matches.length).toBeGreaterThan(0);
    });

    it("renders a custom message in the expired card when provided", {
        timeout: 5000,
    }, () => {
        renderView({
            status: "expired",
            message: "Link expired 7 days ago",
        });
        expect(screen.getByText(/link expired 7 days ago/i)).toBeTruthy();
    });
});