<script setup>
/** Teaser preview for the inbox triage pane: renders ONLY the top ~1/3 of the
 *  first page (a fade + "Enlarge" link hint there's more). Clicking Enlarge emits
 *  `enlarge` so the parent navigates to the full review/edit screen — same as
 *  clicking a card/list link.
 *
 *  @tato30/vue-pdf is loaded DYNAMICALLY on the client only; a static import pulls
 *  browser-pdfjs (DOMMatrix) into SSR and crashes a page reload. Re-mounted per
 *  document via :key in the parent. */
import { ref, shallowRef, computed, watch, onMounted } from 'vue'

const { t } = useTranslation()
const props = defineProps({ id: { type: [String, Number], required: true } })
const emit = defineEmits(['enlarge'])

const VuePDF = shallowRef(null)
const pdf = shallowRef(null)
const pageAspect = ref(1.414)   // A4 portrait default; refined once page 1 is loaded

// teaser shows the top third → container aspect-ratio (W/H) = 3 / (pageHeight/pageWidth)
const teaserRatio = computed(() => (3 / (pageAspect.value || 1.414)).toFixed(4))

onMounted(async () => {
  const m = await import('@tato30/vue-pdf')
  try { await import('@tato30/vue-pdf/style.css') } catch {}
  VuePDF.value = m.VuePDF
  const r = m.usePDF(`/api/accounting/incoming-invoices/${props.id}/pdf`)
  watch(r.pdf, async (v) => {
    pdf.value = v
    if (v?.getPage) {
      try { const pg = await v.getPage(1); const vp = pg.getViewport({ scale: 1 }); if (vp.width) pageAspect.value = vp.height / vp.width } catch {}
    }
  }, { immediate: true })
})
</script>

<template>
  <div class="prev-scroll">
    <div v-if="VuePDF && pdf" class="teaser" :style="{ aspectRatio: teaserRatio }">
      <component :is="VuePDF" :pdf="pdf" :page="1" :width="900" />
      <div class="teaser-fade"></div>
      <button class="enlarge-btn" @click="emit('enlarge')" :title="t.enlarge || 'Vergrößern'" :aria-label="t.enlarge || 'Vergrößern'">
        <i class="ti ti-arrows-maximize"></i>
      </button>
    </div>
    <div v-else class="prev-loading"><i class="ti ti-loader-2 spin"></i></div>
  </div>
</template>

<style scoped>
.teaser { position: relative; width: 100%; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.08); background: #fff; }
.teaser :deep(canvas) { width: 100% !important; height: auto !important; display: block; }
.teaser-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.95)); pointer-events: none; }
.enlarge-btn { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; border: 1px solid var(--theme-border,#e5e7eb); background: rgba(255,255,255,.96); color: #4338ca; border-radius: 8px; width: 30px; height: 30px; padding: 0; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.14); transition: background .12s ease, border-color .12s ease; }
.enlarge-btn:hover { background: #eef2ff; border-color: #c7d2fe; }
.prev-loading { text-align: center; padding: 40px; color: #94a3b8; }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>
