<script setup lang="ts">
defineProps<{
  status: string
  totalSections: number
  doneSections: number
  totalAc: number
  doneAc: number
  isStale: boolean
  staleSince?: string | null
}>()

function progressPct(done: number, total: number): number {
  return total > 0 ? Math.round((done / total) * 100) : 0
}
</script>

<template>
  <div class="flex items-center gap-3 text-xs">
    <!-- Stale indicator -->
    <span
      v-if="isStale && status !== 'deprecated'"
      class="inline-flex items-center gap-1 text-amber-600 dark:text-amber-400"
      :title="staleSince ? `Stale since ${staleSince}` : 'Stale'"
    >
      <span class="w-1.5 h-1.5 rounded-full bg-amber-500" />
      Stale
    </span>

    <!-- Done: checkmark + "Complete" -->
    <template v-if="status === 'done'">
      <span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
        <svg class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Complete
      </span>
      <span v-if="totalAc > 0" class="text-slate-400">{{ totalAc }} ACs</span>
    </template>

    <!-- In Progress: blue bar + counts -->
    <template v-else-if="status === 'in_progress'">
      <span class="text-slate-400">{{ doneSections }}/{{ totalSections }} sections</span>
      <span class="text-slate-400">{{ doneAc }}/{{ totalAc }} ACs</span>
      <div v-if="totalSections > 0" class="flex-1 max-w-32">
        <div class="h-1.5 bg-border-light dark:bg-slate-700 rounded-full overflow-hidden">
          <div class="h-full bg-blue-500 dark:bg-blue-400 rounded-full transition-all" :style="{ width: progressPct(doneSections, totalSections) + '%' }" />
        </div>
      </div>
    </template>

    <!-- Blocked: red bar + counts -->
    <template v-else-if="status === 'blocked'">
      <span class="text-slate-400">{{ doneSections }}/{{ totalSections }} sections</span>
      <span class="text-slate-400">{{ doneAc }}/{{ totalAc }} ACs</span>
      <div v-if="totalSections > 0" class="flex-1 max-w-32">
        <div class="h-1.5 bg-border-light dark:bg-slate-700 rounded-full overflow-hidden">
          <div class="h-full bg-red-500 dark:bg-red-400 rounded-full transition-all" :style="{ width: progressPct(doneSections, totalSections) + '%' }" />
        </div>
      </div>
    </template>

    <!-- Todo / Draft: quiet scope counts only -->
    <template v-else-if="status === 'todo' || status === 'draft'">
      <span v-if="totalSections > 0" class="text-slate-400">{{ totalSections }} sections</span>
      <span v-if="totalAc > 0" class="text-slate-400">{{ totalAc }} ACs</span>
    </template>

    <!-- Deprecated: nothing extra -->
    <template v-else-if="status === 'deprecated'" />

    <!-- Unknown status: show scope counts as fallback -->
    <template v-else>
      <span v-if="totalSections > 0" class="text-slate-400">{{ doneSections }}/{{ totalSections }} sections</span>
      <span v-if="totalAc > 0" class="text-slate-400">{{ doneAc }}/{{ totalAc }} ACs</span>
    </template>
  </div>
</template>
