'use client';
import { useEffect, useState, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
import Link from 'next/link';
function VerifyEmailContent() {
const router = useRouter();
const searchParams = useSearchParams();
const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
const [message, setMessage] = useState('');
useEffect(() => {
const token = searchParams.get('token');
if (!token) {
setStatus('error');
setMessage('Invalid verification link. Please check your email for the correct link.');
return;
}
verifyEmail(token);
}, [searchParams]);
const verifyEmail = async (token: string) => {
try {
const response = await fetch('/api/verify-email', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token }),
});
const data = await response.json();
if (data.success) {
setStatus('success');
setMessage('Your email has been verified successfully!');
setTimeout(() => {
router.push('/login');
}, 3000);
} else {
setStatus('error');
setMessage(data.error || 'Verification failed. The link may have expired.');
}
} catch (error) {
setStatus('error');
setMessage('An error occurred during verification. Please try again.');
}
};
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md">
<div className="bg-white rounded-lg shadow p-8">
<div className="text-center">
{status === 'loading' && (
<>
<div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-blue-100 mb-4">
<Loader2 className="h-6 w-6 text-blue-600 animate-spin" />
</div>
<h2 className="text-2xl font-bold text-gray-900 mb-4">
Verifying your email...
</h2>
<p className="text-gray-600">
Please wait while we verify your email address.
</p>
</>
)}
{status === 'success' && (
<>
<div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-green-100 mb-4">
<CheckCircle className="h-6 w-6 text-green-600" />
</div>
<h2 className="text-2xl font-bold text-gray-900 mb-4">
Email Verified!
</h2>
<p className="text-gray-600 mb-4">{message}</p>
<p className="text-sm text-gray-500 mb-4">
Redirecting to login page...
</p>
<Link
href="/login"
className="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Go to Login
</Link>
</>
)}
{status === 'error' && (
<>
<div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-red-100 mb-4">
<XCircle className="h-6 w-6 text-red-600" />
</div>
<h2 className="text-2xl font-bold text-gray-900 mb-4">
Verification Failed
</h2>
<p className="text-gray-600 mb-6">{message}</p>
<div className="space-y-2">
<Link
href="/login"
className="block w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Go to Login
</Link>
<Link
href="/register"
className="block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Register Again
</Link>
</div>
</>
)}
</div>
</div>
</div>
</div>
);
}
export default function VerifyEmailPage() {
return (
<Suspense fallback={
<div className="flex min-h-screen flex-col items-center justify-center bg-gray-50">
<Loader2 className="h-8 w-8 text-blue-600 animate-spin" />
</div>
}>
<VerifyEmailContent />
</Suspense>
);
}
