import React, { useState, useEffect } from 'react';
import {
  Box,
  Typography,
  Button,
  CircularProgress,
  Alert,
} from '@mui/material';
import { useAuth } from '../context/AuthContext';


export const LoginPage: React.FC = () => {
  const { login } = useAuth();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const handleTelegramAuth = async () => {
      if (window.Telegram?.WebApp?.initData) {
        setLoading(true);
        setError(null);

        try {
          window.Telegram.WebApp.ready();
          window.Telegram.WebApp.expand();

          const success = await login(window.Telegram.WebApp.initData);

          if (!success) {
            setError('Ошибка аутентификации. Пожалуйста, попробуйте снова.');
          }
        } catch (err) {
          console.error('Telegram auth error:', err);
          setError('Произошла ошибка при подключении к Telegram.');
        } finally {
          setLoading(false);
        }
      } else {
        setError('Пожалуйста, откройте приложение через Telegram.');
      }
    };

    handleTelegramAuth();
  }, [login]);

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '100vh',
        padding: 2,
        textAlign: 'center',
      }}
    >
      <Typography
        variant="h4"
        sx={{
          color: '#FFD700',
          fontWeight: 'bold',
          marginBottom: 2,
        }}
      >
        🌟 Звёздные Викторины
      </Typography>

      <Typography
        variant="h6"
        sx={{
          color: '#ffffff',
          marginBottom: 4,
        }}
      >
        Проходите викторины, сканируйте QR-коды и получайте звёзды!
      </Typography>

      {loading && (
        <Box sx={{ mt: 4 }}>
          <CircularProgress sx={{ color: '#FFD700' }} />
          <Typography
            variant="body1"
            sx={{ color: '#ffffff', mt: 2 }}
          >
            Подключение к Telegram...
          </Typography>
        </Box>
      )}

      {error && (
        <Alert
          severity="error"
          sx={{
            mt: 4,
            backgroundColor: 'rgba(244, 67, 54, 0.1)',
            color: '#ffffff',
            border: '1px solid #f44336',
          }}
        >
          {error}
        </Alert>
      )}

      {!loading && !error && !window.Telegram?.WebApp?.initData && (
        <Box sx={{ mt: 4 }}>
          <Typography
            variant="body1"
            sx={{ color: '#ffffff', mb: 2 }}
          >
            Для продолжения необходимо открыть приложение через Telegram
          </Typography>
          <Button
            variant="contained"
            sx={{
              backgroundColor: '#FFD700',
              color: '#000000',
              '&:hover': {
                backgroundColor: '#FFC700',
              },
            }}
            onClick={() => {
              if (window.Telegram?.WebApp) {
                window.Telegram.WebApp.close();
              }
            }}
          >
            Закрыть
          </Button>
        </Box>
      )}
    </Box>
  );
};