<template>
  <div class="w-full h-full flex flex-col">
    <!-- Header -->
    <div class="flex flex-col">
      <div class="flex items-center space-x-1">
        <i class="dku-icon-text-box-16 text-primary text-xl"></i>
        <h2 class="text-xl font-semibold translate-y-0.25 text-gray-900">Prompt library</h2>
      </div>
    </div>

    <!-- Content -->
    <div class="flex-1">
      <!-- Search Bar -->
      <div class="py-5">
        <div class="relative w-full md:w-[431px]">
          <i
            class="dku-icon-search-16 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
          ></i>
          <Input
            v-model="searchQuery"
            placeholder="Search"
            class="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
          />
        </div>
      </div>

      <!-- Prompt Templates -->
      <div
        class="pb-3"
        :class="[layout === 'two-column' ? 'grid grid-cols-1 md:grid-cols-2 gap-3' : 'space-y-3']"
      >
        <PromptCard
          v-for="template in filteredTemplates"
          :key="template.id"
          :selected="selectedTemplate?.id === template.id"
          :template="template"
          @select="handleTemplateSelect"
          @view="handleTemplateView"
        />
      </div>

      <!-- Empty State -->
      <div v-if="filteredTemplates.length === 0" class="text-center py-12">
        <i class="dku-icon-search-16 text-gray-400 text-4xl mb-4"></i>
        <p class="text-gray-500 text-lg">
          {{
            searchQuery
              ? 'No prompt templates found matching your search.'
              : 'No prompt templates available.'
          }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Input } from '@/components/ui/input'
import PromptCard from './PromptCard.vue'
import type { PromptTemplate } from '@/types/prompt'
import { usePromptStore } from '@/store/promptStore'

// Props
withDefaults(
  defineProps<{
    layout?: 'one-column' | 'two-column'
  }>(),
  {
    layout: 'one-column',
  }
)

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

// State
const searchQuery = ref('')
const promptStore = usePromptStore()
const selectedTemplate = ref<PromptTemplate | null>(null)

// Computed
const filteredTemplates = computed(() => {
  return promptStore.searchTemplates(searchQuery.value)
})

// Helper function to check if device is desktop
const isDesktop = () => {
  return window.innerWidth >= 768 // md breakpoint in Tailwind
}

onMounted(() => {
  // Only auto-select the first template on desktop
  if (isDesktop() && filteredTemplates.value.length > 0) {
    handleTemplateView(filteredTemplates.value[0])
  }
})

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

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

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