<script setup lang="ts">
/**
 * Card component for displaying a mandate in a list.
 *
 * Shows title, type badge, status badge, mandatee, date range.
 * Navigates to the mandate detail page on click.
 */
import type { Mandate } from '~/stores/mandates'

const props = defineProps<{
  mandate: Mandate
}>()

const typeLabel = (mandateType: string) => {
  switch (mandateType) {
    case 'techcomm': return 'Comite technique'
    case 'smith': return 'Forgeron'
    case 'custom': return 'Personnalise'
    default: return mandateType
  }
}

function formatDate(dateStr: string | null): string {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleDateString('fr-FR', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  })
}

function navigate() {
  navigateTo(`/mandates/${props.mandate.id}`)
}
</script>

<template>
  <UCard
    class="cursor-pointer hover:ring-2 hover:ring-primary/50 hover:shadow-md transition-all"
    @click="navigate"
  >
    <div class="space-y-3">
      <div class="flex items-start justify-between">
        <div class="flex items-center gap-2">
          <UIcon name="i-lucide-user-check" class="text-gray-400" />
          <h3 class="font-semibold text-gray-900 dark:text-white">
            {{ mandate.title }}
          </h3>
        </div>
        <StatusBadge :status="mandate.status" type="mandate" />
      </div>

      <p v-if="mandate.description" class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
        {{ mandate.description }}
      </p>

      <div class="flex items-center gap-3 flex-wrap">
        <UBadge variant="subtle" color="primary" size="xs">
          {{ typeLabel(mandate.mandate_type) }}
        </UBadge>
        <span class="text-xs text-gray-500">
          {{ mandate.steps.length }} etape(s)
        </span>
        <span v-if="mandate.mandatee_id" class="text-xs text-gray-500 flex items-center gap-1">
          <UIcon name="i-lucide-user" class="text-xs" />
          {{ mandate.mandatee_id.slice(0, 8) }}...
        </span>
      </div>

      <div class="grid grid-cols-2 gap-2 text-xs text-gray-500">
        <div>
          <span class="block font-medium">Debut</span>
          {{ formatDate(mandate.starts_at) }}
        </div>
        <div>
          <span class="block font-medium">Fin</span>
          {{ formatDate(mandate.ends_at) }}
        </div>
      </div>
    </div>
  </UCard>
</template>
