<template>
  <!-- <Toast />
  <ConfirmPopup></ConfirmPopup>
  <div v-if="loadingStore.another_loading" class="loading-container">
    <div class="spinner-container">
      <ProgressSpinner class="spinner" />
      <p class="loading-text">Loading...</p>
    </div>
  </div> -->
  <Fluid>
    <h1 class="text-xl font-bold mt-6">KS Document</h1>
    <div class="card flex mt-2 flex-col gap-4 w-full justify-center">
      <Stepper value="1" linear :loading="loadingStore.another_loading">
        <StepList>
          <Step value="1">Add document</Step>
          <Step value="2">Set parameters</Step>
          <Step value="3">Ingest document</Step>
        </StepList>
        <StepPanels>
          <StepPanel value="1" v-slot="{ activateCallback }">
            <div class="flex flex-col h-48">
              <FileUpload ref="fileUpload" :maxFileSize="10000000000" chooseLabel="Select File" class="p-button"
                style="width: 150px;" @select="onFileSelect" @remove="onFileRemove" :showUploadButton="false"
                :showCancelButton="false" v-model:files="selectedFile" :fileLimit=1>
                <template #empty>
                  <div class="flex items-center justify-center flex-col">
                    <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
                    <p class="mt-6 mb-0">Drag and drop the file you want to add to the knowledge base. You can upload
                      only one file.</p>
                  </div>
                </template>
              </FileUpload>
            </div>
            <div class="flex mt-16 pt-6 justify-end">
              <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" :disabled="!isFileSelected"
                style="width: 150px;" class="p-button" v-tooltip.top="!isFileSelected ? 'Please select a file' : ''" />
            </div>
          </StepPanel>
          <form @submit.prevent="submitForm" class="p-fluid">
            <StepPanel value="2" v-slot="{ activateCallback }">
              <div class="flex flex-col h-full">
                <Tabs class="mt-6" value="0">
                  <TabList>
                    <Tab value="0">Base</Tab>
                    <Tab value="1">Advanced</Tab>
                  </TabList>
                  <TabPanels>
                    <TabPanel value="0">
                      <div class="col-12 md:col-6 mb-4 mt-4">
                        <span class="p-float-label">
                          <label for="description">Document Description</label>
                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                            v-tooltip="'A brief overview of the document'"></i>
                          <InputText id="description" type="text" v-model="formData.description" required
                            class="w-full" />
                        </span>
                      </div>
                      <div class="col-12 md:col-6 mb-4">
                        <span class="p-float-label">
                          <label for="type">File Type</label>
                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                            v-tooltip="'Specify the type of file'"></i>
                          <InputText id="type" v-model="formData.type" required class="w-full" />
                        </span>
                      </div>
                      <div class="col-12 md:col-6 mb-4">
                        <span class="p-float-label">
                          <label for="ksProjectName">KS Project Name</label>
                          <InputText id="ksProjectName" v-model="userPrefStore.selectedProject.internal_name" required
                            class="w-full" :disabled="true" />
                        </span>
                      </div>
                      <div class="col-12 md:col-6 mb-4">
                        <span class="p-float-label">
                          <label for="ksApplicationName">KS Application Name</label>
                          <Dropdown id="ksApplicationName" v-model="formData.ksApplicationName"
                            :options="availableAppOptions" optionLabel="name" required class="w-full"></Dropdown>
                        </span>
                      </div>
                      <div class="col-12 md:col-6 mb-4">
                        <span class="p-float-label">
                          <label for="ksDocType">KS Document Type</label>
                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                            v-tooltip="'Specify the type of document'"></i>
                          <Dropdown id="ksDocType" v-model="formData.ksDocType" :options="documentTypeOptions"
                            optionLabel="name" :required class="w-full"></Dropdown>
                        </span>
                      </div>
                      <div class="col-12 md:col-6 mb-4">
                        <span class="p-float-label">
                          <label for="ksDocSource">KS Document Source</label>
                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                            v-tooltip="'Specify the document source. e.g, Retrieved from DevopsJ2Cloud Git Repository - CSV System Configuration '"></i>
                          <InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
                        </span>
                      </div>
                    </TabPanel>
                    <TabPanel value="1">
                      <div class="col-12 md:col-6 mb-4 mt-4">
                        <span class="p-float-label">
                          <label for="defaultChunkSize">Default Chunk Size</label>
                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                            v-tooltip="'Define the default size for chunks of data'"></i>
                          <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required
                            class="w-full" />
                        </span>
                        <small v-if="errors.defaultChunkSize" class="text-red-500">{{ errors.defaultChunkSize }}</small>
                      </div>
                      <div class="col-12 md:col-6 mb-4">
                        <span class="p-float-label">
                          <label for="minChunkSize">Min Chunk Size</label>
                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                            v-tooltip="'Specify the minimum allowable size for chunks'"></i>
                          <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
                        </span>
                        <small v-if="errors.minChunkSize" class="text-red-500">{{ errors.minChunkSize }}</small>
                      </div>
                      <div class="col-12 md:col-6 mb-4">
                        <span class="p-float-label">
                          <label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                            v-tooltip="'Define the minimum chunk size that can be embedded'"></i>
                          <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required
                            class="w-full" />
                        </span>
                        <small v-if="errors.minChunkSizeToEmbed" class="text-red-500">{{ errors.minChunkSizeToEmbed
                        }}</small>
                      </div>
                      <div class="col-12 md:col-6 mb-4">
                        <span class="p-float-label">
                          <label for="maxNumberOfChunks">Max Number of Chunks</label>
                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                            v-tooltip="'Set the maximum number of chunks allowed'"></i>
                          <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required
                            class="w-full" />
                        </span>
                        <small v-if="errors.maxNumberOfChunks" class="text-red-500">{{ errors.maxNumberOfChunks
                        }}</small>
                      </div>
                    </TabPanel>
                  </TabPanels>
                </Tabs>
              </div>
              <div class="flex justify-between pt-6">
                <Button label="Back"
                  :style="{ width: '150px', backgroundColor: '#9c9c9c', color: 'white', border: '1px grey' }"
                  icon="pi pi-arrow-left" @click="activateCallback('1')" />
                <Button label="Next" style="width: 150px;" class="p-button" icon="pi pi-arrow-right" iconPos="right"
                  @click="activateCallback('3')" :disabled="!isFormValid"
                  v-tooltip.top="!isFormValid ? 'Please fill in all fields' : ''" />
              </div>
            </StepPanel>
            <StepPanel value="3" v-slot="{ activateCallback }">
              <div class="flex flex-col mt-8 h-48">
                <p v-if="selectedFile" class="text-center">You can execute the ingestion for the following file:</p>
                <p v-if="selectedFile" class="text-center">{{ selectedFile.name }}</p>
                <div class="flex justify-center mt-4">
                  <Button type="submit" label="Ingest" :fluid="false"></Button>
                </div>
              </div>
              <div class="flex justify-between pt-6">
                <Button label="Back"
                  :style="{ width: '150px', backgroundColor: '#9c9c9c', color: 'white', border: '1px grey' }"
                  icon="pi pi-arrow-left" @click="activateCallback('2')" />
              </div>
            </StepPanel>
          </form>
        </StepPanels>
      </Stepper>
    </div>
  </Fluid>
  <Dialog v-model:visible="showDialog" header="Confirm Overwrite" :modal="true">
    <p>The document "{{ selectedFile?.name }}" already exists with status "{{ existingDocument?.ingestionStatus }}". Do
      you want to overwrite it?</p>
    <template #footer>
      <Button label="Cancel" icon="pi pi-times" @click="cancelOverwrite" class="p-button" />
      <Button label="Overwrite" icon="pi pi-check" @click="confirmOverwrite" class="p-button-danger" />
    </template>
  </Dialog>
