import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Card, Button } from '../../components/ui';
import { CheckCircle, AlertCircle } from 'lucide-react';
import { showToast } from '../../utils/toast';

export const RegisterCompletePage: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  useEffect(() => {
    // Check for Stripe redirect parameters
    const setupIntent = searchParams.get('setup_intent');
    const redirectStatus = searchParams.get('redirect_status');
    const setupIntentClientSecret = searchParams.get('setup_intent_client_secret');

    if (redirectStatus === 'succeeded' && setupIntent) {
      // Successful 3DS authentication
      showToast.success(t('auth:register.3ds_success', 'Autenticación 3D Secure completada con éxito'), {
        title: t('auth:alerts.success', 'Éxito')
      });
      
      // Redirect to login page after successful authentication
      setTimeout(() => {
        navigate('/login', {
          state: {
            from3DS: true,
            message: t('auth:register.3ds_complete', 'Tu tarjeta ha sido verificada. Por favor, inicia sesión.')
          }
        });
      }, 3000);
    } else if (redirectStatus === 'failed') {
      // Failed 3DS authentication
      showToast.error(t('auth:register.3ds_failed', 'La autenticación 3D Secure ha fallado'), {
        title: t('auth:alerts.authentication_error', 'Error de autenticación')
      });
      
      // Redirect to registration page to try again
      setTimeout(() => {
        navigate('/register', {
          state: {
            error: t('auth:register.3ds_failed_try_again', 'La autenticación 3D Secure ha fallado. Por favor, intenta de nuevo con otra tarjeta.')
          }
        });
      }, 3000);
    }
  }, [searchParams, navigate, t]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-bg-primary p-4">
      <Card className="w-full max-w-md p-8 text-center">
        <div className="mb-6">
          {searchParams.get('redirect_status') === 'succeeded' ? (
            <CheckCircle className="w-16 h-16 text-success mx-auto mb-4" />
          ) : (
            <AlertCircle className="w-16 h-16 text-danger mx-auto mb-4" />
          )}
        </div>
        
        <h2 className="text-2xl font-bold text-text-primary mb-4">
          {searchParams.get('redirect_status') === 'succeeded' 
            ? t('auth:register.processing_3ds', 'Procesando autenticación')
            : t('auth:register.3ds_error', 'Error de autenticación')}
        </h2>
        
        <p className="text-text-secondary mb-6">
          {searchParams.get('redirect_status') === 'succeeded' 
            ? t('auth:register.3ds_redirect_message', 'Tu autenticación 3D Secure se ha completado. Serás redirigido en breve...')
            : t('auth:register.3ds_failed_message', 'Hubo un problema con la autenticación 3D Secure. Serás redirigido para intentar de nuevo...')}
        </p>
        
        <Button
          variant="primary"
          onClick={() => navigate('/login')}
          className="w-full mb-3"
        >
          {t('auth:register.go_to_login', 'Ir a inicio de sesión')}
        </Button>
        
        <Button
          variant="outline"
          onClick={() => navigate('/register')}
          className="w-full"
        >
          {t('auth:register.try_again', 'Intentar registro de nuevo')}
        </Button>
      </Card>
    </div>
  );
};