"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { AnimatedButton } from "@/components/ui/animated-button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AnimatedCard } from "@/components/ui/animated-card"
import { Header } from "@/components/ui/header"
import { Footer } from "@/components/ui/footer"
import {
  CheckCircle,
  Mail,
  AlertCircle,
  RefreshCw,
  ArrowRight,
  Home,
  Clock,
  Shield
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { motion } from "framer-motion"
import { useSearchParams } from "next/navigation"

export default function EmailVerificationPage() {
  const [verificationStatus, setVerificationStatus] = useState<'loading' | 'success' | 'error' | 'expired'>('loading')
  const [isResending, setIsResending] = useState(false)
  const [resendCount, setResendCount] = useState(0)
  const [countdown, setCountdown] = useState(0)

  const searchParams = useSearchParams()
  const token = searchParams?.get('token')
  const email = searchParams?.get('email') || 'your-email@example.com'

  useEffect(() => {
    // Simulate email verification process
    const verifyEmail = async () => {
      setVerificationStatus('loading')

      // Simulate API call delay
      await new Promise(resolve => setTimeout(resolve, 2000))

      if (token) {
        // Simulate different outcomes based on token
        if (token === 'expired') {
          setVerificationStatus('expired')
        } else if (token === 'invalid') {
          setVerificationStatus('error')
        } else {
          setVerificationStatus('success')
        }
      } else {
        setVerificationStatus('error')
      }
    }

    verifyEmail()
  }, [token])

  useEffect(() => {
    // Countdown timer for resend button
    if (countdown > 0) {
      const timer = setTimeout(() => setCountdown(countdown - 1), 1000)
      return () => clearTimeout(timer)
    }
  }, [countdown])

  const handleResendEmail = async () => {
    setIsResending(true)
    setResendCount(prev => prev + 1)

    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1500))

    setIsResending(false)
    setCountdown(60) // 60 second cooldown
  }

  const renderContent = () => {
    switch (verificationStatus) {
      case 'loading':
        return (
          <div className="text-center py-12">
            <div className="w-16 h-16 border-4 border-[#3F5CEA] border-t-transparent rounded-full animate-spin mx-auto mb-6"></div>
            <h1 className="font-primary text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Verifying Your Email
            </h1>
            <p className="font-body text-xl text-gray-600 max-w-md mx-auto">
              Please wait while we verify your email address...
            </p>
          </div>
        )

      case 'success':
        return (
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, type: "spring", stiffness: 300 }}
            className="text-center"
          >
            <div className="mx-auto mb-6 w-24 h-24 rounded-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-lg">
              <CheckCircle className="h-12 w-12 text-white" />
            </div>

            <h1 className="font-primary text-4xl md:text-5xl font-bold text-gray-900 mb-4">
              Email Verified Successfully!
            </h1>

            <p className="font-body text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed mb-8">
              Thank you for verifying your email address. Your account is now fully activated and you can access all features.
            </p>

            <div className="space-y-4">
              <Link href="/dashboard">
                <AnimatedButton className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white text-lg px-8 py-4">
                  <ArrowRight className="h-5 w-5 mr-2" />
                  Go to Dashboard
                </AnimatedButton>
              </Link>

              <div className="text-center">
                <Link href="/search" className="font-body text-[#3F5CEA] hover:underline">
                  Or continue searching for facilities
                </Link>
              </div>
            </div>
          </motion.div>
        )

      case 'expired':
        return (
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, type: "spring", stiffness: 300 }}
            className="text-center"
          >
            <div className="mx-auto mb-6 w-24 h-24 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center shadow-lg">
              <Clock className="h-12 w-12 text-white" />
            </div>

            <h1 className="font-primary text-4xl md:text-5xl font-bold text-gray-900 mb-4">
              Verification Link Expired
            </h1>

            <p className="font-body text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed mb-8">
              This verification link has expired. Please request a new verification email to activate your account.
            </p>

            <div className="space-y-4">
              <AnimatedButton
                onClick={handleResendEmail}
                disabled={isResending || countdown > 0}
                className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white text-lg px-8 py-4 disabled:opacity-50"
              >
                {isResending ? (
                  <>
                    <RefreshCw className="h-5 w-5 mr-2 animate-spin" />
                    Sending...
                  </>
                ) : countdown > 0 ? (
                  `Resend in ${countdown}s`
                ) : (
                  <>
                    <Mail className="h-5 w-5 mr-2" />
                    Send New Verification Email
                  </>
                )}
              </AnimatedButton>

              {resendCount > 0 && (
                <p className="font-body text-sm text-green-600">
                  ✓ Verification email sent to {email}
                </p>
              )}
            </div>
          </motion.div>
        )

      case 'error':
        return (
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, type: "spring", stiffness: 300 }}
            className="text-center"
          >
            <div className="mx-auto mb-6 w-24 h-24 rounded-full bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center shadow-lg">
              <AlertCircle className="h-12 w-12 text-white" />
            </div>

            <h1 className="font-primary text-4xl md:text-5xl font-bold text-gray-900 mb-4">
              Verification Failed
            </h1>

            <p className="font-body text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed mb-8">
              We couldn't verify your email address. The link may be invalid or corrupted. Please try requesting a new verification email.
            </p>

            <div className="space-y-4">
              <AnimatedButton
                onClick={handleResendEmail}
                disabled={isResending || countdown > 0}
                className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white text-lg px-8 py-4 disabled:opacity-50"
              >
                {isResending ? (
                  <>
                    <RefreshCw className="h-5 w-5 mr-2 animate-spin" />
                    Sending...
                  </>
                ) : countdown > 0 ? (
                  `Resend in ${countdown}s`
                ) : (
                  <>
                    <Mail className="h-5 w-5 mr-2" />
                    Send New Verification Email
                  </>
                )}
              </AnimatedButton>

              <div className="text-center">
                <Link href="/register" className="font-body text-[#3F5CEA] hover:underline">
                  Need to create a new account?
                </Link>
              </div>
            </div>
          </motion.div>
        )

      default:
        return null
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
      <Header />

      <div className="container mx-auto px-4 py-12">
        <div className="max-w-2xl mx-auto">
          <AnimatedCard className="bg-white/95 backdrop-blur-sm border-2 border-blue-200/50 shadow-xl">
            <CardContent className="p-8 md:p-12">
              {renderContent()}
            </CardContent>
          </AnimatedCard>

          {/* Additional Information */}
          {verificationStatus !== 'loading' && (
            <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Security Note */}
              <AnimatedCard className="bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
                <CardHeader>
                  <CardTitle className="font-primary text-lg text-blue-900 flex items-center gap-2">
                    <Shield className="h-5 w-5" />
                    Security & Privacy
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <p className="font-body text-sm text-blue-800">
                      ✓ Your data is encrypted and secure
                    </p>
                    <p className="font-body text-sm text-blue-800">
                      ✓ We never sell your information
                    </p>
                    <p className="font-body text-sm text-blue-800">
                      ✓ HIPAA compliant platform
                    </p>
                  </div>
                </CardContent>
              </AnimatedCard>

              {/* Help */}
              <AnimatedCard className="bg-gradient-to-br from-purple-50 to-pink-50 border-purple-200">
                <CardHeader>
                  <CardTitle className="font-primary text-lg text-purple-900">Need Help?</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <p className="font-body text-sm text-purple-800">
                      Email: support@geezerguide.com
                    </p>
                    <p className="font-body text-sm text-purple-800">
                      Phone: (555) 123-HELP
                    </p>
                    <p className="font-body text-sm text-purple-800">
                      Available: Mon-Fri 9AM-6PM EST
                    </p>
                  </div>
                </CardContent>
              </AnimatedCard>
            </div>
          )}

          {/* Navigation */}
          <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/">
              <Button variant="outline" className="border-gray-300 text-gray-700 hover:bg-gray-50">
                <Home className="h-4 w-4 mr-2" />
                Back to Home
              </Button>
            </Link>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  )
}