<template>
  <Teleport to="body">
    <Transition name="shortcuts-modal">
      <div
        v-if="open"
        class="fixed inset-0 z-[1200] flex items-center justify-center p-4 bg-black/50"
        role="dialog"
        aria-modal="true"
        aria-label="Keyboard shortcuts"
        @click.self="$emit('close')"
      >
        <div
          class="bg-base-100 rounded-xl shadow-2xl border border-base-300 max-w-md w-full p-6"
          @click.stop
        >
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold flex items-center gap-2">
              <icons-icon-keyboard class="size-5" />
              Keyboard shortcuts
            </h2>
            <button
              type="button"
              class="btn btn-ghost btn-sm btn-circle"
              aria-label="Close"
              @click="$emit('close')"
            >
              ×
            </button>
          </div>
          <dl class="space-y-2 text-sm">
            <div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">?</kbd></dt>
              <dd>Show this help</dd>
            </div>
            <div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">+</kbd> / <kbd class="kbd kbd-sm">−</kbd></dt>
              <dd>Zoom in / out</dd>
            </div>
            <div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">H</kbd></dt>
              <dd>Toggle markers visibility</dd>
            </div>
            <div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">F</kbd></dt>
              <dd>Focus search</dd>
            </div>
            <div class="flex justify-between gap-4 py-1">
              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">Esc</kbd></dt>
              <dd>Close menus / overlay</dd>
            </div>
          </dl>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
defineProps<{ open: boolean }>()
defineEmits<{ close: [] }>()
</script>

<style scoped>
.shortcuts-modal-enter-active,
.shortcuts-modal-leave-active {
  transition: opacity 0.2s ease;
}
.shortcuts-modal-enter-from,
.shortcuts-modal-leave-to {
  opacity: 0;
}
.shortcuts-modal-enter-active .bg-base-100,
.shortcuts-modal-leave-active .bg-base-100 {
  transition: transform 0.2s ease;
}
.shortcuts-modal-enter-from .bg-base-100,
.shortcuts-modal-leave-to .bg-base-100 {
  transform: scale(0.95);
}
</style>
