<template>
  <UCard>
    <div class="text-center space-y-3">
      <div class="text-3xl font-bold" :class="textColorClass">
        {{ coveragePct }}%
      </div>
      <div class="text-sm text-gray-600">{{ label }}</div>
      <UProgress 
        :value="coveragePct" 
        :max="100" 
        :color="progressColor" 
        class="mt-2"
        :ui="{ progress: { background: 'bg-gray-200' } }"
        :aria-label="`Coverage progress: ${coveragePct}% of target hours funded`"
        role="progressbar"
        :aria-valuenow="coveragePct"
        aria-valuemin="0"
        aria-valuemax="100"
        :aria-valuetext="`${coveragePct}% coverage, ${statusText.toLowerCase()} funding level`"
      />
      <UBadge 
        :color="badgeColor" 
        variant="subtle" 
        class="text-xs"
      >
        {{ statusText }}
      </UBadge>
      <div v-if="showHours" class="text-xs text-gray-500 space-y-1">
        <div>Funded: {{ fundedHours }}h</div>
        <div>Target: {{ targetHours }}h</div>
        <div v-if="gapHours > 0">Gap: {{ gapHours }}h</div>
      </div>
      <p v-if="description" class="text-xs text-gray-500 mt-2">
        {{ description }}
      </p>
    </div>
  </UCard>
</template>

<script setup lang="ts">
interface Props {
  fundedPaidHours: number
  targetHours: number
  label?: string
  description?: string
  showHours?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  label: 'Coverage vs Capacity',
  showHours: true
})

const { calculateCoverage, getCoverageStatus, formatCoverage } = useCoverage()

const coveragePct = computed(() => 
  Math.round(calculateCoverage(props.fundedPaidHours, props.targetHours))
)

const status = computed(() => getCoverageStatus(coveragePct.value))

const fundedHours = computed(() => Math.round(props.fundedPaidHours))
const targetHours = computed(() => Math.round(props.targetHours))
const gapHours = computed(() => Math.max(0, targetHours.value - fundedHours.value))

const progressColor = computed(() => {
  switch (status.value) {
    case 'green': return 'green'
    case 'yellow': return 'yellow' 
    case 'red': return 'red'
    default: return 'gray'
  }
})

const badgeColor = computed(() => {
  switch (status.value) {
    case 'green': return 'green'
    case 'yellow': return 'yellow'
    case 'red': return 'red'
    default: return 'gray'
  }
})

const textColorClass = computed(() => {
  switch (status.value) {
    case 'green': return 'text-green-600'
    case 'yellow': return 'text-yellow-600'
    case 'red': return 'text-red-600'
    default: return 'text-gray-600'
  }
})

const statusText = computed(() => {
  switch (status.value) {
    case 'green': return 'Well Funded'
    case 'yellow': return 'Moderate'
    case 'red': return 'Underfunded'
    default: return 'Unknown'
  }
})
</script>
