<template>
  <div class="form-validation">
    <div v-if="errors.length > 0" class="mt-2 space-y-1">
      <div 
        v-for="error in errors" 
        :key="error"
        class="flex items-center text-sm text-red-600"
      >
        <svg class="w-4 h-4 mr-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
        </svg>
        {{ error }}
      </div>
    </div>
    
    <div v-if="warnings.length > 0" class="mt-2 space-y-1">
      <div 
        v-for="warning in warnings" 
        :key="warning"
        class="flex items-center text-sm text-yellow-600"
      >
        <svg class="w-4 h-4 mr-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
        </svg>
        {{ warning }}
      </div>
    </div>
    
    <div v-if="successes.length > 0" class="mt-2 space-y-1">
      <div 
        v-for="success in successes" 
        :key="success"
        class="flex items-center text-sm text-green-600"
      >
        <svg class="w-4 h-4 mr-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
        {{ success }}
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  field: {
    type: String,
    required: true
  },
  value: {
    type: String,
    required: true
  },
  touched: {
    type: Boolean,
    default: false
  }
})

const errors = computed(() => {
  if (!props.touched) return []
  
  const fieldErrors = []
  
  switch (props.field) {
    case 'email':
      if (!props.value) {
        fieldErrors.push('L\'email est requis')
      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(props.value)) {
        fieldErrors.push('Format d\'email invalide')
      }
      break
      
    case 'username':
      if (!props.value) {
        fieldErrors.push('Le nom d\'utilisateur est requis')
      } else if (props.value.length < 3) {
        fieldErrors.push('Le nom d\'utilisateur doit contenir au moins 3 caractères')
      } else if (props.value.length > 50) {
        fieldErrors.push('Le nom d\'utilisateur ne peut pas dépasser 50 caractères')
      } else if (!/^[a-zA-Z0-9_-]+$/.test(props.value)) {
        fieldErrors.push('Le nom d\'utilisateur ne peut contenir que des lettres, chiffres, tirets et underscores')
      }
      break
      
    case 'full_name':
      if (!props.value) {
        fieldErrors.push('Le nom complet est requis')
      } else if (props.value.length < 2) {
        fieldErrors.push('Le nom complet doit contenir au moins 2 caractères')
      }
      break
      
    case 'password':
      if (!props.value) {
        fieldErrors.push('Le mot de passe est requis')
      } else if (props.value.length < 6) {
        fieldErrors.push('Le mot de passe doit contenir au moins 6 caractères')
      }
      break
      
    case 'password_confirm':
      // Cette validation sera gérée au niveau du composant parent
      break
  }
  
  return fieldErrors
})

const warnings = computed(() => {
  if (!props.touched) return []
  
  const fieldWarnings = []
  
  switch (props.field) {
    case 'username':
      if (props.value && props.value.length < 5) {
        fieldWarnings.push('Un nom d\'utilisateur plus long sera plus facile à retenir')
      }
      break
      
    case 'password':
      if (props.value && props.value.length < 8) {
        fieldWarnings.push('Un mot de passe de 8 caractères ou plus est recommandé')
      }
      break
  }
  
  return fieldWarnings
})

const successes = computed(() => {
  if (!props.touched) return []
  
  const fieldSuccesses = []
  
  switch (props.field) {
    case 'email':
      if (props.value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(props.value)) {
        fieldSuccesses.push('Format d\'email valide')
      }
      break
      
    case 'username':
      if (props.value && props.value.length >= 3 && /^[a-zA-Z0-9_-]+$/.test(props.value)) {
        fieldSuccesses.push('Nom d\'utilisateur valide')
      }
      break
      
    case 'full_name':
      if (props.value && props.value.length >= 2) {
        fieldSuccesses.push('Nom complet valide')
      }
      break
      
    case 'password':
      if (props.value && props.value.length >= 6) {
        fieldSuccesses.push('Longueur du mot de passe correcte')
      }
      break
  }
  
  return fieldSuccesses
})
</script>
