import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { XCircle } from 'lucide-react';
import Navbar from '../components/Navbar';
import { Footer } from '../components/Footer';

interface PaymentCancelPageProps {
  onHomeClick: () => void;
  onPassesClick: () => void;
  onSignInClick: () => void;
  onSignOutClick?: () => void;
  currentPage?: string;
  user?: { email: string; name: string } | null;
}

export function PaymentCancelPage({
  onHomeClick,
  onPassesClick,
  onSignInClick,
  onSignOutClick,
  currentPage,
  user,
}: PaymentCancelPageProps) {
  const navigate = useNavigate();

  // ✅ Clear pending booking ID when user cancels
  useEffect(() => {
    localStorage.removeItem('pendingBookingId');
  }, []);

  return (
    <div className="min-h-screen bg-[#fafafa] font-poppins">
      <Navbar
        activeCity="Melbourne"
        onCityChange={() => {}}
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        onHomeClick={onHomeClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={() => {}}
        onAttractionsClick={() => {}}
        onBlogsClick={() => {}}
        onHowItWorksClick={() => {}}
        onFAQClick={() => {}}
        onPrivacyPolicyClick={() => {}}
        onAboutUsClick={() => {}}
        onProfileClick={() => {}}
        onCityCardsClick={() => {}}
        onMagicItineraryClick={() => {}}
        onPostCardsClick={() => {}}
        onOffersClick={() => {}}
        onSuperSavingsClick={() => {}}
        onEsimsClick={() => {}}
        onHotelDiscountsClick={() => {}}
        onCartClick={() => {}}
        currentPage={currentPage as any}
        user={user}
      />

      <div className="w-full px-4 sm:px-6 lg:px-10 xl:px-16 pt-32 pb-24 max-w-[1440px] mx-auto flex justify-center items-center min-h-[60vh]">
        <div className="bg-white rounded-2xl shadow-lg p-8 max-w-md w-full text-center">
          <XCircle className="w-16 h-16 text-yellow-500 mx-auto mb-4" />
          <h2 className="text-2xl font-semibold text-[#2a2a2a]">Payment Cancelled</h2>
          <p className="text-[#555] mt-2">
            You cancelled the payment process. No charges have been made.
          </p>
          <button
            onClick={() => navigate(-1)}
            className="mt-6 px-6 py-3 bg-[#F95F62] text-white rounded-xl font-medium hover:bg-[#e8545a] transition"
          >
            Go Back & Try Again
          </button>
        </div>
      </div>

      <Footer
        onHomeClick={onHomeClick}
        onPassesClick={onPassesClick}
        onAttractionsClick={() => {}}
        onBlogsClick={() => {}}
        onHowItWorksClick={() => {}}
        onFAQClick={() => {}}
        onPrivacyPolicyClick={() => {}}
        onAboutUsClick={() => {}}
        onContactUsClick={() => {}}
      />
    </div>
  );
}