<template>
  <UTooltip :text="tooltipText">
    <UBadge
      :color="badgeColor"
      variant="solid"
      size="sm"
      class="font-medium"
    >
      <UIcon :name="iconName" class="w-3 h-3 mr-1" />
      {{ displayText }}
    </UBadge>
  </UTooltip>
</template>

<script setup lang="ts">
interface Props {
  coverageMinPct?: number
  coverageTargetPct?: number
  memberName?: string
  warnIfUnder?: number
}

const props = withDefaults(defineProps<Props>(), {
  warnIfUnder: 100,
  memberName: 'member'
})

const coverage = computed(() => props.coverageMinPct || 0)

const badgeColor = computed(() => {
  if (coverage.value >= 100) return 'success'
  if (coverage.value >= 80) return 'warning'
  return 'error'
})

const iconName = computed(() => {
  if (coverage.value >= 100) return 'i-heroicons-check-circle'
  if (coverage.value >= 80) return 'i-heroicons-exclamation-triangle'
  return 'i-heroicons-x-circle'
})

const displayText = computed(() => {
  if (!props.coverageMinPct) return 'No needs set'
  return `${Math.round(coverage.value)}% coverage`
})

const tooltipText = computed(() => {
  if (!props.coverageMinPct) {
    return `${props.memberName} hasn't set their minimum needs yet`
  }
  
  const percent = Math.round(coverage.value)
  const status = coverage.value >= 100 ? 'meets' : 'covers'
  
  return `${status} ${percent}% of ${props.memberName}'s minimum needs (incl. external income)`
})
</script>