import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Card } from '../components/ui/card';
import { Button } from '../components/ui/button';
import Navbar from '../components/Navbar';
import { XCircle, ArrowLeft, CreditCard, Mail } from 'lucide-react';

const PaymentCancel = () => {
  const navigate = useNavigate();

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

      <div className="max-w-4xl mx-auto px-6 py-12">
        <div className="text-center mb-12">
          {/* Cancel Icon */}
          <div className="mb-8">
            <div className="bg-gray-400 rounded-full w-24 h-24 mx-auto flex items-center justify-center">
              <XCircle className="h-12 w-12 text-white" />
            </div>
          </div>

          {/* Cancel Message */}
          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
            Payment Cancelled
          </h1>
          <p className="text-lg text-[#664fa3] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Your payment was cancelled. No charges have been made to your account.
          </p>
        </div>

        {/* Info Card */}
        <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg mb-8">
          <h2 className="text-2xl font-semibold text-[#422268] mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
            What Happened?
          </h2>

          <div className="space-y-6 mb-8">
            <p className="text-[#664fa3] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              You cancelled the payment process or closed the checkout page. Your membership has not been activated yet.
            </p>

            <div className="bg-[#DDD8EB]/20 p-6 rounded-xl">
              <h3 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                Ready to Complete Your Membership?
              </h3>
              <ul className="space-y-3">
                <li className="flex items-start gap-3">
                  <CreditCard className="h-5 w-5 text-[#664fa3] flex-shrink-0 mt-0.5" />
                  <span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    Return to the plans page to complete your subscription
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <Mail className="h-5 w-5 text-[#664fa3] flex-shrink-0 mt-0.5" />
                  <span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    Contact us if you experienced any issues during checkout
                  </span>
                </li>
              </ul>
            </div>

            <div className="bg-[#f1eef9] p-6 rounded-xl">
              <p className="text-sm text-[#664fa3] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <span className="font-medium text-[#422268]">Note:</span>{' '}
                Your membership application is still validated. You can complete payment whenever you're ready.
              </p>
            </div>
          </div>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              onClick={() => navigate('/plans')}
              className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-semibold"
              data-testid="try-again-button"
            >
              <CreditCard className="mr-2 h-5 w-5" />
              Try Again
            </Button>
            <Button
              onClick={() => navigate('/dashboard')}
              variant="outline"
              className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
              data-testid="back-to-dashboard-button"
            >
              <ArrowLeft className="mr-2 h-5 w-5" />
              Back to Dashboard
            </Button>
          </div>
        </Card>

        {/* Support Section */}
        <Card className="p-6 bg-gradient-to-br from-[#DDD8EB]/20 to-[#f1eef9]/20 rounded-2xl border border-[#ddd8eb]">
          <h3 className="text-lg font-semibold text-[#422268] mb-3 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
            Need Assistance?
          </h3>
          <p className="text-[#664fa3] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            If you encountered any technical issues or have questions about the payment process, our support team is here to help.
          </p>
          <div className="text-center">
            <a
              href="mailto:support@loaf.org"
              className="text-[#ff9e77] hover:text-[#664fa3] font-medium text-lg"
            >
              support@loaf.org
            </a>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default PaymentCancel;