/**
 * SAAP Frontend Main Entry Point
 * Vue.js Application Initialization with Pinia & Router
 */

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

// Import global styles
import './assets/css/main.css'

// SAAP Configuration
const SAAP_CONFIG = {
  version: '1.0.0',
  apiBaseUrl: 'http://localhost:8000',
  websocketUrl: 'ws://localhost:8000/ws',
  debug: import.meta.env.DEV,
  buildDate: new Date().toLocaleDateString('de-DE')
}

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

// Create Pinia store
const pinia = createPinia()

// Add global properties
app.config.globalProperties.$saap = SAAP_CONFIG

// Error handling for development
if (SAAP_CONFIG.debug) {
  app.config.errorHandler = (err, instance, info) => {
    console.error('🚨 Vue Error:', err)
    console.error('📍 Instance:', instance)
    console.error('ℹ️ Info:', info)
  }
  
  app.config.warnHandler = (msg, instance, trace) => {
    console.warn('⚠️ Vue Warning:', msg)
    console.warn('📍 Instance:', instance)
    console.warn('🔍 Trace:', trace)
  }
}

// Install plugins
app.use(pinia)
app.use(router)

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

// Log successful initialization
console.log('🚀 SAAP Frontend initialized successfully')
console.log('📊 Configuration:', SAAP_CONFIG)

// Export for debugging
if (SAAP_CONFIG.debug) {
  window.__SAAP_APP__ = app
  window.__SAAP_CONFIG__ = SAAP_CONFIG
}