import { useState, useEffect } from 'react'
import { Link, useSearchParams, useNavigate } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { auth } from '@/lib/appwrite'
import { Mail, Loader2, CheckCircle, XCircle, RefreshCw } from 'lucide-react'

export function VerifyEmail() {
  const [searchParams] = useSearchParams()
  const navigate = useNavigate()
  
  const userId = searchParams.get('userId')
  const secret = searchParams.get('secret')

  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading')
  const [error, setError] = useState('')

  useEffect(() => {
    verifyEmail()
  }, [userId, secret])

  const verifyEmail = async () => {
    if (!userId || !secret) {
      setStatus('error')
      setError('Ungültiger Verifizierungslink')
      return
    }

    try {
      await auth.verifyEmail(userId, secret)
      setStatus('success')
    } catch (err: any) {
      setStatus('error')
      setError(err.message || 'Fehler bei der Verifizierung')
    }
  }

  const handleResendVerification = async () => {
    setStatus('loading')
    setError('')

    try {
      await auth.sendVerification()
      setError('')
      alert('Neue Verifizierungs-E-Mail wurde gesendet!')
    } catch (err: any) {
      setError(err.message || 'Fehler beim Senden')
    } finally {
      setStatus('error')
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        {/* Logo */}
        <Link to="/" className="flex items-center justify-center gap-2 mb-8">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
            <Mail className="w-5 h-5 text-white" />
          </div>
          <span className="text-xl font-bold text-slate-900">
            Email<span className="text-primary-600">Sorter</span>
          </span>
        </Link>

        <Card className="shadow-xl border-0">
          <CardHeader className="text-center pb-2">
            <CardTitle className="text-2xl">
              {status === 'loading' && 'E-Mail wird verifiziert...'}
              {status === 'success' && 'E-Mail verifiziert!'}
              {status === 'error' && 'Verifizierung fehlgeschlagen'}
            </CardTitle>
            <CardDescription>
              {status === 'loading' && 'Bitte warte einen Moment.'}
              {status === 'success' && 'Deine E-Mail-Adresse wurde erfolgreich bestätigt.'}
              {status === 'error' && error}
            </CardDescription>
          </CardHeader>
          <CardContent>
            {status === 'loading' && (
              <div className="flex flex-col items-center py-12">
                <Loader2 className="w-12 h-12 animate-spin text-primary-500 mb-4" />
                <p className="text-slate-500">Verifizierung läuft...</p>
              </div>
            )}

            {status === 'success' && (
              <div className="text-center py-8">
                <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-green-100 flex items-center justify-center">
                  <CheckCircle className="w-10 h-10 text-green-600" />
                </div>
                
                <div className="space-y-4">
                  <div className="p-4 bg-green-50 border border-green-100 rounded-xl">
                    <p className="text-green-700 font-medium">
                      Dein Account ist jetzt vollständig aktiviert!
                    </p>
                  </div>

                  <p className="text-slate-600">
                    Du kannst jetzt alle Features von EmailSorter nutzen.
                  </p>

                  <Button onClick={() => navigate('/dashboard')} className="w-full">
                    Zum Dashboard
                  </Button>
                </div>
              </div>
            )}

            {status === 'error' && (
              <div className="text-center py-8">
                <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-red-100 flex items-center justify-center">
                  <XCircle className="w-10 h-10 text-red-600" />
                </div>

                <div className="space-y-4">
                  <div className="p-4 bg-red-50 border border-red-100 rounded-xl">
                    <p className="text-red-700">
                      {error || 'Der Verifizierungslink ist ungültig oder abgelaufen.'}
                    </p>
                  </div>

                  <p className="text-slate-600 text-sm">
                    Falls dein Link abgelaufen ist, kannst du eine neue Verifizierungs-E-Mail anfordern.
                  </p>

                  <div className="space-y-3">
                    <Button onClick={handleResendVerification} variant="outline" className="w-full">
                      <RefreshCw className="w-4 h-4 mr-2" />
                      Neue E-Mail senden
                    </Button>
                    
                    <Button onClick={() => navigate('/login')} variant="ghost" className="w-full">
                      Zurück zum Login
                    </Button>
                  </div>
                </div>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Help text */}
        <p className="text-center text-sm text-slate-500 mt-6">
          Probleme? Kontaktiere uns unter{' '}
          <a href="mailto:support@emailsorter.de" className="text-primary-600 hover:underline">
            support@emailsorter.de
          </a>
        </p>
      </div>
    </div>
  )
}