import { createPinia } from "pinia";
import { App as VueApp, ComponentPublicInstance, createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import axios from "axios";
import VueAxios from "vue-axios";
import Notifications from "notiwind";
import "./assets/styles/tailwind.css";
import { FontAwesomeIcon } from "./lib/fontawesome";
import Camera from "simple-vue-camera";
import { logger } from "./utils/logger";

// Global Error Handler
function setupGlobalErrorHandler(app: VueApp) {
  logger.log("[App Init] Setting up global error handler");
  app.config.errorHandler = (
    err: unknown,
    instance: ComponentPublicInstance | null,
    info: string,
  ) => {
    logger.error("[App Error] Global Error Handler:", {
      error: err,
      info,
      component: instance?.$options.name || "unknown",
    });
    alert(
      (err instanceof Error ? err.message : "Something bad happened") +
        " - Try reloading or restarting the app.",
    );
  };
}

// Function to initialize the app
export function initializeApp() {
  logger.log("[App Init] Starting app initialization");
  logger.log("[App Init] Platform:", process.env.VITE_PLATFORM);

  const app = createApp(App);
  logger.log("[App Init] Vue app created");

  app.component("FontAwesome", FontAwesomeIcon).component("camera", Camera);
  logger.log("[App Init] Components registered");

  const pinia = createPinia();
  app.use(pinia);
  logger.log("[App Init] Pinia store initialized");

  app.use(VueAxios, axios);
  logger.log("[App Init] Axios initialized");

  app.use(router);
  logger.log("[App Init] Router initialized");

  app.use(Notifications);
  logger.log("[App Init] Notifications initialized");

  setupGlobalErrorHandler(app);
  logger.log("[App Init] App initialization complete");

  return app;
}