Inventory_frontend/app/components/DocumentPreviewModal.vue

<template>
  <teleport to="body">
    <div
      v-if="visible"
      class="fixed inset-0 z-[1200] flex items-center justify-center bg-black/60 backdrop-blur-sm px-4 py-6"
      @click.self="close"
    >
      <div class="w-full max-w-[1600px] h-full max-h-[94vh] bg-base-100 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
        <header class="flex items-start justify-between gap-4 p-6 border-b border-base-200">
          <div class="min-w-0">
            <h3 class="font-bold text-xl truncate">
              Prévisualisation
              <span v-if="navTotal > 1" class="text-base font-normal text-gray-500">
                {{ activeIndex + 1 }} / {{ navTotal }}
              </span>
            </h3>
            <p class="text-sm text-gray-500 truncate">
              {{ activeDoc?.name || activeDoc?.filename }}<span v-if="documentDescription"> &bull; {{ documentDescription }}</span>
            </p>
          </div>
          <button type="button" class="btn btn-ghost btn-sm shrink-0" @click="close">
            ✕
          </button>
        </header>

        <section class="flex-1 bg-base-200/40 px-6 py-5 overflow-hidden relative">
          <button
            v-if="hasPrev"
            type="button"
            class="absolute left-8 top-1/2 -translate-y-1/2 z-10 btn btn-circle bg-base-100/80 hover:bg-base-100 shadow-lg border-base-300"
            title="Document précédent (←)"
            @click="goToPrev"
          >
            ❮
          </button>

          <button
            v-if="hasNext"
            type="button"
            class="absolute right-8 top-1/2 -translate-y-1/2 z-10 btn btn-circle bg-base-100/80 hover:bg-base-100 shadow-lg border-base-300"
            title="Document suivant (→)"
            @click="goToNext"
          >
            ❯
          </button>

          <div class="h-full w-full rounded-xl border border-base-300 bg-base-100 flex items-center justify-center overflow-hidden">
            <template v-if="previewType === 'image'">
              <img :src="documentSrc" alt="preview" class="max-h-full max-w-full object-contain">
            </template>

            <template v-else-if="previewType === 'pdf'">
              <iframe
                :src="documentSrc"
                class="w-full h-full bg-white"
                frameborder="0"
                title="Aperçu PDF"
              />
            </template>

            <template v-else-if="previewType === 'audio'">
              <audio :src="documentSrc" controls class="w-full" />
            </template>

            <template v-else-if="previewType === 'video'">
              <video :src="documentSrc" controls class="w-full h-full bg-black" />
            </template>

            <template v-else-if="previewType === 'text'">
              <div class="w-full h-full overflow-auto">
                <div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-gray-500">
                  <span class="loading loading-spinner loading-md mr-2" />
                  Chargement du document...
                </div>
                <div v-else-if="textError" class="alert alert-error text-sm">
                  {{ textError }}
                </div>
                <pre v-else class="bg-base-100 border border-base-300 rounded-lg p-4 whitespace-pre-wrap">
{{ textContent }}
                </pre>
              </div>
            </template>

            <template v-else>
              <div class="text-sm text-gray-500 text-center px-6">
                Prévisualisation non disponible pour ce type de document.
              </div>
            </template>
          </div>
        </section>

        <footer class="border-t border-base-200 px-6 py-4 flex flex-wrap gap-2 justify-end bg-base-100">
          <button type="button" class="btn" @click="close">
            Fermer
          </button>
          <button type="button" class="btn btn-primary" @click="download">
            Télécharger
          </button>
        </footer>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { ref, computed, watch, onUnmounted } from 'vue'
import { getPreviewType, describeDocument, canPreviewDocument } from '~/utils/documentPreview'

const props = defineProps({
  document: {
    type: Object,
    default: null,
  },
  visible: {
    type: Boolean,
    default: false,
  },
  documents: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['close'])

// --- Carousel navigation ---

const previewableDocuments = computed(() => {
  if (!props.documents?.length) return []
  return props.documents.filter((doc) => canPreviewDocument(doc))
})

const navTotal = computed(() => previewableDocuments.value.length)

const activeIndex = ref(0)

// Sync index when the parent changes the document prop (e.g. user clicks a different "Consulter")
watch(
  () => props.document,
  (doc) => {
    if (!doc || !previewableDocuments.value.length) {
      activeIndex.value = 0
      return
    }
    const idx = previewableDocuments.value.findIndex((d) => d.id === doc.id)
    activeIndex.value = idx >= 0 ? idx : 0
  },
  { immediate: true },
)

const activeDoc = computed(() => {
  if (previewableDocuments.value.length && activeIndex.value < previewableDocuments.value.length) {
    return previewableDocuments.value[activeIndex.value]
  }
  return props.document
})

const hasPrev = computed(() => navTotal.value > 1 && activeIndex.value > 0)
const hasNext = computed(() => navTotal.value > 1 && activeIndex.value < navTotal.value - 1)

const goToPrev = () => {
  if (hasPrev.value) activeIndex.value--
}
const goToNext = () => {
  if (hasNext.value) activeIndex.value++
}

// Keyboard navigation
const handleKeydown = (e) => {
  if (!props.visible) return
  if (e.key === 'ArrowLeft') {
    e.preventDefault()
    goToPrev()
  } else if (e.key === 'ArrowRight') {
    e.preventDefault()
    goToNext()
  } else if (e.key === 'Escape') {
    e.preventDefault()
    close()
  }
}

watch(
  () => props.visible,
  (val) => {
    if (val) {
      document.addEventListener('keydown', handleKeydown)
    } else {
      document.removeEventListener('keydown', handleKeydown)
    }
  },
)

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})

// --- Preview logic (uses activeDoc) ---

const previewType = computed(() => getPreviewType(activeDoc.value))
const documentDescription = computed(() => describeDocument(activeDoc.value))
const documentSrc = computed(() => activeDoc.value?.fileUrl || activeDoc.value?.path || '')

const textContent = ref('')
const textLoading = ref(false)
const textError = ref('')

watch(
  activeDoc,
  async (doc) => {
    textContent.value = ''
    textError.value = ''
    textLoading.value = false

    if (!doc) { return }
    if (getPreviewType(doc) !== 'text') { return }

    try {
      textLoading.value = true
      const url = doc.fileUrl || doc.path || ''
      if (!url) {
        textError.value = 'Aucune URL de document disponible.'
        return
      }

      const response = await fetch(url, { credentials: 'include' })
      if (!response.ok) {
        throw new Error('Téléchargement du document impossible')
      }
      textContent.value = await response.text()
    } catch (error) {
      console.error('Erreur lors du chargement du texte:', error)
      textError.value = error.message || 'Impossible de lire ce document.'
    } finally {
      textLoading.value = false
    }
  },
  { immediate: true },
)

const close = () => {
  emit('close')
}

const download = () => {
  const url = activeDoc.value?.downloadUrl || activeDoc.value?.fileUrl || activeDoc.value?.path
  if (!url) { return }
  window.open(url, '_blank')
}
</script>