<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 {
  coveragePct?: number;
  memberName?: string;
  warnIfUnder?: number;
}

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

const coverage = computed(() => props.coveragePct || 0);

const badgeColor = computed(() => {
  if (!props.coveragePct) return "neutral";
  if (coverage.value >= 100) return "success";
  if (coverage.value >= 80) return "warning";
  return "error";
});

const iconName = computed(() => {
  if (!props.coveragePct) return "i-heroicons-cog-6-tooth";
  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.coveragePct) return "Set needs";
  if (coverage.value === 0) return "No coverage";
  return `${Math.round(coverage.value)}% covered`;
});

const tooltipText = computed(() => {
  if (!props.coveragePct) {
    return `Click 'Set minimum needs' to enable coverage tracking for ${props.memberName}`;
  }

  const percent = Math.round(coverage.value);
  const status = coverage.value >= 100 ? "meets" : "covers";

  return `Co-op pay ${status} ${percent}% of ${props.memberName}'s minimum needs`;
});
</script>
