<template>
  <div
    ref="canvasEl"
    class="fc-canvas"
    :class="{ 'fc-canvas--zoomed': panZoom.state.scale > 1 }"
    @wheel="panZoom.handlers.onWheel"
    @pointerdown="panZoom.handlers.onPointerDown"
    @pointermove="panZoom.handlers.onPointerMove"
    @pointerup="panZoom.handlers.onPointerUp"
    @click="onCanvasClick"
  >
    <img
      ref="imgEl"
      :src="src" :alt="alt"
      :style="{
        transform: `translate(${panZoom.state.x}px, ${panZoom.state.y}px) scale(${panZoom.state.scale})`
      }"
      draggable="false"
    >
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { usePanZoom } from '../../composables/usePanZoom.js'

const props = defineProps({ src: String, alt: String })
const emit = defineEmits(['close-request'])
const panZoom = usePanZoom()

const canvasEl = ref(null)
const imgEl = ref(null)

// Reset zoom when the src changes (prev/next nav).
watch(() => props.src, () => panZoom.reset())

// Click on the image → toggle zoom (IR/expected behavior). Click on
// the haze area around the image → request close. We use the image's
// own bounding rect rather than @click.self because the <img> sets
// pointer-events: none for the pan-drag pathway, so the click always
// targets the canvas div regardless of where the cursor was.
function onCanvasClick(ev) {
  if (panZoom.state.scale > 1) {
    // When zoomed, any click resets zoom — preserve old behavior.
    panZoom.handlers.onClick(ev)
    return
  }
  const img = imgEl.value
  if (!img) return
  const r = img.getBoundingClientRect()
  const inside =
    ev.clientX >= r.left && ev.clientX <= r.right &&
    ev.clientY >= r.top && ev.clientY <= r.bottom
  if (inside) {
    panZoom.handlers.onClick(ev)
  } else {
    emit('close-request')
  }
}
</script>

<style scoped>
.fc-canvas {
  flex: 1;
  position: relative;
  /* Transparent so the viewer's haze shows through to the image area
     instead of a solid panel sitting on top of it. */
  background: transparent;
  overflow: hidden;
  cursor: zoom-in;
  user-select: none;
  display: flex; align-items: center; justify-content: center;
}
.fc-canvas--zoomed { cursor: grab; }
.fc-canvas--zoomed:active { cursor: grabbing; }
.fc-canvas img {
  max-width: 100%; max-height: 100%;
  transform-origin: center;
  transition: transform 100ms ease-out;
  pointer-events: none;
}
</style>
