<template>
  <div class="inline-flex items-center">
    <!-- Loading Spinner for analyzing/importing -->
    <svg v-if="isAnalyzing || isImporting" class="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>

    <!-- Status Badge -->
    <span :class="badgeClasses">
      {{ badgeText }}
    </span>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  status: {
    type: String,
    required: true
  },
  isAnalyzing: {
    type: Boolean,
    default: false
  },
  isImporting: {
    type: Boolean,
    default: false
  }
});

const badgeText = computed(() => {
  if (props.isImporting) return 'Import en cours...';
  if (props.isAnalyzing) return 'Analyse en cours...';

  switch (props.status) {
    case 'pending': return 'En attente';
    case 'analyzed': return 'Analysé';
    case 'importing': return 'Import en cours';
    case 'imported': return 'Importé';
    case 'error': return 'Erreur';
    default: return 'Inconnu';
  }
});

const badgeClasses = computed(() => {
  const baseClasses = 'inline-flex items-center px-2.5 py-0.5 text-xs font-medium';

  if (props.isImporting || props.isAnalyzing) {
    return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
  }

  switch (props.status) {
    case 'pending':
      return `${baseClasses} bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300`;
    case 'analyzed':
      return `${baseClasses} bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300`;
    case 'importing':
      return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
    case 'imported':
      return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
    case 'error':
      return `${baseClasses} bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300`;
    default:
      return `${baseClasses} bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300`;
  }
});
</script>
