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="brutalist-card p-6 space-y-6">
                        <div className="flex items-center justify-center">
                            <div className="w-16 h-16">
                                <div className="geometric-shape circle w-full h-full border-4 border-black animate-spin"></div>
                            </div>
                        </div>
                        <p className="monospace text-center">Verifying your email...</p>
                    </div>
                );
            case 'success':
                return (
                    <div className="brutalist-card p-6 space-y-6">
                        <div className="flex items-center justify-center">
                            <div className="w-16 h-16 relative">
                                <div className="geometric-shape circle w-full h-full border-4 border-black"></div>
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <span className="text-3xl font-bold" style={{ marginTop: '-2px' }}>✓</span>
                                </div>
                            </div>
                        </div>
                        <div className="text-center space-y-4">
                            <h2 className="monospace text-2xl font-bold">Email Verified!</h2>
                            <p className="monospace">Your email has been successfully verified.</p>
                            <p className="monospace text-sm">Redirecting to payment...</p>
                        </div>
                    </div>
                );
            case 'error':
                return (
                    <div className="brutalist-card p-6 space-y-6">
                        <div className="flex items-center justify-center">
                            <div className="w-16 h-16 relative">
                                <div className="geometric-shape circle w-full h-full border-4 border-black"></div>
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <span className="text-3xl font-bold" style={{ marginTop: '-2px' }}>×</span>
                                </div>
                            </div>
                        </div>
                        <div className="text-center space-y-4">
                            <h2 className="monospace text-2xl font-bold">Verification Failed</h2>
                            <p className="monospace">{error}</p>
                        </div>
                        <div className="section-divider"></div>
                        <Link to="/login" className="brutalist-button w-full text-center">
                            Back to Login →
                        </Link>
                    </div>
                );
            default:
                return null;
        }
    };

    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">
                            Email Verification
                            <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">
                            Please wait while we verify your email address.
                        </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">
                        {renderContent()}
                    </div>
                </div>
            </div>

            <Footer />
        </div>
    );
}

export default VerifyEmail; 