'use client'

import { useState, useEffect, Suspense } from 'react'
import { useSearchParams } from 'next/navigation'
import Link from 'next/link'
import { Loader2, CheckCircle2, XCircle, Mail, ArrowRight } from 'lucide-react'
import toast from 'react-hot-toast'

function VerifyEmailContent() {
  const searchParams = useSearchParams()
  const token = searchParams.get('token')

  const [verifying, setVerifying] = useState(false)
  const [verified, setVerified] = useState(false)
  const [error, setError] = useState('')
  const [resendEmail, setResendEmail] = useState('')
  const [resending, setResending] = useState(false)
  const [resendSuccess, setResendSuccess] = useState(false)

  useEffect(() => {
    if (token) {
      verifyEmail(token)
    }
  }, [token])

  const verifyEmail = async (verificationToken: string) => {
    setVerifying(true)
    setError('')
    try {
      const res = await fetch(`/api/auth/verify-email?token=${verificationToken}`)
      const data = await res.json()
      if (!res.ok) {
        setError(data.error || 'Verifikasi gagal')
      } else {
        setVerified(true)
        toast.success(data.message || 'Email berhasil diverifikasi!')
      }
    } catch {
      setError('Terjadi kesalahan. Silakan coba lagi.')
    } finally {
      setVerifying(false)
    }
  }

  const handleResend = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!resendEmail) {
      toast.error('Masukkan alamat email')
      return
    }
    setResending(true)
    setResendSuccess(false)
    try {
      const res = await fetch('/api/auth/resend-verification', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: resendEmail }),
      })
      const data = await res.json()
      if (!res.ok) {
        toast.error(data.error || 'Gagal mengirim ulang')
      } else {
        setResendSuccess(true)
        toast.success(data.message || 'Link verifikasi telah dikirim')
      }
    } catch {
      toast.error('Terjadi kesalahan. Silakan coba lagi.')
    } finally {
      setResending(false)
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-amber-50 flex items-center justify-center px-4 py-12">
      <div className="w-full max-w-md">
        <div className="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
          {/* Header */}
          <div className="bg-gradient-to-r from-orange-600 to-amber-500 px-8 py-6 text-center">
            <div className="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center mx-auto mb-3">
              <Mail className="w-7 h-7 text-white" />
            </div>
            <h1 className="text-xl font-bold text-white">Verifikasi Email</h1>
          </div>

          {/* Content */}
          <div className="px-8 py-8">
            {/* Verifying state */}
            {verifying && (
              <div className="text-center py-8">
                <Loader2 className="w-12 h-12 text-orange-500 animate-spin mx-auto mb-4" />
                <p className="text-gray-600 font-medium">Memverifikasi email Anda...</p>
              </div>
            )}

            {/* Success state */}
            {!verifying && verified && (
              <div className="text-center py-6">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <CheckCircle2 className="w-8 h-8 text-green-600" />
                </div>
                <h2 className="text-lg font-bold text-gray-900 mb-2">Email Berhasil Diverifikasi!</h2>
                <p className="text-gray-500 mb-6">
                  Akun Anda sudah aktif. Silakan login untuk mulai menggunakan RestoMenu.
                </p>
                <Link
                  href="/login"
                  className="inline-flex items-center gap-2 bg-orange-600 text-white px-6 py-2.5 rounded-lg font-semibold hover:bg-orange-700 transition-colors"
                >
                  Masuk ke Akun
                  <ArrowRight className="w-4 h-4" />
                </Link>
              </div>
            )}

            {/* Error state */}
            {!verifying && error && (
              <div className="text-center py-6">
                <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <XCircle className="w-8 h-8 text-red-600" />
                </div>
                <h2 className="text-lg font-bold text-gray-900 mb-2">Verifikasi Gagal</h2>
                <p className="text-gray-500 mb-6">{error}</p>
              </div>
            )}

            {/* No token - informational + resend form */}
            {!verifying && !verified && !error && !token && (
              <div className="text-center py-4">
                <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Mail className="w-8 h-8 text-orange-600" />
                </div>
                <h2 className="text-lg font-bold text-gray-900 mb-2">Cek Email Anda</h2>
                <p className="text-gray-500 mb-2">
                  Cek email Anda untuk link verifikasi. Pastikan juga memeriksa folder spam.
                </p>
              </div>
            )}

            {/* Resend form - show if not verified */}
            {!verifying && !verified && (
              <div className="mt-6 pt-6 border-t border-gray-100">
                <h3 className="text-sm font-semibold text-gray-700 mb-3">Belum menerima email?</h3>
                {resendSuccess ? (
                  <div className="bg-green-50 border border-green-200 rounded-lg p-4 text-center">
                    <CheckCircle2 className="w-5 h-5 text-green-600 mx-auto mb-2" />
                    <p className="text-green-700 text-sm font-medium">
                      Link verifikasi telah dikirim ulang. Silakan cek inbox Anda.
                    </p>
                  </div>
                ) : (
                  <form onSubmit={handleResend} className="space-y-3">
                    <input
                      type="email"
                      placeholder="Masukkan email Anda"
                      value={resendEmail}
                      onChange={(e) => setResendEmail(e.target.value)}
                      className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                      required
                    />
                    <button
                      type="submit"
                      disabled={resending}
                      className="w-full flex items-center justify-center gap-2 bg-gray-900 text-white px-4 py-2.5 rounded-lg text-sm font-semibold hover:bg-gray-800 transition-colors disabled:opacity-50"
                    >
                      {resending && <Loader2 className="w-4 h-4 animate-spin" />}
                      {resending ? 'Mengirim...' : 'Kirim Ulang'}
                    </button>
                  </form>
                )}
              </div>
            )}
          </div>

          {/* Footer */}
          <div className="px-8 pb-6 text-center">
            <Link
              href="/login"
              className="text-sm text-orange-600 font-semibold hover:underline"
            >
              Kembali ke Halaman Login
            </Link>
          </div>
        </div>

        <p className="text-center text-xs text-gray-400 mt-6">Powered by restomenu.id</p>
      </div>
    </div>
  )
}

export default function VerifyEmailPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-amber-50 flex items-center justify-center">
          <Loader2 className="w-8 h-8 text-orange-500 animate-spin" />
        </div>
      }
    >
      <VerifyEmailContent />
    </Suspense>
  )
}