import { createApp } from 'vue'
import { createPinia } from 'pinia'
import * as Sentry from '@sentry/vue'
import { BrowserTracing } from '@sentry/tracing'
import App from './App.vue'
import router from './router'
import { createI18n } from 'vue-i18n'
import enMessages from './i18n/en.json' // Import en.json directly
import deMessages from './i18n/de.json'
import frMessages from './i18n/fr.json'
import esMessages from './i18n/es.json'
import nlMessages from './i18n/nl.json'

// Global styles
import './assets/main.scss'

// API client (from your axios boot file)
import { api, globalAxios } from '@/services/api' // Renamed from boot/axios to services/api
import { useAuthStore } from '@/stores/auth'

// Vue I18n setup (from your i18n boot file)
// // export type MessageLanguages = keyof typeof messages;
// // export type MessageSchema = (typeof messages)['en-US'];
// // export type MessageLanguages = keyof typeof messages;
// // export type MessageSchema = (typeof messages)['en-US'];

// // declare module 'vue-i18n' {
// //   export interface DefineLocaleMessage extends MessageSchema {}
// //   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
// //   export interface DefineDateTimeFormat {}
// //   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
// //   export interface DefineNumberFormat {}
// // }
const i18n = createI18n({
  legacy: false, // Recommended for Vue 3
  locale: 'en', // Default locale
  fallbackLocale: 'en', // Fallback locale
  messages: {
    en: enMessages,
    de: deMessages,
    fr: frMessages,
    es: esMessages,
    nl: nlMessages,
  },
})

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)

// Initialize Sentry
Sentry.init({
  app,
  dsn: import.meta.env.VITE_SENTRY_DSN,
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ['localhost', /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
  // Set environment
  environment: import.meta.env.MODE,
})

// Initialize auth state before mounting the app
const authStore = useAuthStore()
if (authStore.accessToken) {
  authStore.fetchCurrentUser().catch((error) => {
    console.error('Failed to initialize current user state:', error)
    // The fetchCurrentUser action handles token clearing on failure.
  })
}

app.use(router)
app.use(i18n)

// Make API instance globally available (optional, prefer provide/inject or store)
app.config.globalProperties.$api = api
app.config.globalProperties.$axios = globalAxios // The original axios instance if needed

app.mount('#app')