import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from '../App.vue'

// Naive UI
import naive from 'naive-ui'

// Vue Flow styles
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

// 全局样式
import '../assets/styles/main.css'
// Font Awesome: 全局引入图标字体样式
import '@fortawesome/fontawesome-free/css/all.min.css'

import { useAuthStore } from '../shared/stores/auth'
import { useToolsStore } from '../shared/stores/tools'
import { usePermissionStore } from '../shared/stores/permissions'
import '../shared/utils/fetchInterceptor'

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

app.use(pinia)
app.use(router)
app.use(naive)

async function bootstrap() {
  const authStore = useAuthStore()
  await authStore.initAuth()

  const toolsStore = useToolsStore()
  toolsStore.initToolRoutes(router)

  const permissionStore = usePermissionStore()
  await permissionStore.loadPermissions().catch(() => {})

  app.mount('#app')
}

bootstrap()
