<template>
  <Transition name="sidebar-slide">
    <div v-if="isOpen" class="fixed inset-0 z-50 flex">
      <div class="fixed inset-0 bg-white flex flex-col">
        <!-- Header -->
        <div class="flex items-center justify-between p-4 border-b shrink-0">
          <div class="flex items-center space-x-3">
            <Button variant="ghost" size="sm" @click="handleClose" class="shrink-0">
              <i class="dku-icon-chevron-left-16"></i>
              Back to Advanced mode
            </Button>
          </div>
        </div>

        <!-- Content -->
        <div class="overflow-y-auto flex-1 px-3 py-5">
          <div
            class="max-w-[675px] mx-auto md:border md:border-border px-2.5 md:p-5 flex-1 md:rounded-lg min-h-full h-fit"
          >
            <PromptLibrary
              :layout="'two-column'"
              @close="handleClose"
              @select="handleTemplateSelect"
              @view="handleTemplateView"
            />
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import PromptLibrary from './PromptLibrary.vue'
import type { PromptTemplate } from '@/types/prompt'

// Props
defineProps<{
  isOpen: boolean
}>()

// Emits
const emit = defineEmits<{
  (e: 'close'): void
  (e: 'select', template: PromptTemplate): void
  (e: 'view', template: PromptTemplate): void
}>()

// Methods
function handleClose() {
  emit('close')
}

function handleTemplateSelect(template: PromptTemplate) {
  emit('select', template)
  handleClose()
}

function handleTemplateView(template: PromptTemplate) {
  emit('view', template)
}
</script>

<style scoped>
.sidebar-slide-enter-active,
.sidebar-slide-leave-active {
  transition: all 0.3s ease;
}

.sidebar-slide-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.sidebar-slide-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>
