<!-- front-end/app/pages/gestao/prazos.vue -->
<script setup lang="ts">
import { prazos } from '~/data/mock/prazos'

const hoje = new Date()

const urgenciaConfig = {
  critico: { label: 'Crítico — Hoje',  color: '#dc2626', bg: '#fef2f2' },
  urgente: { label: 'Urgente',          color: '#d97706', bg: '#fffbeb' },
  normal:  { label: 'Normal',           color: '#667eea', bg: '#eff6ff' },
}

function diasRestantes(data: Date) {
  const diff = Math.ceil((data.getTime() - hoje.getTime()) / (1000 * 60 * 60 * 24))
  if (diff <= 0) return 'Hoje'
  if (diff === 1) return 'Amanhã'
  return `${diff} dias`
}
</script>

<template>
  <div class="page">
    <AppTopbar title="Prazos" breadcrumb="Gestão · Prazos" />
    <div class="content">
      <div class="card">
        <div v-for="prazo in prazos" :key="prazo.id" class="prazo-row">
          <div class="prazo-dot" :style="{ background: urgenciaConfig[prazo.urgencia].color }" />
          <div class="prazo-info">
            <p class="prazo-titulo">{{ prazo.titulo }}</p>
            <p class="prazo-desc">{{ prazo.descricao }}</p>
          </div>
          <div class="prazo-right">
            <span class="prazo-badge" :style="{ color: urgenciaConfig[prazo.urgencia].color, background: urgenciaConfig[prazo.urgencia].bg }">
              {{ urgenciaConfig[prazo.urgencia].label }}
            </span>
            <p class="prazo-data">{{ prazo.dataLimite.toLocaleDateString('pt-BR') }} · {{ diasRestantes(prazo.dataLimite) }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page { display: flex; flex-direction: column; height: 100vh; }
.content { padding: 20px 22px; flex: 1; overflow-y: auto; }
.card { background: white; border-radius: 11px; border: 1px solid #e2e8f0; overflow: hidden; }
.prazo-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f8fafc; }
.prazo-row:last-child { border-bottom: none; }
.prazo-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.prazo-info { flex: 1; }
.prazo-titulo { font-size: 13px; font-weight: 600; color: #0f172a; }
.prazo-desc { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.prazo-right { text-align: right; flex-shrink: 0; }
.prazo-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; display: inline-block; margin-bottom: 4px; }
.prazo-data { font-size: 11px; color: #64748b; }
</style>
