<!-- front-end/app/pages/pipeline/index.vue -->
<script setup lang="ts">
import { editais } from '~/data/mock/editais'
import { PIPELINE_ETAPAS } from '~/types'

const statusParaEtapa: Record<string, number> = {
  em_analise: 1,
  elaborando_proposta: 3,
  impugnacao: 2,
  participando: 4,
  recurso: 6,
  vencida: 8,
  perdida: 8,
  deserta: 8,
}

const colunas = computed(() =>
  PIPELINE_ETAPAS.map((etapa, idx) => ({
    etapa,
    numero: idx + 1,
    cards: editais.filter(e => statusParaEtapa[e.status] === idx + 1),
  }))
)

const modalidadeAbrev: Record<string, string> = {
  pregao_eletronico: 'PE',
  pregao_presencial: 'PP',
  concorrencia: 'CC',
  dispensa: 'DI',
  inexigibilidade: 'IN',
}
</script>

<template>
  <div class="page">
    <AppTopbar title="Kanban de Processos" breadcrumb="Pipeline" />
    <div class="kanban-scroll">
      <div class="kanban-board">
        <div v-for="col in colunas" :key="col.numero" class="kanban-col">
          <div class="col-header">
            <span class="col-num">{{ col.numero }}</span>
            <span class="col-title">{{ col.etapa }}</span>
            <UBadge :label="String(col.cards.length)" variant="soft" color="neutral" size="xs" />
          </div>
          <div class="col-cards">
            <div v-for="card in col.cards" :key="card.id" class="kanban-card">
              <div class="card-top">
                <span class="card-num">{{ card.numero }}</span>
                <StatusChip :status="card.status" />
              </div>
              <p class="card-objeto">{{ card.objeto }}</p>
              <p class="card-orgao">{{ card.orgao }}</p>
              <div class="card-bottom">
                <span class="card-modal">{{ modalidadeAbrev[card.modalidade] }}</span>
                <span class="card-valor">
                  {{ new Intl.NumberFormat('pt-BR', { notation: 'compact', currency: 'BRL', style: 'currency' }).format(card.valorEstimado) }}
                </span>
              </div>
            </div>
            <p v-if="!col.cards.length" class="col-empty">Sem editais</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page { display: flex; flex-direction: column; height: 100vh; }
.kanban-scroll { flex: 1; overflow-x: auto; padding: 20px 22px; }
.kanban-board { display: flex; gap: 12px; min-width: max-content; align-items: flex-start; }
.kanban-col { width: 220px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; flex-shrink: 0; }
.col-header { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
.col-num { width: 20px; height: 20px; background: #667eea; color: white; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.col-title { font-size: 11.5px; font-weight: 600; color: #374151; flex: 1; }
.col-cards { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.kanban-card { background: white; border-radius: 8px; padding: 10px 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.card-num { font-size: 11px; font-weight: 700; color: #0f172a; }
.card-objeto { font-size: 12px; color: #374151; font-weight: 500; margin-bottom: 3px; line-height: 1.3; }
.card-orgao { font-size: 10.5px; color: #94a3b8; margin-bottom: 8px; }
.card-bottom { display: flex; justify-content: space-between; align-items: center; }
.card-modal { font-size: 10px; font-weight: 600; background: #f1f5f9; color: #64748b; padding: 2px 6px; border-radius: 4px; }
.card-valor { font-size: 11px; font-weight: 700; color: #667eea; }
.col-empty { font-size: 11px; color: #94a3b8; text-align: center; padding: 16px 0; }
</style>
