import { createApp } from "vue";
import { createPinia } from "pinia";
import { createRouter, createWebHistory } from "vue-router";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

import App from "./App.vue";
// Import routes
import { routes } from "./router";
import { useAuth } from "./auth/useAuth";

// Import Tailwind CSS
import "./assets/css/main.css";

// Create Vue app
const app = createApp(App);

// Create Pinia store
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

// Create router
const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach(async (to) => {
  const auth = useAuth();
  if (!auth.initialized.value) {
    await auth.initAuth();
  }
  if (to.meta?.requiresAuth && !auth.isAuthenticated.value) {
    return { path: "/login", query: { redirect: to.fullPath } };
  }
  if ((to.path === "/login" || to.path === "/register") && auth.isAuthenticated.value) {
    return { path: "/dashboard" };
  }
  return true;
});

// Use plugins
app.use(pinia);
app.use(router);

// Mount the app
app.mount("#app");