<template>
  <LayoutWithTabs>
    <QueryRender :query="qrCodeQuery">
      <template #default="{ data: qrCodeDoc }">
        <MetaHead>
          <title>{{ qrCodeDoc.name }} — НаСвязи</title>
          <meta
            name="description"
            content="Просматривайте и управляйте сообщениями, отправленными через ваш QR-код. Полная конфиденциальность и удобный интерфейс чата"
          />
        </MetaHead>
        <div class="">
          <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
              <QRCodePlacementIcon :placement="qrCodeDoc.placement" />
              <h2 class="text-xl font-semibold">{{ qrCodeDoc.name }}</h2>
            </div>
            <div class="flex gap-2">
              <!--            <Button-->
              <!--              icon="pi pi-cog"-->
              <!--              label="Настроить"-->
              <!--              :to="`/manage/qr/${qrCodeDoc.uri}/settings`"-->
              <!--              as="router-link"-->
              <!--              severity="secondary"-->
              <!--              size="small"-->
              <!--              outlined-->
              <!--            />-->
              <Button
                icon="pi pi-qrcode"
                label="QR-код и инструкции"
                :to="`/manage/qr/${qrCodeDoc.uri}/ready`"
                as="router-link"
                severity="secondary"
                size="small"
                outlined
              />
            </div>
          </div>
          <div class="mb-4 flex gap-2 items-baseline flex-wrap">
            <strong>Ссылка: </strong>
            <LinkQRCode :url="qrCodeDoc.url" />
            <div class="flex gap-2 items-baseline flex-wrap">
              <LinkCopyButton :url="qrCodeDoc.url" />
              <LinkShareTelegramButton
                :shareUrl="qrCodeDoc.url"
                shareText="Используйте эту ссылку НаСвязи!"
              />
            </div>
          </div>
          <div>
            <p>
              <strong>Создано: </strong>
              <span class="text-nowrap">{{ formatDate(qrCodeDoc.created_at) }}</span>
            </p>
            <!--        <p><strong>Количество сканирований:</strong> {{ qrCodeDoc.scanCount }}</p>-->
            <!--        <p><strong>Последнее сканирование:</strong> {{ formatDate(qrCodeDoc.lastScan) }}</p>-->
          </div>
        </div>
      </template>

      <template #loading>
        <div class="flex-1 flex items-center place-self-center">
          <ProgressSpinner styleClass="mt-4" />
        </div>
      </template>

      <template #error="{ reload, error }">
        <div class="flex-1 flex flex-col items-center place-self-center text-center text-red-500">
          <p>Произошла ошибка при загрузке данных: {{ error.message }}</p>
          <Button label="Повторить попытку" class="p-button mt-4" @click="reload()" />
        </div>
      </template>
    </QueryRender>
  </LayoutWithTabs>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { QRCodeDocument } from '@hereconnect/types'
import { getQrCodeDocument } from '@/api/qrCode'

const props = defineProps<{ qr_code_uri: QRCodeDocument['uri'] }>()

const qrCodeUri = computed(() => props.qr_code_uri)

const qrCodeQuery = useQuery({
  queryKey: ['qrCode', qrCodeUri],
  queryFn: () => getQrCodeDocument(qrCodeUri.value),
})

// const { data: chatsData } = useQuery({
//   queryKey: ['chats', qrCodeUri],
//   queryFn: () => messagesDbRemote.find({ selector: { qr_code_uri: qrCodeUri } }),
// })

// const chats = computed(() => chatsData.value?.docs || [])

const formatDate = (date: string) => {
  if (!date) return '—'
  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(date).toLocaleDateString(['ru-RU'], options)
}
</script>
