<script setup lang="ts">
import type { Document } from '~/stores/documents'

const props = withDefaults(defineProps<{
  documents: Document[]
  loading?: boolean
}>(), {
  loading: false,
})

const typeLabel = (docType: string): string => {
  switch (docType) {
    case 'licence': return 'Licence'
    case 'engagement': return 'Engagement'
    case 'reglement': return 'Reglement'
    case 'constitution': return 'Constitution'
    default: return docType
  }
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('fr-FR', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  })
}
</script>

<template>
  <!-- Loading state -->
  <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <USkeleton v-for="i in 6" :key="i" class="h-48 w-full" />
  </div>

  <!-- Empty state -->
  <UCard v-else-if="documents.length === 0">
    <div class="text-center py-8">
      <UIcon name="i-lucide-book-open" class="text-4xl text-gray-400 mb-3" />
      <p class="text-gray-500">Aucun document de reference pour le moment</p>
    </div>
  </UCard>

  <!-- Document grid -->
  <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <UCard
      v-for="doc in documents"
      :key="doc.id"
      class="cursor-pointer hover:ring-2 hover:ring-primary/50 transition-all"
      @click="navigateTo(`/documents/${doc.slug}`)"
    >
      <div class="space-y-3">
        <!-- Header -->
        <div class="flex items-start justify-between">
          <h3 class="font-semibold text-gray-900 dark:text-white text-sm leading-tight">
            {{ doc.title }}
          </h3>
          <StatusBadge :status="doc.status" type="document" />
        </div>

        <!-- Type + Version -->
        <div class="flex items-center gap-2">
          <UBadge variant="subtle" color="primary" size="xs">
            {{ typeLabel(doc.doc_type) }}
          </UBadge>
          <span class="text-xs text-gray-500 font-mono">v{{ doc.version }}</span>
        </div>

        <!-- Description -->
        <p
          v-if="doc.description"
          class="text-xs text-gray-600 dark:text-gray-400 line-clamp-2"
        >
          {{ doc.description }}
        </p>

        <!-- Footer -->
        <div class="flex items-center justify-between pt-2 border-t border-gray-100 dark:border-gray-800">
          <div class="flex items-center gap-1 text-xs text-gray-500">
            <UIcon name="i-lucide-list" class="text-sm" />
            <span>{{ doc.items_count }} items</span>
          </div>
          <span class="text-xs text-gray-400">{{ formatDate(doc.updated_at) }}</span>
        </div>
      </div>
    </UCard>
  </div>
</template>
