<template>
  <div v-if="showDebug" class="fixed bottom-4 right-4 bg-black bg-opacity-75 text-white p-3 rounded-lg text-xs font-mono z-50 max-w-xs">
    <div class="flex items-center space-x-2 mb-2">
      <span class="w-2 h-2 rounded-full" :class="environmentColor"></span>
      <span class="font-bold">{{ environment.toUpperCase() }}</span>
    </div>
    <div class="space-y-1 text-gray-300">
      <div>API: {{ apiUrl }}</div>
      <div>App: {{ appUrl }}</div>
      <div>Build: {{ buildTime }}</div>
      <div>Router: {{ routerStatus }}</div>
      <div class="text-yellow-400">VITE_API_URL: {{ viteApiUrl }}</div>
      <div class="text-yellow-400">NODE_ENV: {{ nodeEnv }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'

const routerStatus = ref('Initializing...')

// Utiliser directement les variables d'environnement Vite
const environment = computed(() => import.meta.env.VITE_ENVIRONMENT || 'local')
const apiUrl = computed(() => import.meta.env.VITE_API_URL || 'Non défini')
const appUrl = computed(() => import.meta.env.VITE_APP_URL || 'Non défini')
const viteApiUrl = computed(() => import.meta.env.VITE_API_URL || 'Non défini')
const nodeEnv = computed(() => import.meta.env.NODE_ENV || 'Non défini')
const buildTime = computed(() => new Date().toLocaleTimeString())

const environmentColor = computed(() => {
  switch (environment.value) {
    case 'local': return 'bg-green-500'
    case 'development': return 'bg-yellow-500'
    case 'production': return 'bg-red-500'
    default: return 'bg-gray-500'
  }
})

const showDebug = computed(() => {
  // Toujours afficher en développement, conditionnellement en production
  return environment.value !== 'production' || import.meta.env.DEV
})

onMounted(() => {
  // Attendre un peu que le router soit initialisé
  setTimeout(() => {
    routerStatus.value = 'Ready'
  }, 300)
  
  // Debug des variables d'environnement
  console.log('🔍 EnvironmentDebug - Variables d\'environnement:')
  console.log('  VITE_ENVIRONMENT:', import.meta.env.VITE_ENVIRONMENT)
  console.log('  VITE_API_URL:', import.meta.env.VITE_API_URL)
  console.log('  VITE_APP_URL:', import.meta.env.VITE_APP_URL)
  console.log('  NODE_ENV:', import.meta.env.NODE_ENV)
})
</script>

<style scoped>
/* Styles spécifiques au composant */
</style>
