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

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(`${API_HOST}/api/v1/onboard/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="bg-white rounded-2xl shadow-lg p-8 space-y-6">
                        <div className="flex items-center justify-center">
                            <div className="w-16 h-16">
                                <div className="w-full h-full border-4 border-brand-purple rounded-full animate-spin"></div>
                            </div>
                        </div>
                        <p className="text-gray-600 text-center">{t('verify.verifying')}</p>
                    </div>
                );
            case 'success':
                return (
                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-6">
                        <div className="flex items-center justify-center">
                            <div className="w-16 h-16 relative">
                                <div className="w-full h-full border-4 border-brand-purple rounded-full"></div>
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <span className="text-3xl text-brand-purple">✓</span>
                                </div>
                            </div>
                        </div>
                        <div className="text-center space-y-4">
                            <h2 className="text-2xl font-medium text-gray-900">{t('verify.success.title')}</h2>
                            <p className="text-gray-600">{t('verify.success.message')}</p>
                            <p className="text-sm text-gray-500">{t('verify.success.redirecting')}</p>
                        </div>
                    </div>
                );
            case 'error':
                return (
                    <div className="bg-white rounded-2xl shadow-lg p-8 space-y-6">
                        <div className="flex items-center justify-center">
                            <div className="w-16 h-16 relative">
                                <div className="w-full h-full border-4 border-red-500 rounded-full"></div>
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <span className="text-3xl text-red-500">×</span>
                                </div>
                            </div>
                        </div>
                        <div className="text-center space-y-4">
                            <h2 className="text-2xl font-medium text-gray-900">{t('verify.error.title')}</h2>
                            <p className="text-gray-600">{error}</p>
                        </div>
                        <Link 
                            to="/login" 
                            className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
                        >
                            <span>{t('verify.error.backToLogin')}</span>
                            <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                        </Link>
                    </div>
                );
            default:
                return null;
        }
    };

    return (
        <div className="relative min-h-screen bg-white">
            {/* Floating elements */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
            </div>

            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
                {/* Header section */}
                <div className="text-center mb-16">
                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
                        {t('verify.title')}
                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
                    </h1>
                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
                        {t('verify.description')}
                    </p>
                </div>

                {/* Content */}
                <div className="max-w-md mx-auto">
                    {renderContent()}
                </div>
            </div>

            <Footer />
        </div>
    );
}

export default VerifyEmail;