import { mount, flushPromises } from "@vue/test-utils";
import { describe, expect, it, vi, beforeEach, beforeAll, afterAll } from "vitest";
import LogoutPage from "~/pages/auth/logout.vue";

// Mock the auth store
const mocks = vi.hoisted(() => ({
  init: vi.fn(),
  signOut: vi.fn(),
}));

vi.mock("~/stores/auth", () => ({
  useAuthStore: () => ({
    init: mocks.init,
    signOut: mocks.signOut,
  }),
}));

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

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

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

describe("LogoutPage", () => {
  beforeAll(() => {
    const shouldSuppress = (args: string[]) => {
      const msg = args.join(" ");
      return msg.includes("<Suspense> is an experimental feature");
    };

    const spyMethods = ["warn", "error", "log", "info"] as const;
    for (const method of spyMethods) {
      const original = console[method];
      vi.spyOn(console, method).mockImplementation((...args) => {
        if (shouldSuppress(args)) return;
        original(...args);
      });
    }
  });

  afterAll(() => {
    vi.restoreAllMocks();
  });

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders correctly and calls init", async () => {
    const wrapper = mount({
      components: { LogoutPage },
      template: "<Suspense><LogoutPage /></Suspense>",
    });

    await flushPromises();

    expect(mocks.init).toHaveBeenCalled();
    expect(wrapper.text()).toContain("Logout");
    expect(wrapper.text()).toContain("Are you sure you want to logout?");
    expect(wrapper.text()).toContain("Home");
  });

  it("calls signOut on form submit", async () => {
    const wrapper = mount({
      components: { LogoutPage },
      template: "<Suspense><LogoutPage /></Suspense>",
    });

    await flushPromises();

    const form = wrapper.find("form");
    expect(form.exists()).toBe(true);
    await form.trigger("submit");

    expect(mocks.signOut).toHaveBeenCalled();
  });
});