<template>
  <Transition name="fullscreen-mode">
    <div class="fixed inset-0 z-50 bg-white flex flex-col h-full">
      <div class="border-b h-[56px] py-1.5 px-3 flex items-center justify-between w-full">
        <div class="flex items-center space-x-2 sm:space-x-4 min-w-0">
          <Button variant="ghost" size="sm" @click="handleClose" class="shrink-0">
            <i class="dku-icon-chevron-left-16" />
            <span>Back</span>
          </Button>
        </div>
      </div>

      <div class="flex-1 overflow-y-auto py-5 md:px-2 h-full">
        <div class="md:px-3" v-if="!isTablet && !isMobile">
          <div v-if="isDetailViewOpen" class="flex gap-6 h-full">
            <div
              class="space-y-6 md:border md:border-border px-2.5 md:p-5 flex-1 md:rounded-lg md:overflow-y-auto"
            >
              <PromptLibrary
                :layout="'two-column'"
                @select="handleTemplateSelect"
                @view="handleTemplateView"
              />
            </div>

            <div
              v-if="selectedTemplate"
              class="space-y-6 md:border md:border-border px-2.5 md:p-5 md:pb-0 flex-1 md:rounded-lg md:overflow-y-auto"
            >
              <PromptDetailView
                :template="selectedTemplate"
                :isTablet="false"
                @back="closeDetailView"
                @use="handleUsePrompt"
                @dismiss="closeDetailView"
              />
            </div>
          </div>
          <div
            v-else
            class="max-w-[675px] mx-auto space-y-6 px-2.5 md:border md:border-border md:rounded-lg md:p-5"
          >
            <PromptLibrary
              :layout="'one-column'"
              @select="handleTemplateSelect"
              @view="handleTemplateView"
            />
          </div>
        </div>
      </div>
    </div>
  </Transition>
  <PromptLibrarySidebar
    v-if="isTablet || isMobile"
    :isOpen="isPromptLibraryOpen"
    @close="closePromptLibrary"
    @select="handleTemplateSelect"
    @view="handleTemplateView"
  />

  <PromptDetailSidebar
    v-if="isTablet || isMobile"
    :isOpen="isDetailViewOpen"
    :template="selectedTemplate"
    @back="closeDetailView"
    @use="handleUsePrompt"
  />
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Button } from '@/components/ui/button'
import PromptLibrarySidebar from '@/components/AgentConfiguration/LanguageModel/PromptLibrary/PromptLibrarySidebar.vue'
import PromptDetailSidebar from '@/components/AgentConfiguration/LanguageModel/PromptLibrary/PromptDetailSidebar.vue'
import PromptLibrary from '@/components/AgentConfiguration/LanguageModel/PromptLibrary/PromptLibrary.vue'
import PromptDetailView from '@/components/AgentConfiguration/LanguageModel/PromptLibrary/PromptDetailView.vue'
import type { PromptTemplate } from '@/types/prompt'
import { useSidebar } from '@/components/ui/sidebar'

const emit = defineEmits<{
  (e: 'use', value: string): void
  (e: 'close'): void
}>()

const isPromptLibraryOpen = ref(true)
const isDetailViewOpen = ref(false)
const selectedTemplate = ref<PromptTemplate | null>(null)
const windowWidth = ref(window.innerWidth)
const { isTablet, isMobile } = useSidebar()

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

function closePromptLibrary() {
  handleClose()
}

function handleTemplateSelect(template: PromptTemplate) {
  emit('use', template.prompt)
  handleClose()
}

function handleTemplateView(template: PromptTemplate) {
  selectedTemplate.value = template
  isDetailViewOpen.value = true
}

function closeDetailView() {
  isDetailViewOpen.value = false
  selectedTemplate.value = null
}

function handleUsePrompt(template: PromptTemplate) {
  emit('use', template.prompt)
  handleClose()
}

function handleResize() {
  windowWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

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

.fullscreen-mode-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.fullscreen-mode-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>
