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 VerifyEmailConfirm() {
    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]);

    return (
        <div className="relative min-h-screen bg-white">
            {/* Technical grid background */}
            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>

            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
                {/* Header section */}
                <div className="grid-layout mb-16">
                    <div className="col-span-12 md:col-span-8">
                        <h1 className="brutalist-heading relative">
                            {verificationStatus === 'verifying' && 'Verifying Email'}
                            {verificationStatus === 'success' && 'Email Verified!'}
                            {verificationStatus === 'error' && 'Verification Failed'}
                            <div className="absolute -right-8 -top-8 w-16 h-16">
                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
                            </div>
                        </h1>
                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
                            {verificationStatus === 'verifying' && 'Please wait while we verify your email address...'}
                            {verificationStatus === 'success' && 'Your email has been successfully verified. Redirecting to payment...'}
                            {verificationStatus === 'error' && 'We encountered an error while verifying your email.'}
                        </p>
                    </div>
                </div>

                <div className="geometric-divider mb-16"></div>

                {/* Content */}
                <div className="grid-layout">
                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
                        <div className="brutalist-card p-6 space-y-6">
                            <div className="flex items-center justify-center">
                                {verificationStatus === 'verifying' && (
                                    <div className="w-16 h-16">
                                        <div className="geometric-shape circle w-full h-full border-4 border-black animate-spin"></div>
                                    </div>
                                )}
                                {verificationStatus === 'success' && (
                                    <div className="w-16 h-16">
                                        <div className="geometric-shape circle w-full h-full border-4 border-black">
                                            <div className="absolute inset-0 flex items-center justify-center">
                                                <span className="text-2xl">✓</span>
                                            </div>
                                        </div>
                                    </div>
                                )}
                                {verificationStatus === 'error' && (
                                    <div className="w-16 h-16">
                                        <div className="geometric-shape circle w-full h-full border-4 border-black">
                                            <div className="absolute inset-0 flex items-center justify-center">
                                                <span className="text-2xl">×</span>
                                            </div>
                                        </div>
                                    </div>
                                )}
                            </div>

                            <div className="text-center space-y-4">
                                {verificationStatus === 'verifying' && (
                                    <p className="monospace">
                                        Verifying your email address...
                                    </p>
                                )}
                                {verificationStatus === 'success' && (
                                    <p className="monospace">
                                        Great! You'll be redirected to complete your payment shortly.
                                    </p>
                                )}
                                {verificationStatus === 'error' && (
                                    <>
                                        <p className="monospace text-red-600">
                                            {error}
                                        </p>
                                        <p className="monospace text-sm">
                                            Please try again or contact support if the problem persists.
                                        </p>
                                    </>
                                )}
                            </div>

                            {verificationStatus === 'error' && (
                                <>
                                    <div className="section-divider"></div>
                                    <Link to="/login" className="brutalist-button w-full text-center">
                                        Back to Login →
                                    </Link>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </div>

            
        </div>
    );
}

export default VerifyEmailConfirm; 