<template>
  <UCard>
    <div class="text-center space-y-3">
      <div class="text-3xl font-bold" :class="textColorClass">
        {{ formattedValue }}
      </div>
      <div class="text-sm text-gray-600">{{ label }}</div>
      <UProgress 
        :value="progressValue" 
        :max="maxValue" 
        :color="progressColor" 
        class="mt-2" 
        :ui="{ progress: { background: 'bg-gray-200' } }"
        :aria-label="`Runway progress: ${formattedValue} out of ${maxValue} months maximum`"
        role="progressbar"
        :aria-valuenow="progressValue"
        :aria-valuemin="0"
        :aria-valuemax="maxValue"
        :aria-valuetext="`${formattedValue} runway, ${statusText.toLowerCase()} status`"
      />
      <UBadge 
        :color="badgeColor" 
        variant="subtle" 
        class="text-xs"
      >
        {{ statusText }}
      </UBadge>
      <p v-if="description" class="text-xs text-gray-500 mt-2">
        {{ description }}
      </p>
    </div>
  </UCard>
</template>

<script setup lang="ts">
interface Props {
  months: number
  label?: string
  description?: string
  maxMonths?: number
}

const props = withDefaults(defineProps<Props>(), {
  label: 'Runway',
  maxMonths: 12
})

const { formatRunway, getRunwayStatus } = useRunway()

const formattedValue = computed(() => formatRunway(props.months))
const status = computed(() => getRunwayStatus(props.months))

const progressValue = computed(() => Math.min(props.months, props.maxMonths))
const maxValue = computed(() => props.maxMonths)

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 'Healthy'
    case 'yellow': return 'Caution'
    case 'red': return 'Critical'
    default: return 'Unknown'
  }
})
</script>
