'use client';

import { Suspense, useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { CheckCircle2, XCircle, Loader2, Mail } from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';

import { useVerifyEmail, useResendVerification } from '@/hooks/useAuth';

import { AuthHeader } from '../components/AuthHeader';
import { AuthCard } from '../components/AuthCard';
import { Button } from '@/components/ui';
import { fadeUp } from '@/lib/animations/animation';

function VerifyEmailForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const verifyEmail = useVerifyEmail();
  const resendVerification = useResendVerification();

  const token = searchParams.get('token') || '';
  const email = searchParams.get('email') || '';

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

  useEffect(() => {
    if (!token || !email) {
      setStatus('error');
      return;
    }

    verifyEmail.mutate(
      { token, email },
      {
        onSuccess: () => setStatus('success'),
        onError: () => setStatus('error'),
      }
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token, email]);

  const handleResend = () => {
    if (email) {
      resendVerification.mutate(email);
    }
  };

  return (
    <>
      <AuthHeader
        title="Verifikasi"
        highlightText="Email"
        subtitle="Konfirmasi alamat email Anda"
        linkText="Ke Halaman Login"
        linkHref="/auth/login"
      />

      <AuthCard customDelay={2}>
        {status === 'loading' && (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="text-center py-8"
          >
            <div className="inline-flex items-center justify-center w-16 h-16 bg-yellow-50 rounded-2xl mb-6 shadow-sm border border-yellow-200">
              <Loader2 className="w-8 h-8 text-yellow-600 animate-spin" />
            </div>

            <p className="text-sm text-gray-600 font-medium tracking-wide">
              Memverifikasi email Anda...
            </p>
          </motion.div>
        )}

        {status === 'success' && (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="text-center py-4"
          >
            <div className="inline-flex items-center justify-center w-16 h-16 bg-emerald-50 rounded-2xl mb-6 shadow-sm border border-emerald-200">
              <CheckCircle2 className="w-8 h-8 text-emerald-600" />
            </div>

            <h3 className="text-lg font-black text-gray-900 mb-2 tracking-wide">
              Email Terverifikasi! ✅
            </h3>

            <p className="text-sm text-gray-600 mb-8 leading-relaxed font-medium tracking-wide">
              Akun Anda telah aktif. Silakan login untuk mulai berbelanja.
            </p>

            <Button
              onClick={() => router.push('/auth/login?verified=true')}
              className="text-xs text-emerald-600 hover:text-emerald-700! hover:bg-emerald-100 bg-emerald-50 border border-emerald-200 shadow-sm font-black uppercase tracking-widest transition-colors cursor-pointer"
            >
              Ke Halaman Login
            </Button>
          </motion.div>
        )}

        {status === 'error' && (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="text-center py-4"
          >
            <div className="inline-flex items-center justify-center w-16 h-16 bg-red-50 rounded-2xl mb-6 shadow-sm border border-red-200">
              <XCircle className="w-8 h-8 text-red-500" />
            </div>

            <h3 className="text-lg font-black text-gray-900 mb-2 tracking-wide">
              Verifikasi Gagal
            </h3>

            <p className="text-sm text-gray-600 mb-6 leading-relaxed font-medium tracking-wide">
              Token verifikasi tidak valid atau sudah kedaluwarsa.
            </p>

            {email && (
              <div className="space-y-3">
                <button
                  type="button"
                  onClick={handleResend}
                  disabled={resendVerification.isPending}
                  className="w-full bg-yellow-400 text-gray-900 py-3 rounded-lg font-black uppercase tracking-wider hover:bg-yellow-500 shadow-sm transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer text-xs"
                >
                  {resendVerification.isPending ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      Mengirim...
                    </>
                  ) : (
                    <>
                      <Mail size={16} />
                      Kirim Ulang Link Verifikasi
                    </>
                  )}
                </button>

                <Button
                  onClick={() => router.push('/auth/login')}
                  className="w-full text-xs text-gray-500 hover:text-gray-700! bg-gray-50 border border-gray-200 shadow-sm font-black uppercase tracking-widest transition-colors cursor-pointer"
                >
                  Ke Halaman Login
                </Button>
              </div>
            )}

            {!email && (
              <Button
                onClick={() => router.push('/auth/login')}
                className="text-xs text-gray-500 hover:text-gray-700! bg-gray-50 border border-gray-200 shadow-sm font-black uppercase tracking-widest transition-colors cursor-pointer"
              >
                Ke Halaman Login
              </Button>
            )}
          </motion.div>
        )}
      </AuthCard>
    </>
  );
}

export default function VerifyEmailPage() {
  return (
    <>
      <Suspense
        fallback={
          <div className="flex items-center justify-center py-8">Memuat...</div>
        }
      >
        <VerifyEmailForm />
      </Suspense>

      <motion.p
        variants={fadeUp}
        custom={4}
        className="text-center text-xs text-gray-400 mt-6 font-medium"
      >
        © 2024 Garam Cap Kapal. All rights reserved.
      </motion.p>
    </>
  );
}