<template>
  <div v-if="password" class="mt-2 space-y-1">
    <!-- Strength bar: 4 segments -->
    <div class="flex gap-1">
      <div
        v-for="i in 4"
        :key="i"
        class="h-1 flex-1 rounded transition-colors duration-200"
        :class="i <= strength ? segmentColor : 'bg-gray-200'"
      />
    </div>
    <!-- Label -->
    <div class="flex justify-end">
      <span class="text-xs font-semibold" :class="labelColor">{{ label }}</span>
    </div>
  </div>
</template>

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

const props = defineProps({
  password: {
    type: String,
    default: '',
  },
})

/**
 * Strength score 0–4:
 *   +1 if length >= 12
 *   +1 if contains uppercase
 *   +1 if contains digit
 *   +1 if contains special character
 * Matches backend AUTH-01 rules.
 */
const strength = computed(() => {
  const p = props.password
  if (!p) return 0
  let score = 0
  if (p.length >= 12) score++
  if (/[A-Z]/.test(p)) score++
  if (/[0-9]/.test(p)) score++
  if (/[^A-Za-z0-9]/.test(p)) score++
  return score
})

const segmentColor = computed(() => {
  if (strength.value === 1) return 'bg-red-500'
  if (strength.value === 2) return 'bg-amber-500'
  if (strength.value === 3) return 'bg-amber-400'
  return 'bg-green-500'
})

const labelColor = computed(() => {
  if (strength.value === 1) return 'text-red-500'
  if (strength.value === 2) return 'text-amber-500'
  if (strength.value === 3) return 'text-amber-400'
  return 'text-green-500'
})

const label = computed(() => {
  if (strength.value === 1) return 'Too weak'
  if (strength.value === 2) return 'Weak'
  if (strength.value === 3) return 'Fair'
  return 'Strong'
})
</script>
