<template>
  <section>
    <h2 class="text-xl font-semibold mb-4">Введите название для вашего QR‑кода</h2>
    <p class="text-gray-600 mb-4">Название поможет вам организовать ваши QR‑коды.</p>

    <form @submit.prevent="saveQRCode">
      <label for="name" class="block text-gray-700 font-semibold mb-2">Название</label>
      <InputText id="name" v-model="name" class="w-full" placeholder="Введите название" />
      <p v-if="!name" class="text-red-500 text-sm mt-1">Название обязательно.</p>

      <Button
        type="submit"
        label="Создать QR‑код"
        class="p-button-md mt-4 mb-4"
        :disabled="!name"
      />
    </form>
    <p v-if="error" class="text-red-500 mt-4">Ошибка создания QR‑кода: {{ error }}</p>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { type QRCodeDocument } from '@/types/DBDocumentTypes'
import { createQrCodeDocument } from '@/api/qrCode'

const router = useRouter()

const { placement, actions, messageDeliveryMethod, predefinedMessage } = defineProps<{
  placement: QRCodeDocument['placement']
  actions: QRCodeDocument['actions']
  messageDeliveryMethod: QRCodeDocument['messageDeliveryMethod']
  // user_uuid: QRCodeDocument['user_uuid']
  predefinedMessage: QRCodeDocument['predefinedMessage'] | undefined
}>()

const name = ref<QRCodeDocument['name']>('name')
const error = ref<string | null>(null)

async function saveQRCode() {
  try {
    const qrCodeDocument = await createQrCodeDocument({
      name: name.value,
      placement,
      actions,
      // user_uuid,
      messageDeliveryMethod,
      predefinedMessage,
    })

    error.value = null
    // Перенаправление на страницу /manage/:qr/ready
    await router.push({ name: 'ManageQRCodeReady', params: { qr_code_uri: qrCodeDocument.uri } })
  } catch (err) {
    error.value = (err as Error).message || 'Неизвестная ошибка'
  }
}
</script>
