import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'
import { queryClientConfig } from '@/lib/query-client'

import App from '@/App.vue'
import { registerPlugins } from '@core/utils/plugins'

// Styles
import '@core/scss/template/index.scss'
import '@styles/styles.scss'

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

// Error handler for unhandled errors
app.config.errorHandler = (err, instance, info) => {
  console.error('Vue Error:', err, info)
  console.error('Component:', instance)
}

// Register plugins
app.use(VueQueryPlugin, queryClientConfig)

try {
  registerPlugins(app)
} catch (error) {
  console.error('Failed to register plugins:', error)
  throw error
}

// Mount vue app
try {
  app.mount('#app')
} catch (error) {
  console.error('Failed to mount app:', error)
  // Show error message to user
  document.getElementById('app')!.innerHTML = `
    <div style="padding: 20px; text-align: center;">
      <h1>Application Error</h1>
      <p>Failed to start the application. Please check the console for details.</p>
      <pre style="text-align: left; background: #f5f5f5; padding: 10px; border-radius: 4px; overflow: auto;">${error}</pre>
    </div>
  `
}