import { vi } from "vitest";
import { config } from "@vue/test-utils";
import * as vue from "vue";

(global as any).ref = vue.ref;
(global as any).reactive = vue.reactive;
(global as any).computed = vue.computed;
(global as any).watch = vue.watch;
(global as any).onMounted = vue.onMounted;
(global as any).onUnmounted = vue.onUnmounted;

Object.defineProperty(global, "import", {
  value: {
    meta: {
      glob: vi.fn(() => ({})),
    },
  },
  writable: true,
});

// Mock for breadcrumb store
const breadcrumbStoreMocks = vi.hoisted(() => ({
  setBreadcrumbs: vi.fn(),
  addBreadcrumb: vi.fn(),
  clear: vi.fn(),
  items: [{ label: "Auth" }, { label: "Create Account", to: "/auth/create-account" }],
}));
vi.mock("~/stores/breadcrumbs", () => ({
  useBreadcrumbStore: () => breadcrumbStoreMocks,
}));

// Mock for #app
vi.mock("#app", () => ({
  useRuntimeConfig: () => ({
    public: {
      appVersion: "1.0.1",
      hostUrl: "http://localhost:3000",
    },
  }),
  useSeoMeta: () => {},
}));

config.global.stubs = {
  NuxtLayout: true,
  NuxtPage: true,
  Divider: true,
  NuxtRouteAnnouncer: true,
  NuxtLink: { template: "<a><slot /></a>", props: ["to"] },
  ClientOnly: { template: "<div class='client-only'><slot /></div>" },
};