---
import Layout from "@layouts/Layout.astro";
import { SITE_NAME } from "@constants/constants.ts";

const seo = {
  title: `Письмо отправлено | ${SITE_NAME}`,
  description: "Письмо для сброса пароля отправлено"
};
---

<Layout
  title={seo.title}
  description={seo.description}
  pagePath="/auth/forgot-password-sent"
  bodyClass="bg-[#F6F7FA]"
>
  <div class="min-h-[calc(100vh-400px)] flex items-center justify-center py-12">
    <div class="w-full max-w-md">
      <!-- Заголовок -->
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-white mb-2">
          Проверьте почту
        </h1>
      </div>

      <!-- Блок успеха -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-xl">
        <div class="text-center">
          <!-- Индикатор отправки -->
          <div id="loading-state">
            <div class="w-20 h-20 bg-gold/10 rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse">
              <svg class="w-10 h-10 text-gold animate-spin" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
            </div>
            <h2 class="text-xl font-semibold text-gray-900 mb-2">
              Отправка письма...
            </h2>
            <p class="text-gray-600 text-sm">
              Пожалуйста, подождите
            </p>
          </div>

          <!-- Успешная отправка -->
          <div id="success-state" class="hidden">
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
              </svg>
            </div>
            <h2 class="text-xl font-semibold text-gray-900 mb-2">
              Письмо отправлено!
            </h2>
            <p class="text-gray-600 text-sm mb-6">
              Мы отправили ссылку для сброса пароля на ваш email
            </p>
            <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
              <p class="text-blue-800 text-sm">
                <strong>Не получили письмо?</strong>
              </p>
              <p class="text-blue-600 text-xs mt-1">
                Проверьте папку «Спам» или попробуйте отправить запрос ещё раз
              </p>
            </div>
            <a
              href="/auth/login"
              class="inline-block bg-gold hover:bg-gold/90 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200"
            >
              Вернуться на вход
            </a>
          </div>

          <!-- Ошибка -->
          <div id="error-state" class="hidden">
            <div class="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <svg class="w-10 h-10 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </div>
            <h2 class="text-xl font-semibold text-gray-900 mb-2">
              Ошибка отправки
            </h2>
            <p id="error-message" class="text-gray-600 text-sm mb-6">
              Произошла ошибка при отправке письма
            </p>
            <div class="flex flex-col gap-3">
              <button
                id="retry-button"
                class="inline-block bg-gold hover:bg-gold/90 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200"
              >
                Попробовать снова
              </button>
              <a
                href="/auth/login"
                class="inline-block text-gray-600 hover:text-gray-800 text-sm font-medium py-2"
              >
                Вернуться на вход
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</Layout>

<script>
  const urlParams = new URLSearchParams(window.location.search);
  const email = urlParams.get('email');

  const loadingState = document.getElementById('loading-state');
  const successState = document.getElementById('success-state');
  const errorState = document.getElementById('error-state');
  const errorMessage = document.getElementById('error-message');
  const retryButton = document.getElementById('retry-button');

  function log(message, data) {
    const timestamp = new Date().toISOString();
    console.log(`[FORGOT_PASSWORD_SENT][${timestamp}] ${message}`, data || '');
  }

  async function sendPasswordResetEmail(email: string) {
    log('Начало отправки письма для сброса пароля', { email });

    try {
      const response = await fetch('/api/auth/request-password-reset', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });

      log(`Ответ сервера: ${response.status}`);

      const data = await response.json();
      log('Данные ответа:', data);

      if (!response.ok) {
        throw new Error(data.error || 'Ошибка отправки');
      }

      // Успех
      log('✅ Письмо отправлено успешно');
      showSuccess();
    } catch (error) {
      console.error('Ошибка отправки письма:', error);
      log('❌ Ошибка отправки письма:', error.message);
      showError(error.message);
    }
  }

  function showSuccess() {
    loadingState.classList.add('hidden');
    successState.classList.remove('hidden');
    log('Показан блок успеха');
  }

  function showError(message: string) {
    loadingState.classList.add('hidden');
    errorState.classList.remove('hidden');
    errorMessage.textContent = message;
    log('Показан блок ошибки');
  }

  // Обработчик кнопки "Попробовать снова"
  retryButton?.addEventListener('click', () => {
    log('Повторная попытка отправки');
    window.location.href = '/auth/forgot-password';
  });

  // Запуск отправки
  if (email) {
    log('Email найден, начинаем отправку');
    sendPasswordResetEmail(email);
  } else {
    log('❌ Email не найден в URL');
    showError('Email не указан');
  }
</script>
