import "./assets/styles/main.css";

import Aura from "@primeuix/themes/aura";
import { definePreset } from "@primeuix/themes";
import PrimeVue from "primevue/config";
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';
import StyleClass from "primevue/styleclass";
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import { useAuth } from "./modules/auth/composables/useAuth";

// Crear un preset personalizado basado en Aura con color azul
const MyPreset = definePreset(Aura, {
    semantic: {
        primary: {
            50: "{blue.50}",
            100: "{blue.100}",
            200: "{blue.200}",
            300: "{blue.300}",
            400: "{blue.400}",
            500: "{blue.500}",
            600: "{blue.600}",
            700: "{blue.700}",
            800: "{blue.800}",
            900: "{blue.900}",
            950: "{blue.950}"
        }
    }
});

const app = createApp(App);
const pinia = createPinia();

// Inicializar autenticación desde localStorage
const { initAuth } = useAuth();
initAuth();

app.use(pinia);
app.use(router);
app.use(ConfirmationService);
app.use(ToastService);
app.use(PrimeVue, {
    theme: {
        preset: MyPreset,
        options: {
            darkModeSelector: ".p-dark",
        },
    },
});

app.directive("styleclass", StyleClass);

app.mount("#app");