<template>
  <Fluid>
    <div class="flex mt-6">
      <div class="card flex flex-col gap-4 w-full">
        <div>
          <h2 class="text-3xl font-bold mb-4">Similarity Search</h2>
        </div>
        <div class="flex flex-wrap">
          <!--label for="address">Address</label-->
          <Textarea id="query" v-model="query" rows="4" placeholder="Enter your query..." class="w-full" />
        </div>

        <div class="flex flex-col md:flex-row gap-4">
          <div class="flex flex-wrap gap-2 w-full">
            <Select id="type" v-model="dropdownItem" :options="dropdownItems" optionLabel="name"
              placeholder="Select type" class="w-full"></Select>
          </div>
        </div>

        <div class="p-field p-col-12 p-md-2">
          <Button label="Send" icon="pi pi-send" :fluid="false" @click="sendQuery" />
        </div>
      </div>
    </div>

    <div class="flex mt-6">
      <div class="results-container p-mt-4">
        <Card v-for="(result, index) in messages" :key="index" class="p-mb-3">
          <template #content>
            <ScrollPanel style="width: 100%; max-height: 200px">
              <pre class="result-content">{{ result }}</pre>
            </ScrollPanel>
          </template>
        </Card>
      </div>
    </div>
  </Fluid>
</template>

<script setup>
import Button from 'primevue/button';
import Card from 'primevue/card';
import ScrollPanel from 'primevue/scrollpanel';
import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';

const query = ref('');
const dropdownItem = ref(null);
const messages = ref([]);
const toast = useToast();

const dropdownItems = [
  { name: 'Documentation', code: 'setup-documentation' },
  { name: 'Deploy Documentation', code: 'deploy-documentation' }
];


const sendQuery = async () => {
  if (query.value.trim() !== '' && dropdownItem.value) {
    try {
      const response = await fetch(`http://localhost:8082/test/query_vector?query="${query.value}"&type=${dropdownItem.value.code}`);
      const data = await response.json();
      console.log('API response:', data);

      if (data && Array.isArray(data) && data.length > 0) {
        messages.value = data;
        toast.add({ severity: 'success', summary: 'Success', detail: 'Query sent successfully', life: 3000 });
      } else {
        toast.add({ severity: 'info', summary: 'Info', detail: 'No results found', life: 3000 });
      }
    } catch (error) {
      console.error('Error sending query:', error);
      toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 });
    }
    query.value = '';
    dropdownItem.value = null;
  } else {
    toast.add({ severity: 'warn', summary: 'Warning', detail: 'Please enter a query and select a type', life: 3000 });
  }
};
</script>

<style scoped>
.similarity-search {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.results-container {
  max-height: 600px;
  overflow-y: auto;
}

.result-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace;
  font-size: 0.9em;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.p-select {
  width: 100%;
}

.p-select .p-select-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-inputtextarea {
  resize: vertical;
  min-height: 100px;
}
</style>