<!-- front-end/app/components/EditaisTable.vue -->
<script setup lang="ts">
interface ApiEdital {
  ID: string
  Numero: string
  Orgao: string
  Modalidade: string
  Objeto: string
  Plataforma: string
  ValorEstimado: number
  DataPublicacao: string
  DataAbertura: string
  Status: string
}

defineProps<{ editais: ApiEdital[] }>()

const MODALIDADE_LABEL: Record<string, string> = {
  pregao_eletronico:  'Pregão Eletrônico',
  pregao_presencial:  'Pregão Presencial',
  concorrencia:       'Concorrência',
  dispensa:           'Dispensa',
  inexigibilidade:    'Inexigibilidade',
}

const STATUS_CFG: Record<string, { label: string; color: string; bg: string }> = {
  em_analise:          { label: 'Mapeamento',           color: '#0284c7', bg: '#eff6ff' },
  elaborando_proposta: { label: 'Termo de Referência',  color: '#7c3aed', bg: '#faf5ff' },
  edital_publicado:    { label: 'Edital Publicado',     color: '#ea580c', bg: '#fff7ed' },
  fase_lances:         { label: 'Fase de Lances',       color: '#3b82f6', bg: '#eff6ff' },
  habilitacao:         { label: 'Habilitação',          color: '#d97706', bg: '#fef3c7' },
  recurso:             { label: 'Recursos',             color: '#d97706', bg: '#fffbeb' },
  adjudicado:          { label: 'Adjudicado',           color: '#059669', bg: '#ecfdf5' },
  contrato:            { label: 'Contrato',             color: '#16a34a', bg: '#f0fdf4' },
  vencida:             { label: 'Vencida',              color: '#16a34a', bg: '#f0fdf4' },
  perdida:             { label: 'Perdida',              color: '#dc2626', bg: '#fef2f2' },
  deserta:             { label: 'Deserta/Fracassada',   color: '#64748b', bg: '#f8fafc' },
}

function formatDate(iso: string): string {
  if (!iso) return '—'
  const [y, m, d] = iso.split('T')[0].split('-')
  return `${d}/${m}/${y}`
}

function formatBRL(value: number): string {
  return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL', maximumFractionDigits: 0 }).format(value)
}
</script>

<template>
  <table class="tbl">
    <thead>
      <tr>
        <th>Nº Edital</th>
        <th>Órgão</th>
        <th>Objeto</th>
        <th>Modalidade</th>
        <th>Valor Est.</th>
        <th>Abertura</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr v-if="!editais || editais.length === 0">
        <td colspan="7" class="empty">Nenhum edital encontrado.</td>
      </tr>
      <tr v-for="e in editais" :key="e.ID">
        <td class="numero">{{ e.Numero }}</td>
        <td>{{ e.Orgao }}</td>
        <td class="objeto">{{ e.Objeto }}</td>
        <td>{{ MODALIDADE_LABEL[e.Modalidade] ?? e.Modalidade }}</td>
        <td>{{ formatBRL(e.ValorEstimado) }}</td>
        <td>{{ formatDate(e.DataAbertura) }}</td>
        <td>
          <span
            v-if="STATUS_CFG[e.Status]"
            class="badge"
            :style="{ background: STATUS_CFG[e.Status].bg, color: STATUS_CFG[e.Status].color }"
          >{{ STATUS_CFG[e.Status].label }}</span>
          <span v-else class="badge">{{ e.Status }}</span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead tr { border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.tbl th { padding: 10px 14px; text-align: left; font-weight: 600; color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.tbl td { padding: 11px 14px; color: #1e293b; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: #f8fafc; }
.numero { font-weight: 600; white-space: nowrap; }
.objeto { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { text-align: center; color: #94a3b8; padding: 40px; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
</style>
