<template>
  <div class="max-w-md mx-auto p-6 rounded-lg shadow-md text-gray-900">
    <h2 class="text-2xl font-bold mb-6 text-primary text-center">Заполните контактные данные</h2>

    <form @submit.prevent="onSubmit" class="space-y-4">
      <div>
        <label for="to" class="block text-sm font-medium text-primary mb-2"> Ваш e-mail: </label>
        <input
          id="to"
          v-model="to"
          type="email"
          required
          placeholder="email@example.com"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
        />
      </div>

      <UiButton type="submit" :disabled="isLoading" class="w-[400px]">
        <span v-if="isLoading">Перехожу...</span>
        <span v-else>Перейти к оплате</span>
      </UiButton>
    </form>

    <div v-if="status" class="mt-4 p-3 rounded-md" :class="statusClass">
      {{ status }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const mail = useMail()

const to = ref('')
const status = ref('')
const isLoading = ref(false)

const statusClass = computed(() => {
  if (status.value.includes('Ошибка')) {
    return 'bg-red-100 text-red-700 border border-red-200'
  }
  if (status.value.includes('отправлено') || status.value.includes('подписка')) {
    return 'bg-green-100 text-green-700 border border-green-200'
  }
  return 'bg-blue-100 text-blue-700 border border-blue-200'
})

async function onSubmit() {
  if (!to.value) {
    status.value = 'Пожалуйста, введите ваш e-mail'
    return
  }

  isLoading.value = true
  status.value = ''

  try {
    const emailData = {
      to: to.value,
      subject: 'Новая подписка на рассылку книги!',
      text: `Пользователь с e-mail: ${to.value} подписался на рассылку книги.`,
    }

    await mail.send(emailData)

    status.value = 'Успешная подписка! Проверьте вашу почту.'

    // Очищаем форму
    to.value = ''
  } catch (error) {
    console.error('Ошибка отправки письма:', error)
    status.value = `Ошибка отправки: ${error.message || 'Неизвестная ошибка'}`
  } finally {
    isLoading.value = false
  }
}
</script>
