<template>
  <MagicoModal v-model="modal" title="Generuj AI">
    <div class="p-1">
      <h5>O czym chcesz napisać?</h5>
      <textarea
        class="form-control mb-3"
        rows="5"
        v-model="text"
        placeholder="Napisz krótki opis, aby AI mogło wygenerować treść."
      ></textarea>
      <div class="form-group">
        <label>Ilość znaków</label>
        <select v-model="count" class="form-select">
          <option value="500">500</option>
          <option value="1000">1000</option>
          <option value="2000">2000</option>
        </select>
      </div>
      <div class="text-center mt-3">
        <button :disabled="loader" @click="generate" class="btn btn-primary">
          <span class="spinner-border spinner-border-sm me-2" v-if="loader"></span>
          Generuj
        </button>
      </div>
    </div>
  </MagicoModal>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
const modal = ref(true)
import axios from 'axios';
import MagicoModal from './MagicoModal.vue'
// import axios from '@/api/sync-axios'
const props = defineProps({
  product: {
    type: Object,
    required: true
  },
  modelValue: {
    type: Object,
    default: true
  },
  lang: {
    type: String
  },
  callback: {
    type: Function,
    default: () => {}
  }
})
const text = ref('')
const offer = ref({})
const loader = ref(false)
onMounted(() => {
  offer.value = props.modelValue
})

watch(
  () => props.modelValue,
  (newValue) => {
    offer.value = newValue
  },
  { immediate: true }
)
const count = ref(500)
const emit = defineEmits(['offerGenerated', 'update:modelValue'])
function generate() {
  const prompt = `Twoim zadaniem jest stworzenie opisu.
Do "content" wstaw tekst w formacie HTML, jako akapity dla edytora WYSIWYG na podstawie dostarczonej treści na maksymalnie ${count.value} znaków.
Odpowiedź wygeneruj w języku określanym przez kod kraju: pl.
Wynik zwróć jako czysty JSON bez dodatkowego formatowania, bez używania \`\`\`json i \`\`\`, bez używania \`\`\`html i \`\`\`:
{
  "content": ""
}`
  const query = `${text.value}`
  loader.value = true
  axios
    .post(
      'https://ai.magico.pro/api/v1/message',
      { prompt, query },
      {
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('access_token')
        }
      }
    )
    .then((response) => {
      loader.value = false
      modal.value = false // Close the modal after generation
      // Handle the response, e.g., display the generated content
      const jsonText = response.data.data.choices[0].message.content
      const jsonData = JSON.parse(jsonText)
      console.log('Generated Offer Data:', jsonData)
      emit('update:modelValue', offer.value)
      props.callback(jsonData)
      // Assuming you want to do something with the generated data
      // modal.value = false; // Close the modal after generation
    })
    .catch((error) => {
      console.error('Błąd podczas generowania oferty:', error)
      alert('Wystąpił błąd podczas generowania oferty.')
    })
}

function setFeatureValue(featureName, value) {
  const feature = offer.value.features.find((f) => f.feature_name === featureName)
  if (feature) {
    feature.feature_value = value
  }
}
</script>
