<template>
  <div class="flex flex-col min-h-full">
    <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
      <section class="max-w-prose w-full flex flex-col gap-1">
        <h2 class="text-xl font-semibold mb-4">Ваш QR‑код готов</h2>
        <p class="text-gray-600 mb-4">Сохраните его и ознакомьтесь с инструкциями по размещению.</p>

        <!-- Рендер QR‑кода -->
        <div v-if="!svgQueryIsLoading && svgQueryData" class="border p-4 bg-white rounded-lg mb-6">
          <img :src="svgQueryData" alt="QR‑код" />
        </div>
        <p v-else-if="svgQueryIsError" class="text-red-500 mt-4">
          Ошибка генерации QR‑кода: {{ svgQueryError?.message }}
        </p>

        <!-- Сообщение об ошибке -->
        <p v-if="qrCodeQueryIsError" class="text-red-500 mt-4">
          Ошибка загрузки данных QR‑кода: {{ qrCodeQueryError!.message }}
        </p>
        <p v-if="svgQueryIsLoading" class="text-gray-500 mt-4">Загрузка...</p>

        <!-- Кнопки для скачивания -->
        <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"
            :href="svgQueryData"
            :download="`${sanitizedFileName}.svg`"
            as="a"
          />

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

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

    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">
      <p>
        Нужен еще один?
        <a href="/create" class="underline">Создайте QR‑код</a>.
      </p>
      <p class="mt-1">
        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline"
          >поддержке</a
        >.
      </p>
    </footer>
  </div>
</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 '@/types/DBDocumentTypes'
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,
  isError: qrCodeQueryIsError,
  error: qrCodeQueryError,
} = useQuery({
  queryKey: ['qrCode', computed(() => qr_code_uri)],
  queryFn: () => getQrCodeDocument(qr_code_uri),
})

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

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

// Генерация и оптимизация 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 () => {
    // Заменяем цвет `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>
