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

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

interface Props {
  token?: string;
}

const { token } = Astro.props;
---

<Layout
  title={seo.title}
  description={seo.description}
  pagePath="/auth/confirm"
  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>
      </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">
              Подтверждение email...
            </h2>
            <p class="text-gray-600 text-sm">
              Пожалуйста, подождите
            </p>
          </div>

          <!-- Успешное подтверждение -->
          <div id="success-state" class="hidden">
            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </div>
            <h2 class="text-xl font-semibold text-gray-900 mb-2">
              Email успешно подтверждён!
            </h2>
            <p class="text-gray-600 text-sm mb-6">
              Ваш аккаунт активирован. Перенаправляем на страницу входа...
            </p>
            <div class="flex justify-center">
              <div class="w-32 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div id="progress-bar" class="h-full bg-gold transition-all duration-100" style="width: 0%"></div>
              </div>
            </div>
          </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">
              Произошла ошибка при подтверждении email
            </p>
            <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>
      </div>
    </div>
  </div>
</Layout>

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

  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 progressBar = document.getElementById('progress-bar');

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

  async function confirmEmail(token: string) {
    log('Начало подтверждения email', { token: token.substring(0, 10) + '...' });

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

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

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

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

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

  function showSuccess() {
    loadingState.classList.add('hidden');
    successState.classList.remove('hidden');

    // Анимация прогресс-бара
    let progress = 0;
    const interval = setInterval(() => {
      progress += 2; // 100% / 5000ms * 100ms = 2%
      progressBar.style.width = `${progress}%`;

      if (progress >= 100) {
        clearInterval(interval);
        log('Редирект на страницу входа');
        window.location.href = '/auth/login';
      }
    }, 100);
  }

  function showError(message: string) {
    loadingState.classList.add('hidden');
    errorState.classList.remove('hidden');
    errorMessage.textContent = message;
  }

  // Запуск подтверждения
  if (token) {
    log('Токен найден, начинаем подтверждение');
    confirmEmail(token);
  } else {
    log('❌ Токен не найден в URL');
    showError('Ссылка подтверждения не содержит токен');
  }
</script>
