import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { registerSW } from 'virtual:pwa-register'
import App from './App.vue'
import router from './router'
import { logger } from './utils/logger'
import './styles/main.css'

// ═══════════════════════════════════════════════════════════════════════════
// PERFORMANCE: Mark app initialization
// ═══════════════════════════════════════════════════════════════════════════
if (typeof performance !== 'undefined') {
  performance.mark('app-init-start')
}

// ═══════════════════════════════════════════════════════════════════════════
// SERVICE WORKER: Register PWA
// ═══════════════════════════════════════════════════════════════════════════
const updateSW = registerSW({
  immediate: true,
  onNeedRefresh() {
    // Show update prompt to user
    if (confirm('Yeni içerik mevcut. Sayfayı yenilemek ister misiniz?')) {
      updateSW(true)
    }
  },
  onOfflineReady() {
    logger.log('Uygulama çevrimdışı kullanıma hazır')
  },
  onRegistered(registration) {
    logger.log('Service Worker kayıtlı:', registration)
    
    // Check for updates every hour
    if (registration) {
      setInterval(() => {
        registration.update()
      }, 60 * 60 * 1000)
    }
  },
  onRegisterError(error) {
    logger.error('Service Worker kayıt hatası:', error)
  }
})

// ═══════════════════════════════════════════════════════════════════════════
// APP: Create and configure
// ═══════════════════════════════════════════════════════════════════════════
const app = createApp(App)

// Pinia store
const pinia = createPinia()

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

// ═══════════════════════════════════════════════════════════════════════════
// PERFORMANCE: Global error handler with performance tracking
// ═══════════════════════════════════════════════════════════════════════════
app.config.errorHandler = (err, instance, info) => {
  logger.error('Global error:', err)
  logger.error('Component:', instance)
  logger.error('Info:', info)
  
  // Report to analytics if available
  if (typeof window !== 'undefined' && (window as unknown as { gtag?: Function }).gtag) {
    (window as unknown as { gtag: Function }).gtag('event', 'exception', {
      description: err instanceof Error ? err.message : String(err),
      fatal: false,
    })
  }
}

// Performance warnings in development
if (import.meta.env.DEV) {
  app.config.performance = true
}

// ═══════════════════════════════════════════════════════════════════════════
// MOUNT: Mount app and track performance
// ═══════════════════════════════════════════════════════════════════════════
router.isReady().then(() => {
  app.mount('#app')
  
  // Performance: Measure time to interactive
  if (typeof performance !== 'undefined') {
    performance.mark('app-mounted')
    performance.measure('app-startup', 'app-init-start', 'app-mounted')
    
    const entries = performance.getEntriesByName('app-startup')
    if (entries.length > 0) {
      logger.log(`⚡ App mounted in ${Math.round(entries[0].duration)}ms`)
    }
  }
  
  // Preload critical resources after mount
  requestIdleCallback(() => {
    // Prefetch common routes
    import('./views/mods/ModList.vue')
    import('./views/games/GameListPremium.vue')
  }, { timeout: 2000 })
})