'use client'

import { useEffect, useState } from 'react'
import { useRouter, useParams } from 'next/navigation'
import Link from 'next/link'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import { authAPI } from '@/lib/api'

export default function VerifyEmailPage() {
    const router = useRouter()
    const params = useParams()
    const token = params.token as string

    const [status, setStatus] = useState<'verifying' | 'success' | 'error'>('verifying')
    const [message, setMessage] = useState('')

    useEffect(() => {
        const verifyEmail = async () => {
            try {
                const response = await authAPI.verifyEmail(token)
                setStatus('success')
                setMessage(response.message || 'Email verified successfully!')
                toast.success('Email verified successfully!')

                // Redirect to dashboard after 3 seconds
                setTimeout(() => {
                    router.push('/dashboard')
                }, 3000)
            } catch (error: any) {
                setStatus('error')
                const errorMessage = error.response?.data?.message || 'Failed to verify email. The link may have expired.'
                setMessage(errorMessage)
                toast.error(errorMessage)
            }
        }

        if (token) {
            verifyEmail()
        }
    }, [token, router])

    return (
        <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-background to-muted p-4">
            <div className="w-full max-w-md">
                {/* Logo */}
                <div className="mb-8 text-center">
                    <Link href="/" className="inline-block">
                        <div className="flex items-center justify-center gap-2">
                            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
                                <svg className="h-6 w-6 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </div>
                            <span className="text-2xl font-bold">Website Monitor</span>
                        </div>
                    </Link>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>Email Verification</CardTitle>
                        <CardDescription>
                            {status === 'verifying' && 'Verifying your email address...'}
                            {status === 'success' && 'Your email has been verified'}
                            {status === 'error' && 'Verification failed'}
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        {status === 'verifying' && (
                            <div className="flex flex-col items-center py-8">
                                <div className="h-12 w-12 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
                                <p className="mt-4 text-sm text-muted-foreground">Please wait...</p>
                            </div>
                        )}

                        {status === 'success' && (
                            <div className="space-y-4">
                                <div className="rounded-lg bg-green-50 p-4 text-center">
                                    <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
                                        <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                                        </svg>
                                    </div>
                                    <p className="font-medium text-green-900">Email Verified!</p>
                                    <p className="mt-1 text-sm text-green-700">{message}</p>
                                </div>

                                <p className="text-center text-sm text-muted-foreground">
                                    Redirecting to dashboard...
                                </p>

                                <Button
                                    className="w-full"
                                    onClick={() => router.push('/dashboard')}
                                >
                                    Go to Dashboard
                                </Button>
                            </div>
                        )}

                        {status === 'error' && (
                            <div className="space-y-4">
                                <div className="rounded-lg bg-red-50 p-4 text-center">
                                    <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
                                        <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </div>
                                    <p className="font-medium text-red-900">Verification Failed</p>
                                    <p className="mt-1 text-sm text-red-700">{message}</p>
                                </div>

                                <div className="text-sm text-muted-foreground">
                                    <p className="mb-2">Possible reasons:</p>
                                    <ul className="ml-4 list-disc space-y-1">
                                        <li>The verification link has expired (24 hours)</li>
                                        <li>The link was already used</li>
                                        <li>The link is invalid</li>
                                    </ul>
                                </div>

                                <div className="flex flex-col gap-2">
                                    <Button
                                        variant="outline"
                                        className="w-full"
                                        onClick={() => router.push('/register')}
                                    >
                                        Register Again
                                    </Button>

                                    <div className="text-center text-sm">
                                        <Link
                                            href="/login"
                                            className="text-primary hover:underline"
                                        >
                                            Back to Login
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}