'use client';

import { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import Navbar from '../../../components/Common/Navbar';
import Footer from '../../../components/Common/Footer';

export default function PaymentSuccess() {
  const searchParams = useSearchParams();
  const ref = searchParams.get('ref');
  const [status, setStatus] = useState('Verifying payment...');

  useEffect(() => {
    if (ref) {
      
      fetch(`/api/verify-payment?ref=${ref}`)
        .then(res => res.json())
        .then(data => {
          if (data?.message === 'Payment verified') {
            setStatus('🎉 Payment successful! Your subscription is now active.');
          } else {
            setStatus('⚠️ Payment was not successful or could not be verified.');
          }
        })
        .catch(() => setStatus('❌ An error occurred while verifying payment.'));
    }
  }, [ref]);

  return (
    <>
      <Navbar />
      <div className="min-h-screen flex flex-col justify-center items-center p-6 text-center">
        <h1 className="text-2xl font-semibold">{status}</h1>
        <p className="mt-4 text-gray-600">Transaction Reference: <strong>{ref}</strong></p>
      </div>
      <Footer />
    </>
  );
}
