import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { VueQueryPlugin } from '@tanstack/vue-query'
import App from './App.vue'
import router from './router'
import { useAuthStore } from './stores/auth'
import { useThemeStore } from './stores/theme'
import { usePostHog, captureException } from './composables/usePostHog'
import './style.css'

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

app.use(pinia)
app.use(VueQueryPlugin)
app.use(router)

// Initialize stores from server-injected session
const auth = useAuthStore()
auth.init()

// Initialize theme
useThemeStore()

// Initialize PostHog and track route changes
const { init: initPostHog, trackPageview } = usePostHog()
initPostHog()

router.afterEach((to) => {
  trackPageview(to.fullPath)
})

// Capture uncaught Vue component errors in PostHog
app.config.errorHandler = (err, instance, info) => {
  captureException(err, { component: instance?.$options?.name, info })
}

app.mount('#app')
