decision/frontend/app/pages/documents/[slug].vue

<script setup lang="ts">
const route = useRoute()
const documents = useDocumentsStore()

const slug = computed(() => route.params.slug as string)

onMounted(async () => {
  await documents.fetchBySlug(slug.value)
})

onUnmounted(() => {
  documents.clearCurrent()
})

watch(slug, async (newSlug) => {
  if (newSlug) {
    await documents.fetchBySlug(newSlug)
  }
})

const statusColor = (status: string) => {
  switch (status) {
    case 'active': return 'success'
    case 'draft': return 'warning'
    case 'archived': return 'neutral'
    default: return 'neutral'
  }
}

const statusLabel = (status: string) => {
  switch (status) {
    case 'active': return 'Actif'
    case 'draft': return 'Brouillon'
    case 'archived': return 'Archive'
    default: return status
  }
}

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

const itemTypeLabel = (itemType: string) => {
  switch (itemType) {
    case 'clause': return 'Clause'
    case 'rule': return 'Regle'
    case 'verification': return 'Verification'
    case 'preamble': return 'Preambule'
    case 'section': return 'Section'
    default: return itemType
  }
}

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

<template>
  <div class="space-y-6">
    <!-- Back link -->
    <div>
      <UButton
        to="/documents"
        variant="ghost"
        color="neutral"
        icon="i-lucide-arrow-left"
        label="Retour aux documents"
        size="sm"
      />
    </div>

    <!-- Loading state -->
    <template v-if="documents.loading">
      <div class="space-y-4">
        <USkeleton class="h-8 w-96" />
        <USkeleton class="h-4 w-64" />
        <div class="space-y-3 mt-8">
          <USkeleton v-for="i in 5" :key="i" class="h-24 w-full" />
        </div>
      </div>
    </template>

    <!-- Error state -->
    <template v-else-if="documents.error">
      <UCard>
        <div class="flex items-center gap-3 text-red-500">
          <UIcon name="i-lucide-alert-circle" class="text-xl" />
          <p>{{ documents.error }}</p>
        </div>
      </UCard>
    </template>

    <!-- Document detail -->
    <template v-else-if="documents.current">
      <!-- Header -->
      <div>
        <div class="flex items-start justify-between">
          <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
              {{ documents.current.title }}
            </h1>
            <div class="flex items-center gap-3 mt-2">
              <UBadge variant="subtle" color="primary">
                {{ typeLabel(documents.current.doc_type) }}
              </UBadge>
              <UBadge :color="statusColor(documents.current.status)" variant="subtle">
                {{ statusLabel(documents.current.status) }}
              </UBadge>
              <span class="text-sm text-gray-500 font-mono">
                v{{ documents.current.version }}
              </span>
            </div>
          </div>
        </div>

        <!-- Description -->
        <p v-if="documents.current.description" class="mt-4 text-gray-600 dark:text-gray-400">
          {{ documents.current.description }}
        </p>
      </div>

      <!-- Metadata -->
      <UCard>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
          <div>
            <p class="text-gray-500">Cree le</p>
            <p class="font-medium text-gray-900 dark:text-white">
              {{ formatDate(documents.current.created_at) }}
            </p>
          </div>
          <div>
            <p class="text-gray-500">Mis a jour le</p>
            <p class="font-medium text-gray-900 dark:text-white">
              {{ formatDate(documents.current.updated_at) }}
            </p>
          </div>
          <div>
            <p class="text-gray-500">Nombre d'items</p>
            <p class="font-medium text-gray-900 dark:text-white">
              {{ documents.current.items_count }}
            </p>
          </div>
          <div>
            <p class="text-gray-500">Ancrage IPFS</p>
            <p class="font-medium text-gray-900 dark:text-white">
              <template v-if="documents.current.ipfs_cid">
                <span class="font-mono text-xs">{{ documents.current.ipfs_cid.slice(0, 16) }}...</span>
              </template>
              <template v-else>
                <span class="text-gray-400">Non ancre</span>
              </template>
            </p>
          </div>
        </div>
      </UCard>

      <!-- Document items -->
      <div>
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          Contenu du document ({{ documents.items.length }} items)
        </h2>

        <div v-if="documents.items.length === 0" class="text-center py-8">
          <UIcon name="i-lucide-file-plus" class="text-4xl text-gray-400 mb-3" />
          <p class="text-gray-500">Aucun item dans ce document</p>
        </div>

        <div v-else class="space-y-4">
          <UCard
            v-for="item in documents.items"
            :key="item.id"
          >
            <div class="space-y-3">
              <!-- Item header -->
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <span class="text-sm font-mono font-bold text-primary">
                    {{ item.position }}
                  </span>
                  <UBadge variant="subtle" color="neutral" size="xs">
                    {{ itemTypeLabel(item.item_type) }}
                  </UBadge>
                  <span v-if="item.title" class="text-sm font-semibold text-gray-900 dark:text-white">
                    {{ item.title }}
                  </span>
                </div>
                <div class="flex items-center gap-2">
                  <UBadge
                    v-if="item.voting_protocol_id"
                    color="info"
                    variant="subtle"
                    size="xs"
                  >
                    Sous vote
                  </UBadge>
                  <UBadge
                    v-else
                    color="neutral"
                    variant="subtle"
                    size="xs"
                  >
                    Pas de vote
                  </UBadge>
                </div>
              </div>

              <!-- Item text -->
              <div class="pl-8">
                <p class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap leading-relaxed">
                  {{ item.current_text }}
                </p>
              </div>
            </div>
          </UCard>
        </div>
      </div>
    </template>
  </div>
</template>