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

// Styles
import './assets/main.css'
import 'vue-toastification/dist/index.css'

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

// Create Pinia store
const pinia = createPinia()

// Toast configuration
const toastOptions = {
  position: 'top-right',
  timeout: 4000,
  closeOnClick: true,
  pauseOnFocusLoss: true,
  pauseOnHover: true,
  draggable: true,
  draggablePercent: 0.6,
  showCloseButtonOnHover: false,
  hideProgressBar: false,
  closeButton: 'button',
  icon: true,
  rtl: false,
  transition: 'Vue-Toastification__fade',
  maxToasts: 5,
  newestOnTop: true,
  toastClassName: 'custom-toast',
  bodyClassName: 'custom-toast-body',
}

// Use plugins
app.use(pinia)
app.use(router)
app.use(Toast, toastOptions)

// Global error handler
app.config.errorHandler = (err, instance, info) => {
  console.error('Global error:', err)
  console.error('Error info:', info)
}

// Mount app
app.mount('#app')

// Remove loading screen
const loadingElement = document.querySelector('.app-loading')
if (loadingElement) {
  setTimeout(() => {
    loadingElement.style.opacity = '0'
    loadingElement.style.transition = 'opacity 0.3s ease-out'
    setTimeout(() => {
      loadingElement.remove()
    }, 300)
  }, 100)
}