<template>
  <div class="space-y-6 p-4">
    <!-- Update Media Message -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-[var(--wa-text)]">Actualizar Mensaje de Media</h3>
      <p class="text-sm text-[var(--wa-text-muted)]">
        Actualiza un mensaje de media expirado. Proporciona el objeto proto.IWebMessageInfo completo.
      </p>

      <div class="space-y-2">
        <p class="text-sm text-[var(--wa-text-muted)]">Mensaje (JSON proto.IWebMessageInfo):</p>
        <UTextarea
          v-model="messageJson"
          placeholder='{
  "key": {
    "remoteJid": "...",
    "fromMe": false,
    "id": "..."
  },
  "message": {
    "imageMessage": {
      "url": "...",
      "mimetype": "image/jpeg",
      ...
    }
  },
  "messageTimestamp": 123456789
}'
          :rows="12"
          class="font-mono text-sm"
        />
      </div>

      <UButton
        :loading="loading"
        :disabled="!instanceId || !messageJson"
        @click="updateMedia"
      >
        Actualizar Media
      </UButton>
    </div>

    <hr class="border-[var(--wa-border)]" />

    <!-- Help -->
    <div class="space-y-2">
      <h4 class="text-md font-medium text-[var(--wa-text)]">Ayuda</h4>
      <p class="text-sm text-[var(--wa-text-muted)]">
        Esta funcion se usa para recargar media de mensajes cuyo contenido ha expirado.
        Necesitas proporcionar el mensaje original completo (puedes obtenerlo de la base de datos
        en la columna raw_message de la tabla messages).
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  instanceId: string | null
}>()

const emit = defineEmits<{
  (e: 'response', data: any): void
}>()

const messageJson = ref('')
const loading = ref(false)

const updateMedia = async () => {
  loading.value = true
  try {
    let message: any
    try {
      message = JSON.parse(messageJson.value)
    } catch {
      emit('response', { success: false, error: 'Invalid JSON for message' })
      loading.value = false
      return
    }

    const result = await $fetch('/api/debug/media/update', {
      method: 'POST',
      body: {
        instanceId: props.instanceId,
        message
      }
    })
    emit('response', result)
  } catch (error: any) {
    emit('response', { success: false, error: error.data?.message || error.message })
  } finally {
    loading.value = false
  }
}
</script>
