<template>
  <div class="space-y-4">
    <div class="flex items-center gap-1 mb-1">
      <Label class="text-foreground">Example queries</Label>
      <Loader2 class="w-4 h-4 animate-spin mr-2" v-if="loading" />
    </div>

    <p class="text-sm text-muted-foreground mb-2">
      e.g. Leverage public data to improve clinical studies, Are there any flagged concerns in our
      latest employee engagement survey?
    </p>

    <!-- Dynamic Input Fields -->
    <div class="space-y-3">
      <div v-for="(_, index) in localQuestions" :key="index" class="flex items-start gap-2">
        <Textarea
          v-model="localQuestions[index]"
          placeholder="Example question"
          @input="(e: Event) => { autoResize(e); updateQuestions(); }"
          class="flex-1 resize-none overflow-hidden min-h-[40px] !border !border-border"
          :disabled="loading"
          rows="1"
        />
        <TooltipProvider v-if="localQuestions.length >= 2">
          <Tooltip>
            <TooltipTrigger as-child>
              <Button
                variant="ghost"
                size="icon"
                class="hover:text-destructive flex-shrink-0"
                @click="removeQuestion(index)"
              >
                <i class="dku-icon-trash-16"></i>
              </Button>
            </TooltipTrigger>
            <TooltipContent hide-arrow>
              <p>Delete example</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>

      <Button variant="outline" size="sm" @click="addQuestion" :disabled="loading">
        <i class="dku-icon-plus-16"></i>
        Add example
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Button } from '@/components/ui/button'
import { Loader2 } from 'lucide-vue-next'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
// Props
const props = defineProps<{
  modelValue: {
    sample_questions: string[]
  }
  loading?: boolean
}>()

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

// Local state
const localQuestions = ref<string[]>([...props.modelValue.sample_questions])
watch(
  () => props.modelValue.sample_questions,
  (newVal: string[]) => {
    localQuestions.value = [...newVal]
  }
)
// Initialize with at least one empty input if no questions exist
if (localQuestions.value.length === 0) {
  localQuestions.value = ['']
}

// Methods
function addQuestion() {
  localQuestions.value.push('')
  updateQuestions()
}

function removeQuestion(index: number) {
  localQuestions.value.splice(index, 1)
  updateQuestions()
}

function updateQuestions() {
  // Filter out empty questions but keep at least one empty input for new entries
  // const filteredQuestions = localQuestions.value.filter((q) => q.trim() !== '')
  emit('update:modelValue', { sample_questions: localQuestions.value })
}

function autoResize(event: Event) {
  const target = event.target as HTMLTextAreaElement
  target.style.height = 'auto'
  target.style.height = target.scrollHeight + 'px'
}
</script>

<style scoped></style>
