<template>
  <section class="max-w-prose w-full">
    <p class="text-gray-600 mb-4 text-center" v-if="doc.predefinedMessages?.length">
      Выберите сообщение из списка или напишите своё:
    </p>

    <!-- Предустановленные сообщения -->
    <div v-if="doc.predefinedMessages?.length" class="mb-6">
      <div class="flex flex-col gap-3">
        <Button
          v-for="(message, index) in doc.predefinedMessages"
          :key="index"
          class="p-button-outlined w-full text-left"
          :disabled="loading"
          @click="sendPresetMessage(message)"
        >
          {{ message }}
        </Button>
      </div>
    </div>

    <!-- Текстовое поле ввода с кнопкой -->
    <form @submit.prevent="sendCustomMessage" class="flex gap-2 items-center">
      <InputText
        id="customMessage"
        v-model="customMessage"
        class="flex-1"
        placeholder="Напишите сообщение"
        :disabled="loading"
      />
      <Button
        type="submit"
        icon="pi pi-send"
        class="p-button-md"
        :disabled="!customMessage.trim() || loading"
      />
    </form>

    <p v-if="success" class="text-green-500 mt-4 text-center">Сообщение отправлено!</p>
    <p v-if="error" class="text-red-500 mt-4 text-center">Ошибка: {{ error }}</p>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { messagesDbLocal as db } from '@/api/dbs'
import type { MessageDocument, QRCodeDocument } from '@/types/DBDocumentTypes'
import { ROUTE_NAMES } from '@/constants/routes'

const { doc } = defineProps<{
  doc: QRCodeDocument
}>()

const router = useRouter()

// Локальные состояния
const customMessage = ref('')
const success = ref(false)
const error = ref<string | null>(null)
const loading = ref(false)

// Генерация идентификатора чата

// Функция для отправки сообщения
async function sendMessage(content: string) {
  try {
    loading.value = true

    const chat = (new Date().getTime() - new Date(doc.created_at).getTime()).toString(36)

    const message: MessageDocument = {
      _id: `message:${doc.uri}:${chat}:${new Date().toISOString()}`,
      type: 'message',
      qr_code_uri: doc.uri,
      chat,
      created_at: new Date().toISOString(),
      from: 'guest',
      body: content.trim(),
    }

    // Сохраняем сообщение в локальную базу данных
    await db.put(message)

    success.value = true
    error.value = null
    customMessage.value = ''

    // Перенаправляем на страницу чата
    await router.push({ name: ROUTE_NAMES.PUBLIC_CHAT, params: { qr_code_uri: doc.uri, chat } })
  } catch {
    success.value = false
    error.value = 'Ошибка отправки сообщения'
  } finally {
    loading.value = false
  }
}

// Функция для отправки предустановленного сообщения
async function sendPresetMessage(message: string) {
  await sendMessage(message)
}

// Функция для отправки пользовательского сообщения
async function sendCustomMessage() {
  await sendMessage(customMessage.value)
}
</script>
