<template>
  <div class="flex items-center gap-2 w-full" role="progressbar" :aria-valuenow="percentage" aria-valuemin="0" aria-valuemax="100" :aria-label="`Progress: ${current} of ${total}`">
    <!-- Progress Bar Container -->
    <div class="relative h-1.5 rounded-lg flex-1 overflow-hidden" style="background-color: #333f18;">
      <!-- Filled Progress Bar -->
      <div
        class="absolute top-0 left-0 h-full bg-titan-yellow-400 rounded-lg transition-all duration-500 ease-out"
        :style="{ width: `${percentage}%` }"
      />
    </div>

    <!-- Progress Label -->
    <div class="flex items-baseline font-bold whitespace-nowrap leading-none flex-shrink-0">
      <span class="text-titan-yellow-400 text-2xl">{{ current }}</span>
      <span class="text-white text-base">/{{ total }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

/**
 * Props for the TitanProgressBar component
 */
interface Props {
  /**
   * Current progress value (numerator)
   */
  current: number
  /**
   * Total/maximum value (denominator)
   */
  total: number
}

const props = withDefaults(defineProps<Props>(), {
  current: 0,
  total: 1
})

/**
 * Calculate percentage, ensuring it doesn't exceed 100%
 * Logs a warning if current > total
 */
const percentage = computed(() => {
  if (props.total === 0) {
    console.warn('[TitanProgressBar] Total cannot be 0. Showing 0% progress.')
    return 0
  }

  const calculatedPercentage = (props.current / props.total) * 100

  if (calculatedPercentage > 100) {
    console.warn(`[TitanProgressBar] Current (${props.current}) exceeds total (${props.total}). Capping at 100%.`)
    return 100
  }

  if (calculatedPercentage < 0) {
    console.warn(`[TitanProgressBar] Current (${props.current}) is negative. Showing 0% progress.`)
    return 0
  }

  return calculatedPercentage
})
</script>
