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

    <main
      class="flex-grow flex justify-center py-6 px-4 md:px-6"
      :class="{
        'items-center':
          svgQueryIsLoading || qrCodeQueryIsLoading || svgQueryIsError || qrCodeQueryIsError,
      }"
    >
      <section class="max-w-prose w-full flex flex-col gap-1">
        <div
          v-if="svgQueryIsLoading || qrCodeQueryIsLoading"
          class="text-gray-500 dark:text-gray-400 mt-4 text-center"
        >
          <ProgressSpinner styleClass="mt-4" />
        </div>
        <p v-else-if="svgQueryIsError" class="text-red-500 dark:text-red-400 mt-4 text-center">
          Ошибка генерации QR‑кода: {{ svgQueryError?.message }}
        </p>
        <p v-else-if="qrCodeQueryIsError" class="text-red-500 dark:text-red-400 mt-4 text-center">
          Ошибка загрузки данных QR‑кода: {{ qrCodeQueryError!.message }}
        </p>
        <template v-else>
          <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
            Ваш QR‑код готов
          </h2>
          <p class="text-gray-600 dark:text-gray-400 mb-4">
            Сохраните его и ознакомьтесь с инструкциями по размещению.
          </p>

          <!-- Рендер QR‑кода -->
          <div class="border dark:border-gray-700 p-4 bg-white rounded-lg mb-6">
            <!-- dark:bg-gray-800 -->

            <img v-if="!svgQueryIsLoading && svgQueryData" :src="svgQueryData" alt="QR‑код" />
          </div>

          <!-- Кнопки для скачивания -->
          <div
            v-if="!svgQueryIsLoading && !qrCodeQueryIsError && svgQueryData"
            class="flex flex-row gap-4 justify-center"
          >
            <Button
              label="Скачать SVG"
              icon="pi pi-download"
              class="p-button-sm dark:border-orange-500 dark:hover:border-orange-600 dark:text-gray-300"
              :href="svgQueryData"
              :download="`${sanitizedFileName}.svg`"
              as="a"
            />

            <DownloadImageButton
              :svgUrl="svgQueryData"
              :filename="`${sanitizedFileName}.png`"
              label="Скачать PNG"
              type="image/png"
              :width="width"
            />
          </div>

          <div v-if="qrCodeDoc && qrCodeDoc.url" class="text-center mt-6 text-sm">
            <div>
              Ссылка в QR-коде:
              <LinkQRCode :url="qrCodeDoc.url" />
            </div>
            <div class="flex gap-2 justify-center mt-2">
              <LinkCopyButton :url="qrCodeDoc.url" />
              <LinkShareTelegramButton
                :shareUrl="qrCodeDoc.url"
                shareText="Используйте эту ссылку НаСвязи!"
              />
            </div>
          </div>

          <!-- Инструкции по размещению -->
          <ManagePlacementInstructions
            :placement="qrCodeDoc?.placement"
            v-if="qrCodeDoc?.placement"
          />
        </template>
      </section>
    </main>
  </LayoutWithTabs>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useQuery } from '@tanstack/vue-query'
import QRCodeStyling from 'qr-code-styling'
import { optimizeSvg } from '@/utils/images/svg/optimizeSvg'
import { replaceFillInSvg } from '@/utils/images/svg/replaceFillInSvg'
import { getQrCodeDocument } from '@/api/qrCode'
import { type QRCodeDocument } from '@hereconnect/types'
import { addLabelToSvg } from '@/utils/images/svg/addLabelToSvg'
import logo from '@/assets/logo.svg?raw'
import { sanitizeFileName } from '@/utils/sanitizeFileName'

const { qr_code_uri } = defineProps<{ qr_code_uri: QRCodeDocument['uri'] }>()
const color = ref('#000') // Цвет для текста QR-кода
const logoColor = ref(color.value) // Цвет логотипа // #FB2500
const label = ref('Сообщите о проблеме или задайте вопрос')
const width = ref(256 * 4)
const height = ref(width.value)

// Хук для загрузки данных QR‑кода
const {
  data: qrCodeDoc,
  isLoading: qrCodeQueryIsLoading,
  isError: qrCodeQueryIsError,
  error: qrCodeQueryError,
} = useQuery({
  queryKey: ['qrCode', computed(() => qr_code_uri)],
  queryFn: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return getQrCodeDocument(qr_code_uri)
  },
})

const sanitizedFileName = computed(() => {
  const sanitized = qrCodeDoc.value?.name && sanitizeFileName(qrCodeDoc.value?.name)

  return sanitized ? `${sanitized} QR-Code - НаСвязи` : 'QR-Code - НаСвязи'
})

// Генерация URL для WhatsApp
// const whatsappShareUrl = computed(
//   () => `https://api.whatsapp.com/send?text=${shareText}%0A${siteUrl}`,
// )

// Генерация и оптимизация SVG
const {
  isLoading: svgQueryIsLoading,
  isError: svgQueryIsError,
  data: svgQueryData,
  error: svgQueryError,
} = useQuery({
  queryKey: ['svg', computed(() => qr_code_uri)],
  enabled: computed(() => !!qrCodeDoc.value?.url),
  retry: false,
  queryFn: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))

    // Заменяем цвет `fill` в логотипе
    const updatedLogo = replaceFillInSvg(logo, logoColor.value)

    // Добавляем текст в логотип (если нужно)
    const logoWithText = addLabelToSvg(updatedLogo, 'НаСвязи', logoColor.value, 0.01)

    const image = URL.createObjectURL(new Blob([logoWithText], { type: 'image/svg+xml' }))

    // Инициализация QRCodeStyling
    const qrCode = new QRCodeStyling({
      width: width.value,
      height: height.value,
      data: qrCodeDoc.value!.url,
      image,
      imageOptions: {
        margin: 20,
        imageSize: 0.45,
      },
      type: 'svg',
      backgroundOptions: {
        color: 'transparent',
      },
      cornersSquareOptions: {
        type: 'extra-rounded',
      },
      cornersDotOptions: {
        type: 'dot',
      },
      dotsOptions: {
        color: color.value,
        type: 'classy-rounded',
      },
    })

    const blob = await qrCode.getRawData('svg')
    if (blob && blob instanceof Blob) {
      const text = await blob.text()
      let resultSvg = optimizeSvg(text)
      if (!resultSvg) {
        throw new Error('Ошибка оптимизации SVG')
      }
      if (label.value) {
        resultSvg = addLabelToSvg(resultSvg, label.value, color.value)
      }
      return URL.createObjectURL(new Blob([resultSvg], { type: 'image/svg+xml' }))
    } else {
      throw new Error('Ошибка генерации QR‑кода')
    }
  },
})
</script>
