import React, { useEffect, useRef } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

const TelegramAuth = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const scriptRef = useRef(null);
  const containerRef = useRef(null);
  const { user, userProfile } = useAuth();

  // Определяем, является ли это привязкой к существующему профилю
  const isLinking = location.pathname === '/profile/telegram-link';

  useEffect(() => {
    // Создаем скрипт для Telegram Login Widget
    const script = document.createElement('script');
    script.src = 'https://telegram.org/js/telegram-widget.js?22';
    script.setAttribute('data-telegram-login', 'CampFireAuthBot');
    script.setAttribute('data-size', 'large');
    script.setAttribute('data-radius', '8');
    script.setAttribute('data-request-access', 'write');
    script.setAttribute('data-userpic', 'false');
    script.setAttribute('data-onauth', 'onTelegramAuth(user)');
    script.async = true;
    scriptRef.current = script;

    // Добавляем функцию обратного вызова
    window.onTelegramAuth = async (user) => {
      try {
        const endpoint = isLinking ? '/api/auth/telegram/link' : '/api/auth/telegram';
        
        const response = await fetch(endpoint, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            ...user,
            userId: isLinking ? userProfile?.id : undefined
          }),
        });

        const data = await response.json();

        if (!response.ok) {
          throw new Error(data.error || 'Ошибка авторизации');
        }
        
        if (data.success) {
          if (isLinking) {
            // После привязки возвращаемся на страницу профиля
            navigate(`/profile/${userProfile.login}`);
          } else {
            // При авторизации сохраняем токен и перенаправляем на главную
            localStorage.setItem('token', data.token);
            // Используем setTimeout для гарантии сохранения токена перед редиректом
            setTimeout(() => {
              window.location.href = '/';
            }, 100);
          }
        } else {
          throw new Error(data.error || 'Ошибка авторизации');
        }
      } catch (error) {
        console.error('Ошибка авторизации:', error);
        alert(error.message || 'Произошла ошибка при авторизации. Пожалуйста, попробуйте снова.');
      }
    };

    // Добавляем скрипт на страницу
    if (containerRef.current) {
      containerRef.current.appendChild(script);
    }

    return () => {
      // Удаляем скрипт при размонтировании компонента
      if (containerRef.current && scriptRef.current) {
        try {
          containerRef.current.removeChild(scriptRef.current);
        } catch (error) {
          console.error('Ошибка при удалении скрипта:', error);
        }
      }
    };
  }, [navigate, isLinking, userProfile]);

  return (
    <div className="min-h-screen bg-campfire-dark pt-20 flex justify-center items-center">
      <div className="w-full max-w-md p-8 bg-campfire-charcoal rounded-lg shadow-lg">
        <h2 className="text-2xl font-bold mb-6 text-center text-campfire-light">
          {isLinking ? 'Привязка Telegram' : 'Вход через Telegram'}
        </h2>
        <div ref={containerRef} className="flex justify-center"></div>
      </div>
    </div>
  );
};

export default TelegramAuth; 