<template>
  <UCard>
    <div class="text-center space-y-3">
      <div class="text-3xl font-bold" :class="textColorClass">
        {{ progressPct }}%
      </div>
      <div class="text-sm text-neutral-600">{{ label }}</div>
      <UProgress
        :value="progressPct"
        :max="100"
        :color="progressColor"
        class="mt-2"
        :ui="{ progress: { background: 'bg-neutral-200' } }"
        :aria-label="`Savings progress: ${progressPct}% of target reached`"
        role="progressbar"
        :aria-valuenow="progressPct"
        aria-valuemin="0"
        aria-valuemax="100"
        :aria-valuetext="`${progressPct}% of savings target, ${statusText.toLowerCase()} status`" />
      <UBadge :color="badgeColor" variant="subtle" class="text-xs">
        {{ statusText }}
      </UBadge>
      <div v-if="showAmounts" class="text-xs text-neutral-500 space-y-1">
        <div>Current: €{{ currentSavings.toLocaleString() }}</div>
        <div>Target: €{{ targetAmount.toLocaleString() }}</div>
        <div v-if="shortfall > 0">Need: €{{ shortfall.toLocaleString() }}</div>
      </div>
      <p v-if="description" class="text-xs text-neutral-500 mt-2">
        {{ description }}
      </p>
    </div>
  </UCard>
</template>

<script setup lang="ts">
interface Props {
  currentSavings: number;
  savingsTargetMonths: number;
  monthlyBurn: number;
  label?: string;
  description?: string;
  showAmounts?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  label: "Savings Progress",
  showAmounts: true,
});

const { analyzeReserveProgress } = useReserveProgress();

const analysis = computed(() =>
  analyzeReserveProgress(
    props.currentSavings,
    props.savingsTargetMonths,
    props.monthlyBurn
  )
);

const progressPct = computed(() => analysis.value.progressPct);
const status = computed(() => analysis.value.status);
const targetAmount = computed(() => analysis.value.targetAmount);
const shortfall = computed(() => analysis.value.shortfall);
const currentSavings = computed(() => props.currentSavings);

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

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

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-neutral-600";
  }
});

const statusText = computed(() => {
  switch (status.value) {
    case "green":
      return "On Track";
    case "yellow":
      return "Building";
    case "red":
      return "Below Target";
    default:
      return "Unknown";
  }
});
</script>
