'use client';

import React, { useEffect, useState, Suspense } from 'react';
import { getApiErrorMessage } from '@/lib/apiError';
import { useSearchParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { useAppDispatch } from '@/state/hooks';
import { openModal } from '@/state/auth/authSlice';
import { verifyEmail, resendVerificationEmail } from '@/state/auth/authService';
import routes from '@/app/routes';

const VerifyEmailContent = () => {
  const searchParams = useSearchParams();
  const token = searchParams.get('token');
  const dispatch = useAppDispatch();
  const router = useRouter();

  const [status, setStatus] = useState<'loading' | 'success' | 'error' | 'idle'>('loading');
  const [message, setMessage] = useState<string>('');
  const [resendEmail, setResendEmail] = useState<string>('');
  const [resendStatus, setResendStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
  const [resendMessage, setResendMessage] = useState<string>('');

  useEffect(() => {
    if (!token) {
      setStatus('error');
      setMessage('No verification token found. Please check your verification link or request a new one.');
      return;
    }

    let isMounted = true;
    const executeVerify = async () => {
      try {
        setStatus('loading');
        const res = await verifyEmail(token);
        if (isMounted) {
          setStatus('success');
          setMessage(res.data?.message || 'Email verified successfully! You can now log in.');
        }
      } catch (err) {
        if (isMounted) {
          setStatus('error');
          setMessage(getApiErrorMessage(err, 'Email verification failed or link has expired.'));
        }
      }
    };

    executeVerify();

    return () => {
      isMounted = false;
    };
  }, [token]);

  const handleResend = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!resendEmail.trim()) return;

    try {
      setResendStatus('sending');
      setResendMessage('');
      const res = await resendVerificationEmail(resendEmail.trim());
      setResendStatus('sent');
      setResendMessage(res.data?.message || 'A new verification link has been sent to your email.');
    } catch (err) {
      setResendStatus('error');
      setResendMessage(getApiErrorMessage(err, 'Failed to resend verification email.'));
    }
  };

  const handleOpenLogin = () => {
    dispatch(openModal('login'));
    router.push(routes.home);
  };

  return (
    <div className="min-h-[70vh] flex items-center justify-center py-16 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full bg-white rounded-xl shadow-lg border border-gray-100 p-8 text-center">
        {status === 'loading' && (
          <div className="py-8">
            <div className="w-16 h-16 mx-auto mb-4 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
            <h2 className="text-xl font-bold text-gray-900 mb-2">Verifying Your Email</h2>
            <p className="text-sm text-gray-500">Please wait while we verify your seller account credentials...</p>
          </div>
        )}

        {status === 'success' && (
          <div className="py-6">
            <div className="w-16 h-16 mx-auto mb-4 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
              <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h2 className="text-2xl font-bold text-gray-900 mb-2">Email Verified!</h2>
            <p className="text-sm text-gray-600 mb-6">{message}</p>
            <button
              onClick={handleOpenLogin}
              className="w-full bg-[#2954E8] text-white font-semibold py-3 px-4 rounded-lg hover:bg-[#1f42c2] transition-colors shadow-sm"
            >
              Log In to Seller Account
            </button>
          </div>
        )}

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

            <div className="border-t border-gray-200 pt-6 text-left">
              <h3 className="text-sm font-semibold text-gray-900 mb-2">Resend Verification Email</h3>
              <p className="text-xs text-gray-500 mb-4">
                Enter your registered seller email below and we will send you a fresh verification link.
              </p>

              {resendMessage && (
                <div
                  className={`p-3 rounded-md text-xs mb-3 ${
                    resendStatus === 'sent'
                      ? 'bg-green-50 text-green-700 border border-green-200'
                      : 'bg-red-50 text-red-700 border border-red-200'
                  }`}
                >
                  {resendMessage}
                </div>
              )}

              <form onSubmit={handleResend} className="space-y-3">
                <input
                  type="email"
                  required
                  placeholder="seller@example.com"
                  value={resendEmail}
                  onChange={(e) => setResendEmail(e.target.value)}
                  className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
                <button
                  type="submit"
                  disabled={resendStatus === 'sending'}
                  className="w-full bg-[#2954E8] text-white text-sm font-medium py-2 rounded-lg hover:bg-[#1f42c2] disabled:opacity-50 transition-colors"
                >
                  {resendStatus === 'sending' ? 'Sending Link...' : 'Resend Verification Link'}
                </button>
              </form>
            </div>

            <div className="mt-6">
              <Link href={routes.home} className="text-xs text-blue-600 hover:underline">
                Return to Home
              </Link>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default function VerifyPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-[70vh] flex items-center justify-center">
          <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
        </div>
      }
    >
      <VerifyEmailContent />
    </Suspense>
  );
}