<template>
  <div class="password-strength">
    <div class="flex items-center justify-between mb-2">
      <span class="text-sm text-gray-600">Force du mot de passe</span>
      <span class="text-sm font-medium" :class="strengthColor">{{ strengthText }}</span>
    </div>
    
    <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
      <div 
        class="h-2 rounded-full transition-all duration-300"
        :class="strengthBarColor"
        :style="{ width: `${strengthPercentage}%` }"
      ></div>
    </div>
    
    <div class="text-xs text-gray-500 space-y-1">
      <div class="flex items-center" :class="{ 'text-green-600': hasMinLength }">
        <svg v-if="hasMinLength" class="w-3 h-3 mr-1" 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>
        <svg v-else class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
        </svg>
        Au moins 6 caractères
      </div>
      
      <div class="flex items-center" :class="{ 'text-green-600': hasUppercase }">
        <svg v-if="hasUppercase" class="w-3 h-3 mr-1" 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>
        <svg v-else class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
        </svg>
        Au moins une majuscule
      </div>
      
      <div class="flex items-center" :class="{ 'text-green-600': hasLowercase }">
        <svg v-if="hasLowercase" class="w-3 h-3 mr-1" 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>
        <svg v-else class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
        </svg>
        Au moins une minuscule
      </div>
      
      <div class="flex items-center" :class="{ 'text-green-600': hasNumber }">
        <svg v-if="hasNumber" class="w-3 h-3 mr-1" 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>
        <svg v-else class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
        </svg>
        Au moins un chiffre
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  password: {
    type: String,
    required: true
  }
})

const hasMinLength = computed(() => props.password.length >= 6)
const hasUppercase = computed(() => /[A-Z]/.test(props.password))
const hasLowercase = computed(() => /[a-z]/.test(props.password))
const hasNumber = computed(() => /\d/.test(props.password))

const strengthScore = computed(() => {
  let score = 0
  if (hasMinLength.value) score += 1
  if (hasUppercase.value) score += 1
  if (hasLowercase.value) score += 1
  if (hasNumber.value) score += 1
  if (props.password.length >= 8) score += 1
  return score
})

const strengthPercentage = computed(() => (strengthScore.value / 5) * 100)

const strengthText = computed(() => {
  if (strengthScore.value <= 1) return 'Très faible'
  if (strengthScore.value <= 2) return 'Faible'
  if (strengthScore.value <= 3) return 'Moyen'
  if (strengthScore.value <= 4) return 'Fort'
  return 'Très fort'
})

const strengthColor = computed(() => {
  if (strengthScore.value <= 1) return 'text-red-600'
  if (strengthScore.value <= 2) return 'text-orange-600'
  if (strengthScore.value <= 3) return 'text-yellow-600'
  if (strengthScore.value <= 4) return 'text-blue-600'
  return 'text-green-600'
})

const strengthBarColor = computed(() => {
  if (strengthScore.value <= 1) return 'bg-red-500'
  if (strengthScore.value <= 2) return 'bg-orange-500'
  if (strengthScore.value <= 3) return 'bg-yellow-500'
  if (strengthScore.value <= 4) return 'bg-blue-500'
  return 'bg-green-500'
})
</script>
