'use client';

import { useEffect, useState, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { motion } from 'framer-motion';
import { FaCheckCircle, FaTimesCircle, FaSpinner } from 'react-icons/fa';

function CallbackContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [status, setStatus] = useState<'verifying' | 'success' | 'failed'>('verifying');
  const [message, setMessage] = useState('Verifying your payment...');
  const [refId, setRefId] = useState<string | null>(null);

  useEffect(() => {
    const authority = searchParams.get('Authority');
    const statusParam = searchParams.get('Status');

    if (!authority || !statusParam) {
      setStatus('failed');
      setMessage('Invalid payment callback');
      return;
    }

    if (statusParam !== 'OK') {
      setStatus('failed');
      setMessage('Payment was cancelled or failed');
      return;
    }

    // Verify the payment
    verifyPayment(authority);
  }, [searchParams]);

  const verifyPayment = async (authority: string) => {
    try {
      const response = await fetch('/api/payment/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ authority }),
      });

      const data = await response.json();

      if (response.ok && data.success) {
        setStatus('success');
        setMessage(`Payment verified successfully!`);
        setRefId(data.refId);

        // Redirect to home after 3 seconds
        setTimeout(() => {
          router.push('/');
        }, 3000);
      } else {
        setStatus('failed');
        setMessage(data.error || 'Payment verification failed');
      }
    } catch (error: any) {
      setStatus('failed');
      setMessage('Failed to verify payment');
    }
  };

  return (
    <div className="min-h-screen bg-paper-light flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        className="paper-card max-w-md w-full p-8 border-4 border-paper-dark shadow-paper-lg text-center"
      >
        {status === 'verifying' && (
          <>
            <FaSpinner className="text-6xl text-paper-brown mx-auto mb-4 animate-spin" />
            <h1 className="text-2xl font-bold text-paper-dark mb-2">Verifying Payment</h1>
            <p className="text-paper-gray">{message}</p>
          </>
        )}

        {status === 'success' && (
          <>
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ type: 'spring', stiffness: 200 }}
            >
              <FaCheckCircle className="text-6xl text-green-600 mx-auto mb-4" />
            </motion.div>
            <h1 className="text-2xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">
              Payment Successful!
            </h1>
            <p className="text-paper-gray mt-4">{message}</p>
            {refId && (
              <div className="mt-4 p-3 bg-paper-light border-2 border-paper-brown">
                <p className="text-xs text-paper-gray">Reference ID:</p>
                <p className="text-sm font-mono text-paper-dark font-semibold">{refId}</p>
              </div>
            )}
            <p className="text-sm text-paper-gray mt-4">Redirecting you to the home page...</p>
          </>
        )}

        {status === 'failed' && (
          <>
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ type: 'spring', stiffness: 200 }}
            >
              <FaTimesCircle className="text-6xl text-red-600 mx-auto mb-4" />
            </motion.div>
            <h1 className="text-2xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">
              Payment Failed
            </h1>
            <p className="text-paper-gray mt-4">{message}</p>
            <button
              onClick={() => router.push('/')}
              className="mt-6 px-6 py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark text-paper-light font-semibold transition-all shadow-paper"
            >
              Return to Home
            </button>
          </>
        )}
      </motion.div>
    </div>
  );
}

export default function PaymentCallback() {
  return (
    <Suspense fallback={
      <div className="min-h-screen bg-paper-light flex items-center justify-center">
        <FaSpinner className="text-6xl text-paper-brown animate-spin" />
      </div>
    }>
      <CallbackContent />
    </Suspense>
  );
}