membership-fe/src/pages/PaymentSuccess.js

import React, { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { Card } from '../components/ui/card';
import { Button } from '../components/ui/button';
import Navbar from '../components/Navbar';
import { CheckCircle, Calendar, User } from 'lucide-react';

const PaymentSuccess = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const { refreshUser } = useAuth();
  const sessionId = searchParams.get('session_id');

  useEffect(() => {
    // Refresh user data to get updated status after payment
    if (refreshUser) {
      refreshUser();
    }
  }, [refreshUser]);

  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      <div className="max-w-4xl mx-auto px-6 py-12">
        <div className="text-center mb-12">
          {/* Success Icon */}
          <div className="mb-8">
            <div className="bg-[#81B29A] rounded-full w-24 h-24 mx-auto flex items-center justify-center">
              <CheckCircle className="h-12 w-12 text-white" />
            </div>
          </div>

          {/* Success Message */}
          <h1 className="text-4xl md:text-5xl font-semibold text-primary mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
            Payment Successful!
          </h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Thank you for your payment. Your LOAF membership is now active!
          </p>
        </div>

        {/* Confirmation Card */}
        <Card className="p-8 bg-background rounded-2xl border border-chart-6 shadow-lg mb-8">
          <h2 className="text-2xl font-semibold text-primary mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
            Welcome to the LOAF Community!
          </h2>

          <div className="space-y-6 mb-8">
            <div className="bg-muted p-6 rounded-xl">
              <h3 className="text-lg font-semibold text-primary mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                What's Next?
              </h3>
              <ul className="space-y-3">
                <li className="flex items-start gap-3">
                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
                  <span className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    Your membership is now active and you have full access to all member benefits
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
                  <span className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    You can now RSVP and attend members-only events
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
                  <span className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    Access the community directory and connect with other members
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
                  <span className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    You'll receive our newsletter with exclusive updates and announcements
                  </span>
                </li>
              </ul>
            </div>

            {sessionId && (
              <div className="bg-chart-6/20 p-4 rounded-xl">
                <p className="text-sm text-muted-foreground text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  <span className="font-medium text-primary">Transaction ID:</span>{' '}
                  <span className="font-mono text-xs">{sessionId}</span>
                </p>
                <p className="text-xs text-muted-foreground text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  A confirmation email has been sent to your registered email address.
                </p>
              </div>
            )}
          </div>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              onClick={() => navigate('/dashboard')}
              className="bg-chart-6 text-primary hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
              data-testid="go-to-dashboard-button"
            >
              <User className="mr-2 h-5 w-5" />
              Go to Dashboard
            </Button>
            <Button
              onClick={() => navigate('/events')}
              variant="outline"
              className="border-2 border-muted-foreground text-muted-foreground hover:bg-muted-foreground hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
              data-testid="browse-events-button"
            >
              <Calendar className="mr-2 h-5 w-5" />
              Browse Events
            </Button>
          </div>
        </Card>

        {/* Additional Info */}
        <div className="text-center">
          <p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Need help? Contact us at{' '}
            <a
              href="mailto:support@loaf.org"
              className="text-accent hover:text-muted-foreground font-medium"
            >
              support@loaf.org
            </a>
          </p>
        </div>
      </div>
    </div>
  );
};

export default PaymentSuccess;