<template>
  <div class="step-navigation mb-8">
    <!-- Progress Bar -->
    <div class="mb-6">
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm text-gray-600">Étape {{ currentStep }} sur {{ totalSteps }}</span>
        <span class="text-sm text-gray-500">{{ Math.round((currentStep / totalSteps) * 100) }}%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-1">
        <div 
          class="bg-primary-600 h-1 rounded-full transition-all duration-300"
          :style="{ width: `${(currentStep / totalSteps) * 100}%` }"
        ></div>
      </div>
    </div>

    <!-- Step Indicators -->
    <div class="flex justify-between items-center mb-8">
      <div 
        v-for="step in totalSteps" 
        :key="step"
        class="flex flex-col items-center"
      >
        <div 
          class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium transition-colors"
          :class="getStepClasses(step)"
        >
          <span v-if="step < currentStep" class="text-white">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </span>
          <span v-else>{{ step }}</span>
        </div>
        <span 
          class="text-xs mt-2 text-center max-w-16"
          :class="getStepTextClasses(step)"
        >
          {{ getStepTitle(step) }}
        </span>
      </div>
    </div>

    <!-- Navigation Buttons -->
    <div class="flex justify-between">
      <button
        v-if="currentStep > 1"
        @click="$emit('previous')"
        class="btn-secondary px-4 py-2 text-sm"
        :disabled="loading"
      >
        Précédent
      </button>
      <div v-else></div>

      <button
        v-if="currentStep < totalSteps"
        @click="$emit('next')"
        :disabled="!canProceed || loading"
        class="btn-primary px-4 py-2 text-sm"
        :class="{ 'opacity-50 cursor-not-allowed': !canProceed || loading }"
      >
        Suivant
      </button>

      <button
        v-if="currentStep === totalSteps"
        @click="$emit('submit')"
        :disabled="loading"
        class="btn-primary px-4 py-2 text-sm"
      >
        {{ loading ? 'Création...' : 'Créer mon compte' }}
      </button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  currentStep: {
    type: Number,
    required: true
  },
  totalSteps: {
    type: Number,
    required: true
  },
  canProceed: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  }
})

defineEmits(['previous', 'next', 'submit'])

function getStepClasses(step) {
  if (step < props.currentStep) {
    return 'bg-green-500 text-white'
  } else if (step === props.currentStep) {
    return 'bg-blue-600 text-white ring-4 ring-blue-200'
  } else {
    return 'bg-gray-200 text-gray-500'
  }
}

function getStepTextClasses(step) {
  if (step < props.currentStep) {
    return 'text-green-600 font-medium'
  } else if (step === props.currentStep) {
    return 'text-blue-600 font-medium'
  } else {
    return 'text-gray-500'
  }
}

function getStepTitle(step) {
  const titles = {
    1: 'Bienvenue',
    2: 'Informations',
    3: 'Avertissement',
    4: 'Fonctionnalités',
    5: 'Confirmation'
  }
  return titles[step] || `Étape ${step}`
}
</script>
