import { useEffect, useState } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { useLanguage } from '../context/LanguageContext';

function VerifyEmail() {
    const [searchParams] = useSearchParams();
    const navigate = useNavigate();
    const { t } = useLanguage();
    const [verificationStatus, setVerificationStatus] = useState('verifying'); // 'verifying', 'success', 'error'
    const [error, setError] = useState('');

    useEffect(() => {
        const verifyEmail = async () => {
            const token = searchParams.get('token');

            if (!token) {
                setVerificationStatus('error');
                setError('No verification token provided');
                return;
            }

            try {
                const response = await fetch(`http://192.168.1.35:8080/api/v1/validate-email?token=${token}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                });

                if (!response.ok) {
                    throw new Error('Verification failed');
                }

                setVerificationStatus('success');
                // Redirect to payment after 3 seconds on success
                setTimeout(() => {
                    navigate(`/payment?plan=${searchParams.get('plan')}&email=${searchParams.get('email')}`);
                }, 3000);

            } catch (err) {
                setVerificationStatus('error');
                setError(err.message);
            }
        };

        verifyEmail();
    }, [searchParams, navigate]);

    const renderContent = () => {
        switch (verificationStatus) {
            case 'verifying':
                return (
                    <div className="flex flex-col items-center">
                        <div className="w-16 h-16 border-4 border-brand-purple border-t-transparent rounded-full animate-spin"></div>
                        <p className="mt-4 text-gray-600">Verifying your email...</p>
                    </div>
                );
            case 'success':
                return (
                    <div className="flex flex-col items-center">
                        <div className="w-16 h-16 bg-brand-purple/10 rounded-full flex items-center justify-center">
                            <svg className="w-8 h-8 text-brand-purple" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                        <h2 className="mt-6 text-2xl font-semibold text-gray-900">Email Verified!</h2>
                        <p className="mt-2 text-gray-600">Your email has been successfully verified.</p>
                        <p className="mt-1 text-sm text-gray-500">Redirecting to payment...</p>
                    </div>
                );
            case 'error':
                return (
                    <div className="flex flex-col items-center">
                        <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center">
                            <svg className="w-8 h-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </div>
                        <h2 className="mt-6 text-2xl font-semibold text-gray-900">Verification Failed</h2>
                        <p className="mt-2 text-gray-600">{error}</p>
                        <button
                            onClick={() => navigate('/login')}
                            className="mt-6 px-6 py-2 bg-brand-purple text-white rounded-full hover:bg-brand-purple/90 transition-colors"
                        >
                            Go to Login
                        </button>
                    </div>
                );
            default:
                return null;
        }
    };

    return (
        <div className="min-h-screen flex items-center justify-center px-4 relative">
            {/* Background elements */}
            <div className="absolute inset-0 pointer-events-none overflow-hidden">
                <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-purple/10 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
                <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-pink/10 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
            </div>

            <div className="w-full max-w-md">
                <div className="bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-8">
                    {renderContent()}
                </div>
            </div>
        </div>
    );
}

export default VerifyEmail; 