<template>
  <Teleport to="body">
    <Transition name="pdf-overlay">
      <div
        v-if="isOpen"
        class="pdf-reader"
        @keydown.escape="close"
        tabindex="0"
        ref="overlayRef"
      >
        <!-- Top bar -->
        <div class="pdf-bar">
          <div class="pdf-bar-title">
            <div class="i-lucide-book-open h-4 w-4 text-accent" />
            <span>{{ bpContent?.pdf.barTitle }}</span>
          </div>
          <button class="pdf-close" @click="close" aria-label="Fermer">
            <div class="i-lucide-x h-5 w-5" />
          </button>
        </div>

        <!-- PDF embed -->
        <div class="pdf-viewport">
          <iframe
            :src="pdfUrl"
            class="pdf-frame"
            :title="bpContent?.pdf.iframeTitle"
          />
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
const props = defineProps<{ modelValue: boolean }>()
const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()

const { data: bpContent } = await usePageContent('book-player')

const overlayRef = ref<HTMLElement>()

const isOpen = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v),
})

const pdfUrl = '/pdf/une-economie-du-don.pdf'

function close() {
  isOpen.value = false
}

watch(isOpen, (open) => {
  if (open) {
    nextTick(() => overlayRef.value?.focus())
  }
  if (import.meta.client) {
    document.body.style.overflow = open ? 'hidden' : ''
  }
})

onUnmounted(() => {
  if (import.meta.client) document.body.style.overflow = ''
})
</script>

<style scoped>
.pdf-reader {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: hsl(20 8% 4%);
  display: flex;
  flex-direction: column;
  outline: none;
}

.pdf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: hsl(20 8% 6% / 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(20 8% 14%);
  flex-shrink: 0;
}

.pdf-bar-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
}

.pdf-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: hsl(20 8% 10%);
  color: hsl(20 8% 55%);
  border: 1px solid hsl(20 8% 18%);
  cursor: pointer;
  transition: all 0.3s;
}

.pdf-close:hover {
  background: hsl(12 76% 48% / 0.2);
  color: white;
  border-color: hsl(12 76% 48% / 0.3);
}

.pdf-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.pdf-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}

/* Overlay transitions */
.pdf-overlay-enter-active {
  animation: pdf-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pdf-overlay-leave-active {
  animation: pdf-enter 0.3s cubic-bezier(0.7, 0, 0.84, 0) reverse both;
}
@keyframes pdf-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