</template>

<script setup>
import axios from 'axios';
import Step from 'primevue/step';
import StepList from 'primevue/steplist';
import StepPanel from 'primevue/steppanel';
import StepPanels from 'primevue/steppanels';
import Stepper from 'primevue/stepper';
import { useToast } from 'primevue/usetoast';
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { KsDocumentStore } from '../../../stores/KsDocumentStore';
import { LoadingStore } from '../../../stores/LoadingStore';
import { UserPrefStore } from '../../../stores/UserPrefStore';

const toast = useToast();
const router = useRouter();
const userPrefStore = UserPrefStore();
const loadingStore = LoadingStore();
const ksDocumentStore = KsDocumentStore();
const required = ref([]);
const ingestionResult = ref('');
const fileUploaded = ref(false);
const minChunkSize = ref(50);
const maxNumberOfChunks = ref(1000);
const minChunkSizeToEmbed = ref(50);
const fileUpload = ref(null);
const selectedFile = ref(null);
const ingestionDialogVisible = ref(false);
const ksdocuments = ref(null);
const showDialog = ref(false);
const existingDocument = ref(null);
const formDataToSend = ref(new FormData());

const documentTypeOptions = ref([
  { name: 'Functional', value: 'functional' },
  { name: 'Code Instruction', value: 'code_instruction' },
  { name: 'Specification', value: 'specification' },
  { name: 'Other', value: 'other' }
]);
const availableAppOptions = ref([
  { name: 'Cross', value: '' },
  ...userPrefStore.availableApp.map(app => ({ name: app.internal_name, value: app.internal_name }))
]);
const errors = ref({
  defaultChunkSize: "",
  minChunkSize: "",
  maxNumberOfChunks: "",
  minChunkSizeToEmbed: "",
});

