<script setup lang="ts">
import { PIPELINE_ETAPAS } from '~/types'

defineProps<{
  contagemPorEtapa: Record<number, number>
  etapaAtual?: number
}>()
</script>

<template>
  <div class="pipeline">
    <div
      v-for="(etapa, idx) in PIPELINE_ETAPAS"
      :key="idx"
      class="pipe-step"
      :class="{
        done: etapaAtual !== undefined && idx + 1 < etapaAtual,
        active: etapaAtual === idx + 1,
      }"
    >
      <div class="pipe-circle">
        <UIcon v-if="etapaAtual !== undefined && idx + 1 < etapaAtual" name="i-heroicons-check" class="w-3 h-3" />
        <span v-else>{{ idx + 1 }}</span>
      </div>
      <p class="pipe-label">{{ etapa }}</p>
      <p class="pipe-count">{{ contagemPorEtapa[idx + 1] ?? 0 }} editais</p>
    </div>
  </div>
</template>

<style scoped>
.pipeline { display: flex; gap: 0; overflow-x: auto; padding: 14px 0; }
.pipe-step {
  flex: 1; min-width: 80px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
}
.pipe-step:not(:last-child)::after {
  content: ''; position: absolute; top: 13px; left: 60%; right: -40%;
  height: 2px; background: #e2e8f0; z-index: 0;
}
.pipe-step.done:not(:last-child)::after { background: #667eea; }
.pipe-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: #f1f5f9; border: 2px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #94a3b8; position: relative; z-index: 1;
}
.pipe-step.done .pipe-circle { background: #667eea; border-color: #667eea; color: white; }
.pipe-step.active .pipe-circle { background: white; border-color: #667eea; color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
.pipe-label { font-size: 9.5px; color: #94a3b8; line-height: 1.2; }
.pipe-step.done .pipe-label, .pipe-step.active .pipe-label { color: #667eea; font-weight: 600; }
.pipe-count { font-size: 9px; color: #94a3b8; font-weight: 600; }
</style>
