<script setup lang="ts">
import { onMounted, onUnmounted, watch, nextTick, ref } from "vue";
import { useSearchModal } from "../../composables/useSearchModal";
import SearchBar from "./SearchBar.vue";
import type { Template } from "../../types/template";
import type { Stack } from "../../types/stack";

const props = defineProps<{
  templates: Template[];
  stacks: Stack[];
}>();

const { isOpen, closeModal, openModal } = useSearchModal();
const searchBarContainer = ref<HTMLDivElement | null>(null);

// Global Cmd+K / Ctrl+K shortcut
function handleGlobalKeydown(e: KeyboardEvent) {
  // Cmd+K (Mac) or Ctrl+K (Windows/Linux)
  if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
    e.preventDefault();
    openModal();
  }

  // Escape to close
  if (e.key === "Escape" && isOpen.value) {
    closeModal();
  }
}

// Close on backdrop click
function handleBackdropClick(e: MouseEvent) {
  if ((e.target as HTMLElement).classList.contains("modal-backdrop")) {
    closeModal();
  }
}

// Prevent body scroll when modal is open and auto-focus input
watch(isOpen, async (open) => {
  if (open) {
    document.body.style.overflow = "hidden";
    // Focus the search input after modal renders
    await nextTick();
    const input = searchBarContainer.value?.querySelector("input");
    if (input) {
      input.focus();
    }
  } else {
    document.body.style.overflow = "";
  }
});

onMounted(() => {
  document.addEventListener("keydown", handleGlobalKeydown);
});

onUnmounted(() => {
  document.removeEventListener("keydown", handleGlobalKeydown);
  document.body.style.overflow = ""; // Cleanup
});
</script>

<template>
  <!-- Modal Backdrop -->
  <Transition name="modal-fade">
    <div
      v-if="isOpen"
      class="modal-backdrop fixed inset-0 z-[9999] flex items-start justify-center bg-warm-bg-deep/80 backdrop-blur-sm pt-[15vh] px-4"
      @click="handleBackdropClick"
    >
      <!-- Modal Content -->
      <div class="w-full max-w-2xl animate-modal-in" @click.stop>
        <!-- Search Bar Container -->
        <div
          class="bg-warm-bg-surface border border-warm-border-default rounded-warm-lg shadow-2xl overflow-visible"
        >
          <div ref="searchBarContainer" class="p-6">
            <SearchBar
              :templates="templates"
              :stacks="stacks"
              @select="closeModal"
            />
          </div>
        </div>

        <!-- Footer -->
        <div
          class="mt-2 px-4 py-3 bg-warm-bg-surface border border-warm-border-default rounded-warm-lg shadow-2xl text-xs text-warm-text-tertiary flex items-center justify-between"
        >
          <div class="flex items-center gap-4">
            <div class="flex items-center gap-1.5">
              <kbd
                class="px-1.5 py-0.5 bg-warm-bg-elevated border border-warm-border-subtle rounded text-[10px] font-mono"
                >↑</kbd
              >
              <kbd
                class="px-1.5 py-0.5 bg-warm-bg-elevated border border-warm-border-subtle rounded text-[10px] font-mono"
                >↓</kbd
              >
              <span>to navigate</span>
            </div>
            <div class="flex items-center gap-1.5">
              <kbd
                class="px-1.5 py-0.5 bg-warm-bg-elevated border border-warm-border-subtle rounded text-[10px] font-mono"
                >↵</kbd
              >
              <span>to select</span>
            </div>
            <div class="flex items-center gap-1.5">
              <kbd
                class="px-1.5 py-0.5 bg-warm-bg-elevated border border-warm-border-subtle rounded text-[10px] font-mono"
                >esc</kbd
              >
              <span>to close</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style scoped>
/* Modal fade transition */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.2s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

/* Modal slide-in animation */
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-modal-in {
  animation: modal-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