const formData = ref({
  description: '',
  type: '',
  ksProjectName: '',
  ksApplicationName: { name: 'Cross', value: '' },
  ksDocType: { name: 'Functional', value: 'functional' },
  ksDocSource: '',
  defaultChunkSize: 2000,
  minChunkSize: 50,
  maxNumberOfChunks: 1000,
  minChunkSizeToEmbed: 50
});


const isFileSelected = computed(() => selectedFile.value !== null);

watch(
  () => formData.value.defaultChunkSize,
  (newValue) => validateField("defaultChunkSize", newValue, 500, 2000),
);
watch(
  () => formData.value.minChunkSize,
  (newValue) => validateField("minChunkSize", newValue, minChunkSize.value, 100)
);
watch(
  () => formData.value.maxNumberOfChunks,
  (newValue) => validateField("maxNumberOfChunks", newValue, maxNumberOfChunks.value, 2000)
);
watch(
  () => formData.value.minChunkSizeToEmbed,
  (newValue) => validateField("minChunkSizeToEmbed", newValue, minChunkSizeToEmbed.value, 100)
);

const validateField = (field, value, minvalue, maxvalue) => {
  if (value === null || value === undefined || value < minvalue || value > maxvalue) {
    errors.value[field] = "Value must be between " + minvalue + " and " + maxvalue;
  } else {
    errors.value[field] = "";
  }
};

const isFormValid = computed(() => {
  return (
    formData.value.description &&
    formData.value.type &&
    formData.value.ksApplicationName &&
    formData.value.ksDocType &&
    formData.value.ksDocSource &&
    !Object.values(errors.value).some((err) => err !== "")
  );
});

const onFileSelect = (event) => {
  if (event.files && event.files.length > 0) {
    selectedFile.value = event.files[0];
    formData.value.type = selectedFile.value.name.split('.').pop().toLowerCase();
    formData.value.description = selectedFile.value.name;
    fileUploaded.value = true;
  } else {
    selectedFile.value = null;
    fileUploaded.value = false;
  }

  toast.add({
    severity: 'success',
    summary: 'Success',
    detail: 'File uploaded successfully!',
    life: 3000
  });
};

watch(() => userPrefStore.getSelApp, updateDocuments, { immediate: true });

function updateDocuments() {
  ksDocumentStore.fetchKsDocument().then(() => {

    ksdocuments.value = [...(ksDocumentStore.ksDocument || [])];
  });
};

