<template>
  <div class="h-full flex flex-col bg-gray-900 rounded-lg overflow-hidden">
    <!-- Toolbar -->
    <div class="flex flex-wrap items-center gap-2 p-4 bg-gray-800 text-white text-sm">
      <button @click="zoomIn" class="px-2 py-1 hover:bg-gray-700 rounded" title="Zoom in">
        +
      </button>
      <button @click="zoomOut" class="px-2 py-1 hover:bg-gray-700 rounded" title="Zoom out">
        -
      </button>
      <button @click="resetZoom" class="px-2 py-1 hover:bg-gray-700 rounded" title="Reset">
        1:1
      </button>
      <button @click="rotateCw" class="px-2 py-1 hover:bg-gray-700 rounded" title="Rotate 90">
        Rotate
      </button>
      <span class="ml-auto text-gray-400 text-xs">{{ Math.round(scale * 100) }}%</span>
    </div>

    <!-- Document area -->
    <div
      ref="viewerContainer"
      class="flex-1 overflow-auto cursor-grab active:cursor-grabbing"
      @mousedown="startPan"
      @mousemove="pan"
      @mouseup="stopPan"
      @mouseleave="stopPan"
      @wheel.prevent="onWheel"
    >
      <div
        :style="{
          transform: `translate(${panX}px, ${panY}px) scale(${scale}) rotate(${rotation}deg)`,
          transformOrigin: 'top left',
          transition: isPanning ? 'none' : 'transform 0.2s',
        }"
      >
        <!-- PDF/image rendered from same-origin blob URL (avoids cross-origin MinIO iframe issues) -->
        <iframe
          v-if="isPdf"
          :src="url"
          class="w-[800px] h-[1100px] bg-white"
          frameborder="0"
          title="Scanned document"
        />
        <img
          v-else
          :src="url"
          class="max-w-none"
          draggable="false"
          @load="onImageLoad"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{
  url: string
}>()

const isPdf = computed(() => {
  const lower = props.url.toLowerCase()
  return lower.includes('.pdf') || lower.includes('application/pdf')
})

const scale = ref(1)
const rotation = ref(0)
const panX = ref(0)
const panY = ref(0)
const isPanning = ref(false)
const lastX = ref(0)
const lastY = ref(0)

function zoomIn() { scale.value = Math.min(scale.value + 0.25, 5) }
function zoomOut() { scale.value = Math.max(scale.value - 0.25, 0.25) }
function resetZoom() {
  scale.value = 1
  panX.value = 0
  panY.value = 0
  rotation.value = 0
}
function rotateCw() { rotation.value = (rotation.value + 90) % 360 }

function onWheel(e: WheelEvent) {
  if (e.deltaY < 0) zoomIn()
  else zoomOut()
}

function startPan(e: MouseEvent) {
  isPanning.value = true
  lastX.value = e.clientX
  lastY.value = e.clientY
}

function pan(e: MouseEvent) {
  if (!isPanning.value) return
  panX.value += e.clientX - lastX.value
  panY.value += e.clientY - lastY.value
  lastX.value = e.clientX
  lastY.value = e.clientY
}

function stopPan() { isPanning.value = false }

function onImageLoad() {
  // Reset view when a new image loads
  scale.value = 1
  panX.value = 0
  panY.value = 0
}
</script>