import { mount, flushPromises } from "@vue/test-utils";
import { describe, it, expect, vi, beforeEach } from "vitest";
import CreateAccountPage from "~/pages/member/auth/create-account.vue";

// Mock auth client
const authMocks = vi.hoisted(() => ({
  signUpEmail: vi.fn(),
}));

vi.mock("~~/shared/utils/auth-client", () => ({
  authClient: {
    signUp: {
      email: authMocks.signUpEmail,
    },
  },
}));

// Mock UI components
vi.mock("@/components/ui/button", () => ({
  Button: { template: "<button><slot /></button>" },
}));

vi.mock("@/components/ui/input", () => ({
  Input: {
    props: ["modelValue", "id", "type"],
    emits: ["update:modelValue"],
    template: `<input :id="id" :type="type" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />`,
  },
}));

vi.mock("@/components/ui/card", () => ({
  Card: { template: "<div><slot /></div>" },
  CardHeader: { template: "<div><slot /></div>" },
  CardTitle: { template: "<h1><slot /></h1>" },
  CardDescription: { template: "<p><slot /></p>" },
  CardContent: { template: "<div><slot /></div>" },
}));

vi.mock("@/components/ui/field", () => ({
  Field: { template: "<div><slot /></div>" },
  FieldGroup: { template: "<div><slot /></div>" },
  FieldLabel: { template: "<label><slot /></label>" },
  FieldDescription: { template: "<span><slot /></span>" },
}));

describe("CreateAccountPage", () => {
  beforeEach(() => {
    vi.clearAllMocks();
    authMocks.signUpEmail.mockResolvedValue({ data: {}, error: null });
  });

  it("renders the signup form correctly", async () => {
    const wrapper = mount(CreateAccountPage);

    // Wait for any async rendering if necessary
    await flushPromises();

    expect(wrapper.text()).toContain("Create your account");
    expect(wrapper.find('input[type="email"]').exists()).toBe(true);
    expect(wrapper.find('input[type="password"]').exists()).toBe(true);
  });

  it("submits the form with correct data", async () => {
    const wrapper = mount(CreateAccountPage);

    await flushPromises();

    // Fill the form
    const nameInput = wrapper.find('input[id="name"]');
    const emailInput = wrapper.find('input[id="email"]');
    const passwordInput = wrapper.find('input[id="password"]');
    const confirmPasswordInput = wrapper.find('input[id="confirm-password"]');

    await nameInput.setValue("Test User");
    await emailInput.setValue("test@example.com");
    await passwordInput.setValue("password123");
    await confirmPasswordInput.setValue("password123");

    // Submit
    await wrapper.find("form").trigger("submit");

    expect(authMocks.signUpEmail).toHaveBeenCalledWith({
      name: "Test User",
      email: "test@example.com",
      password: "password123", // NOSONAR - Mocked value
    });
  });
});