<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">Ks document</h2>
        </div>
        <form @submit.prevent="submitForm" class="p-fluid">
          <div class="lex flex-col md:flex-row gap-4">
            <div class="flex flex-wrap gap-2 w-full">
              <label for="description">Description</label>
              <InputText id="description" type="text" v-model="formData.description" required class="w-full" />
            </div>
          </div>

          <div class="col-12 md:col-6 mb-4">
            <span class="p-float-label">
              <label for="type">Type</label>
              <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="ksApplicationName">KS Application Name</label>
              <InputText id="ksApplicationName" v-model="formData.ksApplicationName" required class="w-full" />
            </span>
          </div>

          <div class="col-12 md:col-6 mb-4">
            <span class="p-float-label">
              <label for="ksDocType">KS Doc Type</label>
              <InputText id="ksDocType" v-model="formData.ksDocType" required class="w-full" />
            </span>
          </div>

          <div class="col-12 md:col-6 mb-4">
            <span class="p-float-label">
              <label for="ksDocSource">KS Doc Source</label>
              <InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
            </span>
          </div>

          <div class="col-12 md:col-6 mb-4">
            <span class="p-float-label">
              <label for="defaultChunkSize">Default Chunk Size</label>
              <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" />
            </span>
          </div>

          <div class="col-12 md:col-6 mb-4">
            <span class="p-float-label">
              <label for="minChunkSize">Min Chunk Size</label>
              <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
            </span>
          </div>

          <div class="col-12 md:col-6 mb-4">
            <span class="p-float-label">
              <label for="maxNumberOfChunks">Max Number of Chunks</label>
              <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" />
            </span>
          </div>

          <div class="col-12 md:col-6 mb-4">
            <span class="p-float-label">
              <label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
              <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" />
            </span>
          </div>

          <div class="col-12 mb-4">
            <label for="file" class="block text-lg mb-2">File</label>
            <div class="flex align-items-center">
              <FileUpload ref="fileUpload" mode="basic" :maxFileSize="10000000" chooseLabel="Select File"
                class="p-button-rounded" @select="onFileSelect" />
            </div>
          </div>
          <Button type="submit" label="Submit" :fluid="false" class="p-button-rounded p-button-lg" />
        </form>
      </div>
    </div>
  </Fluid>
  <!--div class="card-container">
    <form @submit.prevent="submitForm" class="p-fluid">
      <div class="grid">
        <div class="col-12 mb-4">
          <label for="file" class="block text-lg mb-2">File</label>
          <div class="flex align-items-center">
            <FileUpload
              ref="fileUpload"
              mode="basic"
              :maxFileSize="10000000"
              chooseLabel="Select File"
              class="p-button-rounded"
              @select="onFileSelect"
            />

          </div>
        </div>
        <div class="col-12 md:col-6 mb-4">
          <span class="p-float-label">
            <label for="description">Description</label>
            <InputText id="description" 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">Type</label>
            <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="ksApplicationName">KS Application Name</label>
            <InputText id="ksApplicationName" v-model="formData.ksApplicationName" required class="w-full" />
          </span>
        </div>
        <div class="col-12 md:col-6 mb-4">
          <span class="p-float-label">
            <label for="ksDocType">KS Doc Type</label>
            <InputText id="ksDocType" v-model="formData.ksDocType" required class="w-full" />
          </span>
        </div>
        <div class="col-12 md:col-6 mb-4">
          <span class="p-float-label">
            <label for="ksDocSource">KS Doc Source</label>
            <InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
          </span>
        </div>
        <div class="col-12 md:col-6 mb-4">
          <span class="p-float-label">
            <label for="defaultChunkSize">Default Chunk Size</label>
            <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" />
          </span>
        </div>
        <div class="col-12 md:col-6 mb-4">
          <span class="p-float-label">
            <label for="minChunkSize">Min Chunk Size</label>
            <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
          </span>
        </div>
        <div class="col-12 md:col-6 mb-4">
          <span class="p-float-label">
            <label for="maxNumberOfChunks">Max Number of Chunks</label>
            <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" />
          </span>
        </div>
        <div class="col-12 md:col-6 mb-4">
          <span class="p-float-label">
            <label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
            <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" />
          </span>
        </div>
      </div>
      <Button type="submit" label="Submit" class="p-button-rounded p-button-lg" />
    </form>
  </div-->
</template>

<script setup>
import axios from 'axios';
import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const toast = useToast();
const router = useRouter();

const formData = ref({
  description: 'Test-UI-DevopsJ2CSystem',
  ingestionStatus: 'NEW',
  type: 'MD_DOCUMENT',
  ksApplicationName: 'jenkins',
  ksDocType: 'setup-documentation',
  ksDocSource: 'guide-for-techincal-setup',
  defaultChunkSize: 1000,
  minChunkSize: 200,
  maxNumberOfChunks: 1000,
  minChunkSizeToEmbed: 20
});

const fileUpload = ref(null);
const selectedFile = ref(null);

const onFileSelect = (event) => {
  selectedFile.value = event.files[0];
};

const submitForm = async () => {
  const formDataToSend = new FormData();

  if (selectedFile.value) {
    formDataToSend.append('file', selectedFile.value);
  }

  // Append each field separately to ensure they are correctly processed by the server
  formDataToSend.append('description', formData.value.description);
  formDataToSend.append('type', formData.value.type);
  formDataToSend.append('ksApplicationName', formData.value.ksApplicationName);
  formDataToSend.append('ksDocType', formData.value.ksDocType);
  formDataToSend.append('ksDocSource', formData.value.ksDocSource);
  formDataToSend.append('defaultChunkSize', formData.value.defaultChunkSize);
  formDataToSend.append('minChunkSize', formData.value.minChunkSize);
  formDataToSend.append('maxNumberOfChunks', formData.value.maxNumberOfChunks);
  formDataToSend.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);

  try {
    const response = await axios.post('http://localhost:8082/upload', formDataToSend, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log('Upload successful:', response.data);
    toast.add({ severity: 'success', summary: 'Success', detail: 'File uploaded successfully', life: 3000 });

    // Redirect to desktop.vue
    router.push({ name: 'ks-document' });
  } catch (error) {
    console.error('Upload failed:', error);
    toast.add({ severity: 'error', summary: 'Error', detail: 'File upload failed', life: 3000 });
  }
};

</script>

<style scoped>
.card-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

:deep(.p-card) {
  background: linear-gradient(145deg, #f3f4f6, #ffffff);
  border-radius: 15px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

:deep(.p-button) {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  border: none;
  transition: all 0.3s ease;
}

:deep(.p-button:hover) {
  background: linear-gradient(45deg, #45a049, #4CAF50);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

:deep(.p-inputtext:focus) {
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

:deep(.p-dropdown:focus) {
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

:deep(.p-inputnumber-input:focus) {
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
</style>