elmeg-demo/frontend/app/verify-email/page.tsx

"use client"

import { useEffect, useState, Suspense } from "react"
import { useSearchParams } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { CheckCircle, XCircle, Loader2 } from "lucide-react"
import Link from "next/link"
import { getApiUrl } from "@/lib/api-config"

function VerifyEmailContent() {
    const searchParams = useSearchParams()
    const [status, setStatus] = useState<"loading" | "success" | "error">("loading")
    const [message, setMessage] = useState("")

    const verifyEmail = async (token: string) => {
        try {
            const res = await fetch(`${getApiUrl()}/auth/verify-email`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ token })
            })

            const data = await res.json()

            if (res.ok) {
                setStatus("success")
                setMessage(data.message || "Email verified successfully!")
            } else {
                setStatus("error")
                setMessage(data.detail || "Verification failed")
            }
        } catch (_) {
            setStatus("error")
            setMessage("An error occurred during verification")
        }
    }

    useEffect(() => {
        const token = searchParams.get("token")
        if (!token) {
            setStatus("error")
            setMessage("No verification token provided")
            return
        }

        verifyEmail(token)
    }, [searchParams])

    return (
        <div className="container max-w-md mx-auto py-16 px-4">
            <Card>
                <CardHeader className="text-center">
                    <CardTitle className="flex items-center justify-center gap-2">
                        {status === "loading" && <Loader2 className="h-6 w-6 animate-spin" />}
                        {status === "success" && <CheckCircle className="h-6 w-6 text-green-500" />}
                        {status === "error" && <XCircle className="h-6 w-6 text-red-500" />}
                        Email Verification
                    </CardTitle>
                    <CardDescription>
                        {status === "loading" && "Verifying your email..."}
                        {status === "success" && "Your email has been verified!"}
                        {status === "error" && "Verification failed"}
                    </CardDescription>
                </CardHeader>
                <CardContent className="text-center space-y-4">
                    <p className="text-muted-foreground">{message}</p>

                    {status === "success" && (
                        <Button asChild>
                            <Link href="/login">Continue to Login</Link>
                        </Button>
                    )}

                    {status === "error" && (
                        <div className="space-y-2">
                            <Button variant="outline" asChild>
                                <Link href="/login">Go to Login</Link>
                            </Button>
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    )
}

function LoadingFallback() {
    return (
        <div className="container max-w-md mx-auto py-16 px-4">
            <Card>
                <CardContent className="py-16 flex flex-col items-center justify-center gap-4">
                    <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                    <p className="text-muted-foreground">Loading...</p>
                </CardContent>
            </Card>
        </div>
    )
}

export default function VerifyEmailPage() {
    return (
        <Suspense fallback={<LoadingFallback />}>
            <VerifyEmailContent />
        </Suspense>
    )
}