const onFileRemove = () => {
  selectedFile.value = null;
  toast.add({
    severity: 'success',
    summary: 'Success',
    detail: 'File removed successfully!',
    life: 3000
  });
};

const startIndividualngestion = async (id) => {
  toast.add({ severity: 'info', summary: 'Info', detail: 'Starting Ingestion', life: 3000 });

  axios.get(`/test/ingest_document/${id}`)
    .then(response => {
      if (response.data.status == "OK") {
        toast.add({ severity: 'success', summary: 'Success', detail: 'Document ingestion started...', life: 3000 });

      }
      if (response.data.status == "ERROR") {
        toast.add({ severity: 'error', summary: 'Success', detail: 'Error ingesting document:' + response.data.message, life: 3000 });
      }

    })
    .catch(error => {
      //ingestionDialogVisible.value = true;
      console.error('Error ingesting record: ', error)
      toast.add({ severity: 'error', summary: 'Success', detail: 'Error ingesting document:' + error, life: 3000 });
    });


};

const deleteRecord = (name) => {
  const documentToDelete = ksdocuments.value.find(doc => doc.name === name);
  if (!documentToDelete) {
    console.error('Document not found');
    return;
  }

  const requestPayload = {
    ksDocumentId: documentToDelete.id,
    ksIngestionInfoId: documentToDelete.ingestionInfo.id,
    ksDoctype: documentToDelete.ingestionInfo.metadata.KsDoctype,
    ksDocSource: documentToDelete.ingestionInfo.metadata.KsDocSource,
    ksFileSource: documentToDelete.ingestionInfo.metadata.KsFileSource,
    ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName,
  };

  axios.post('/fe-api/vector-store/deleteRecords', requestPayload)
    .then(response => {
      console.log('Delete resource:', response.data)
    })
    .catch(error => {
      console.error('Error overwriting records: ', error)
      toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Overwriting', life: 3000 });
    });

};




const submitForm = async () => {
  existingDocument.value = null
  formDataToSend.value = new FormData(); // Reset del formData ogni volta

  if (selectedFile.value) {
    formDataToSend.value.append('file', selectedFile.value); // Aggiungi il file

    // Aggiungi i dati del fileUploadDTO
    formDataToSend.value.append('description', formData.value.description);
    formDataToSend.value.append('type', formData.value.type);
    formDataToSend.value.append('ksProjectName', userPrefStore.selectedProject.internal_name);
    formDataToSend.value.append('ksApplicationName', formData.value.ksApplicationName.value);
    formDataToSend.value.append('ksDocType', formData.value.ksDocType.value);
    formDataToSend.value.append('ksDocSource', formData.value.ksDocSource);
    formDataToSend.value.append('defaultChunkSize', formData.value.defaultChunkSize);
    formDataToSend.value.append('minChunkSize', formData.value.minChunkSize);
    formDataToSend.value.append('maxNumberOfChunks', formData.value.maxNumberOfChunks);
    formDataToSend.value.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);
  }
  existingDocument.value = ksdocuments.value.find(doc => doc.name === selectedFile.value.name);
  if (existingDocument.value) {
    showDialog.value = true;
    return;
  }

  await uploadFile(formDataToSend.value); // Passa formDataToSend.value a uploadFile
};

const confirmOverwrite = async () => {
  showDialog.value = false;
  deleteRecord(selectedFile.value.name);
  await uploadFile(formDataToSend.value);
};

const cancelOverwrite = () => {
  showDialog.value = false;
};

const uploadFile = async (formDataToSend) => {
  try {
    const response = await axios.post('/upload', formDataToSend, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });

    ksdocuments.value.push(response.data);

    startIndividualngestion(response.data.id);
    router.push({ name: 'ks-document' });

  } catch (error) {
    console.error('Ingestion failed:', error);
  }
};

</script>

<style scoped>
.pi-info-circle {
  margin-left: 6px;
  cursor: pointer;
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>
