<template>
  <section class="max-w-prose w-full">
    <p
      class="text-gray-600 dark:text-gray-400 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="w-full p-button-outlined text-left dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700"
          :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 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700"
        placeholder="Напишите сообщение"
        :disabled="loading"
      />
      <Button
        type="submit"
        icon="pi pi-send"
        class="p-button-md dark:bg-primary-600 dark:hover:bg-primary-700"
        :disabled="!customMessage.trim() || loading"
      />
    </form>

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

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

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 date = new Date()
    const created_at = date.toISOString()
    const chat = (date.getTime() - new Date(doc.created_at).getTime()).toString(36)
    const user_uuid = getUserUuid()
    const browser_uuid = getBrowserUuid()

    const chatGuestDoc: ChatDocument = {
      _id: `chat:${user_uuid}:guest:${doc.uri}:${chat}`,
      type: 'chat',
      qr_code_uri: doc.uri,
      role: 'guest',
      // unread_messages_count: 0,
      chat,
      user_uuid,
      to_user_uuid: doc.user_uuid,
      created_at,
      // last_message_at: created_at,
    }

    const chatOwnerDoc: ChatDocument = {
      _id: `chat:${doc.user_uuid}:owner:${doc.uri}:${chat}`,
      type: 'chat',
      qr_code_uri: doc.uri,
      role: 'owner',
      chat,
      // unread_messages_count: 1,
      user_uuid: doc.user_uuid,
      to_user_uuid: user_uuid,
      created_at,
      // last_message_at: created_at,
    }

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

    await Promise.all([
      chatsDbRemote.bulkDocs([chatGuestDoc, chatOwnerDoc]),

      // Сохраняем сообщение в локальную базу данных
      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>
