<template>
  <LayoutWithTabs>
    <MetaHead>
      <title>Ваши Чаты — НаСвязи</title>
      <meta
        name="description"
        content="Просматривайте и управляйте сообщениями, отправленными через ваш QR-код. Полная конфиденциальность и удобный интерфейс чата"
      />
    </MetaHead>

    <QueryRender :query="query">
      <template #default="{ data }">
        <div
          v-if="data.length > 0"
          class="grid grid-cols-1 gap-5 place-self-center sm:place-self-start w-full"
        >
          <ChatCard
            v-for="row in data"
            :key="row.id"
            :chatDoc="row.doc!"
            :qrCodeDoc="row.qrCodeDoc"
          />
        </div>

        <div v-else class="place-self-center">
          <h1 class="text-2xl font-bold mb-4 text-gray-500">У вас пока нет чатов</h1>
        </div>
      </template>

      <template #error="{ reload }">
        <div class="text-center text-red-500">
          <p>Произошла ошибка при загрузке данных. Пожалуйста, попробуйте позже.</p>
          <Button label="Повторить попытку" class="p-button mt-4" @click="reload()" />
        </div>
      </template>

      <template #loading>
        <div class="text-center text-gray-500">
          <ProgressSpinner styleClass="mt-4" />
        </div>
      </template>
    </QueryRender>
  </LayoutWithTabs>
</template>

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'
import { chatsDbRemote, qrCodeDbLocal } from '@/api/dbs'
import { getUserUuid } from '@/utils/getUserUuid'
import { type QRCodeDocument } from '@hereconnect/types'

const user_uuid = getUserUuid()
const query = useQuery({
  queryKey: ['chats', user_uuid],
  queryFn: async () => {
    const { rows } = await chatsDbRemote.allDocs({
      startkey: `chat:${user_uuid}:`,
      endkey: `chat:${user_uuid}:\uffff`,
      limit: Number.MAX_SAFE_INTEGER,
      include_docs: true,
    })
    const qrCodes = await qrCodeDbLocal.allDocs({
      keys: rows.map((row) => `qr_code:${row.doc!.qr_code_uri}`),
      include_docs: true,
    })
    const result: ((typeof rows)[number] & { qrCodeDoc?: QRCodeDocument })[] = []
    qrCodes.rows.forEach((row, index) => {
      result[index] = rows[index]
      if ('doc' in row) {
        result[index].qrCodeDoc = row.doc!
      }
    })
    return result
  },
})
</script>
