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

const seo = {
  title: `Подтверждение email | ${SITE_NAME}`,
  description: "Подтвердите ваш email для активации аккаунта"
};
---

<Layout
    title={seo.title}
    description={seo.description}
    pagePath="/auth/verify"
    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">
          Подтверждение email
        </h1>
        <p class="text-gray-500 text-sm">
          Мы отправили письмо с подтверждением на ваш email
        </p>
      </div>

      <!-- Блок ожидания -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-xl">
        <div class="text-center">
          <!-- Иконка письма -->
          <div class="w-20 h-20 bg-gold/10 rounded-full flex items-center justify-center mx-auto mb-6">
            <svg class="w-10 h-10 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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"/>
            </svg>
          </div>

          <h2 class="text-xl font-semibold text-gray-900 mb-2">
            Проверьте вашу почту
          </h2>

          <p class="text-gray-600 text-sm mb-6">
            Мы отправили ссылку для подтверждения на <span id="user-email" class="font-medium text-gold"></span>
          </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>
              <br />
              Проверьте папку "Спам" или нажмите кнопку ниже для повторной отправки
            </p>
          </div>

          <!-- Кнопка повторной отправки -->
          <button
              id="resend-btn"
              type="button"
              class="w-full bg-gold hover:bg-gold/90 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Отправить повторно
          </button>

          <!-- Таймер -->
          <p id="timer-text" class="text-gray-500 text-sm mt-4 hidden">
            Следующая отправка возможна через <span id="countdown">60</span> сек.
          </p>

          <!-- Ссылка на вход -->
          <p class="text-center text-sm text-gray-500 mt-6">
            Уже подтвердили email? <a
              href="/auth/login"
              class="text-gold hover:underline font-medium">Войти</a
          >
          </p>
        </div>
      </div>
    </div>
  </div>
</Layout>

<script>
  const urlParams = new URLSearchParams(window.location.search);
  const email = urlParams.get('email');
  const resendBtn = document.getElementById('resend-btn') as HTMLButtonElement | null;
  const timerText = document.getElementById('timer-text');
  const countdownEl = document.getElementById('countdown');
  const userEmailEl = document.getElementById('user-email');

  // Логирование
  function log(message: string, data?: unknown): void {
    const timestamp = new Date().toISOString();
    console.log(`[VERIFY PAGE][${timestamp}] ${message}`, data || '');
  }

  // Отображение email
  if (email && userEmailEl) {
    userEmailEl.textContent = email;
    log(`Страница загружена для email: ${email}`);
  } else {
    log('Warning: email не найден в URL параметрах');
  }

  // Таймер для кнопки
  let countdown = 60;
  let canResend = true;

  function startTimer(): void {
    if (!resendBtn || !timerText || !countdownEl) return;

    canResend = false;
    resendBtn.disabled = true;
    timerText.classList.remove('hidden');
    countdown = 60;
    countdownEl.textContent = countdown.toString();
    log('Таймер запущен');

    const interval = setInterval(() => {
      if (!countdownEl) return;

      countdown--;
      countdownEl.textContent = countdown.toString();

      if (countdown <= 0) {
        clearInterval(interval);
        canResend = true;
        if (resendBtn) {
          resendBtn.disabled = false;
        }
        timerText?.classList.add('hidden');
        log('Таймер завершен, кнопка активна');
      }
    }, 1000);
  }

  // Отправка повторного письма
  resendBtn?.addEventListener('click', async () => {
    if (!canResend || !email || !resendBtn) {
      log(`Клик отклонен: canResend=${canResend}, email=${email}`);
      return;
    }

    log('Отправка повторного письма подтверждения...');

    const originalText = resendBtn.textContent || '';
    resendBtn.textContent = 'Отправка...';
    resendBtn.disabled = true;

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

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

      const data = await response.json() as { error?: string };
      log('Данные ответа:', data);

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

      alert('Письмо отправлено повторно! Проверьте вашу почту.');
      log('✅ Письмо отправлено успешно');
      startTimer();
    } catch (error: unknown) {
      console.error('Ошибка:', error);
      const errorMessage = error instanceof Error ? error.message : 'Неизвестная ошибка';
      log('❌ Ошибка отправки:', errorMessage);
      alert(errorMessage || 'Ошибка отправки письма');
    } finally {
      if (canResend && resendBtn) {
        resendBtn.textContent = originalText;
      }
    }
  });

  // Запуск таймера при загрузке
  log('Инициализация страницы');
  startTimer();
</script>