<template>
  <div class="space-y-4">
    <div class="flex items-center gap-1 mb-1">
      <Label class="font-medium"
        >Set short example queries<span class="text-destructive">*</span></Label
      >
      <Loader2 class="w-4 h-4 animate-spin mr-2" v-if="loading" />
    </div>

    <p class="text-sm text-muted-foreground">
      e.g. Write Python code, Engage Customers, Create Audit Reports
    </p>

    <!-- Dynamic Input Fields -->
    <div class="space-y-3">
      <div v-for="(_, index) in localQueries" :key="index" class="flex items-center gap-2">
        <Input
          v-model="localQueries[index]"
          placeholder="Short query example"
          @input="updateQueries"
          class="flex-1"
        />
        <Button
          v-if="localQueries.length >= 2"
          variant="ghost"
          :disabled="loading"
          size="icon"
          class="hover:text-destructive flex-shrink-0"
          @click="removeQuery(index)"
        >
          <i class="dku-icon-trash-16"></i>
        </Button>
      </div>

      <Button
        variant="outline"
        :disabled="loading"
        size="sm"
        @click="addQuery"
        class="w-full sm:w-auto"
      >
        <i class="dku-icon-plus-16"></i>
        Add short query example
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { watch } from 'vue'
import { Loader2 } from 'lucide-vue-next'
// Props
const props = defineProps<{
  modelValue: {
    short_example_queries: string[]
  }
  loading?: boolean
}>()

// Emits
const emit = defineEmits<{
  (e: 'update:modelValue', value: { short_example_queries: string[] }): void
}>()

// Local state
const localQueries = ref<string[]>([...props.modelValue.short_example_queries])

// Initialize with at least one empty input if no queries exist
if (localQueries.value.length === 0) {
  localQueries.value = ['']
}

// Methods
function addQuery() {
  localQueries.value.push('')
  updateQueries()
}
watch(
  () => props.modelValue.short_example_queries,
  (newVal: string[]) => {
    localQueries.value = newVal.length ? [...newVal] : ['']
  }
)
function removeQuery(index: number) {
  localQueries.value.splice(index, 1)
  updateQueries()
}

function updateQueries() {
  emit('update:modelValue', { short_example_queries: localQueries.value })
}
</script>

<style scoped></style>
