<template>
  <div v-if="documents.length" class="space-y-2">
    <div
      v-for="document in documents"
      :key="document.id || document.path || document.name"
      class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
    >
      <div class="flex items-center gap-3 text-sm">
        <div
          class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
          :class="documentThumbnailClass(document)"
        >
          <img
            v-if="isImageDocument(document) && (document.fileUrl || document.path)"
            :src="document.fileUrl || document.path"
            class="h-full w-full object-cover"
            :alt="`Aperçu de ${document.name}`"
          >
          <iframe
            v-else-if="shouldInlinePdf(document)"
            :src="documentPreviewSrc(document)"
            class="h-full w-full border-0 bg-white"
            title="Aperçu PDF"
          />
          <component
            v-else
            :is="documentIcon(document).component"
            class="h-6 w-6"
            :class="documentIcon(document).colorClass"
            aria-hidden="true"
          />
        </div>
        <div>
          <div class="font-medium flex items-center gap-2">
            {{ document.name }}
            <span class="badge badge-sm badge-outline">{{ getDocumentTypeLabel(document.type || 'documentation') }}</span>
          </div>
          <div class="text-xs text-base-content/70">
            {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
          </div>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <button
          v-if="canEdit"
          type="button"
          class="btn btn-ghost btn-xs"
          title="Modifier"
          @click="$emit('edit', document)"
        >
          Modifier
        </button>
        <button
          type="button"
          class="btn btn-ghost btn-xs"
          :disabled="!canPreviewDocument(document)"
          :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
          @click="$emit('preview', document)"
        >
          Consulter
        </button>
        <button
          type="button"
          class="btn btn-ghost btn-xs"
          @click="downloadDocument(document)"
        >
          Télécharger
        </button>
        <button
          v-if="canDelete"
          type="button"
          class="btn btn-error btn-xs"
          :disabled="deleteDisabled"
          @click="$emit('delete', document.id)"
        >
          Supprimer
        </button>
      </div>
    </div>
  </div>
  <p v-else class="text-xs text-base-content/70">
    {{ emptyText }}
  </p>
</template>

<script setup lang="ts">
import { getDocumentTypeLabel } from '~/shared/documentTypes'
import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
import {
  documentIcon,
  formatSize,
  shouldInlinePdf,
  documentPreviewSrc,
  documentThumbnailClass,
  downloadDocument,
} from '~/shared/utils/documentDisplayUtils'

import type { Document } from '~/composables/useDocuments'

withDefaults(defineProps<{
  documents: Document[]
  canDelete?: boolean
  canEdit?: boolean
  deleteDisabled?: boolean
  emptyText?: string
}>(), {
  canDelete: false,
  canEdit: false,
  deleteDisabled: false,
  emptyText: 'Aucun document.',
})

defineEmits<{
  (e: 'preview', document: Document): void
  (e: 'delete', documentId: string): void
  (e: 'edit', document: Document): void
}>()
</script>
