import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import { router } from "../router";
import { useGlobalErrorHandler } from "../composables/useGlobalErrorHandler";
import { useAuthStore } from "../stores/auth.js";
import { isDebugEnabled, safeStringify } from "../utils/logger";
import "@phosphor-icons/web/regular";
import "@phosphor-icons/web/fill";
import "../styles/main.css";

const LOG_PREFIX = "[vue:pinia]";

// Pinia store action logger plugin
const storeLogger = (context) => {
  if (!isDebugEnabled()) return;

  const { store, options } = context;
  const storeName = options.id;

  // Wrap actions
  const actionNames = Object.keys(options.actions || {});
  for (const actionName of actionNames) {
    const originalAction = store[actionName];
    store[actionName] = async function (...args) {
      console.debug(LOG_PREFIX, `${storeName}.${actionName}(${args.map(a => safeStringify(a)).join(", ")})`);
      const start = performance.now();
      try {
        const result = await originalAction.apply(this, args);
        console.debug(LOG_PREFIX, `${storeName}.${actionName} completed in ${(performance.now() - start).toFixed(1)}ms`);
        return result;
      } catch (err) {
        console.error(LOG_PREFIX, `${storeName}.${actionName} failed: ${err?.message || err}`);
        throw err;
      }
    };
  }
};

const app = createApp(App);

useGlobalErrorHandler(app);

const pinia = createPinia();
pinia.use(storeLogger);
app.use(pinia).use(router);

// Initialize auth before mounting so router guards have valid state
const authStore = useAuthStore();
authStore.init().finally(() => {
  app.mount("#app");
});