import React, { useState } from 'react';
import { X, CheckCircle, CreditCard } from 'lucide-react';
import { useFormatCurrency } from '../hooks/useFormatCurrency';
import DepositPaymentModal from './DepositPaymentModal';

interface CashPaymentModalProps {
  isOpen: boolean;
  bookingId: number;
  amount: number;
  depositAmount: number;
  onSuccess: () => void;
  onClose: () => void;
}

const CashPaymentModal: React.FC<CashPaymentModalProps> = ({
  isOpen,
  bookingId,
  amount,
  depositAmount,
  onSuccess,
  onClose,
}) => {
  const { formatCurrency } = useFormatCurrency();
  const [showDepositModal, setShowDepositModal] = useState(false);

  if (!isOpen) return null;

  const handlePayDeposit = () => {
    setShowDepositModal(true);
  };

  const handleDepositSuccess = () => {
    setShowDepositModal(false);
    onSuccess();
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[10000] flex items-center justify-center p-2 sm:p-4">
      <div
        className="fixed inset-0 bg-black/90 backdrop-blur-sm"
        onClick={onClose}
      />
      <div className="relative w-full max-w-md max-h-[95vh] bg-gradient-to-br from-[#0a0a0a] via-[#1a1a1a] to-[#0a0a0a] rounded-xl sm:rounded-2xl border border-[var(--luxury-gold)]/30 shadow-2xl shadow-[var(--luxury-gold)]/20 overflow-hidden flex flex-col">
        {/* Header */}
        <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-[var(--luxury-gold)]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
          <div className="flex items-center justify-between gap-2">
            <h2 className="text-base sm:text-lg md:text-xl font-serif font-bold text-white tracking-tight truncate flex-1">
              Booking Created
            </h2>
            <button
              onClick={onClose}
              className="p-1.5 sm:p-2 hover:bg-[var(--luxury-gold)]/10 rounded-lg transition-colors text-gray-400 hover:text-white flex-shrink-0"
            >
              <X className="w-4 h-4 sm:w-5 sm:h-5" />
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-3 sm:p-4 md:p-6">
          <div className="space-y-4 sm:space-y-6">
            <div className="flex flex-col items-center text-center">
              <div className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-green-500/20 rounded-full flex items-center justify-center border border-green-500/30 mb-3 sm:mb-4">
                <CheckCircle className="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 text-green-400" />
              </div>
              <h3 className="text-base sm:text-lg font-serif font-semibold text-white mb-1.5 sm:mb-2">
                Booking Confirmed!
              </h3>
              <p className="text-xs sm:text-sm text-gray-400 leading-relaxed px-2">
                Your booking has been created successfully. Please pay the deposit to secure your reservation.
              </p>
            </div>

            <div className="bg-[#0a0a0a] border border-[var(--luxury-gold)]/20 rounded-lg p-3 sm:p-4 space-y-2 sm:space-y-3">
              <div className="flex items-center justify-between text-xs sm:text-sm">
                <span className="text-gray-400">Total Amount</span>
                <span className="text-white font-semibold">{formatCurrency(amount)}</span>
              </div>
              <div className="flex items-center justify-between text-xs sm:text-sm">
                <span className="text-gray-400 break-words pr-2">Deposit Required (20%)</span>
                <span className="text-[var(--luxury-gold)] font-bold flex-shrink-0">{formatCurrency(depositAmount)}</span>
              </div>
              <div className="pt-2 sm:pt-3 border-t border-[var(--luxury-gold)]/20">
                <p className="text-xs text-gray-400 leading-relaxed">
                  Pay the remaining balance on arrival at the hotel.
                </p>
              </div>
            </div>

            <div className="flex flex-col gap-2 sm:gap-3 pt-2">
              <button
                onClick={handlePayDeposit}
                className="w-full bg-[var(--luxury-gold)] text-black font-semibold py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg hover:bg-[var(--luxury-gold-dark)] transition-all flex items-center justify-center gap-2 text-sm sm:text-base min-h-[44px]"
              >
                <CreditCard className="w-4 h-4 sm:w-5 sm:h-5" />
                <span>Pay Deposit Now</span>
              </button>
              <button
                onClick={onClose}
                className="w-full bg-transparent border border-gray-600 text-gray-300 font-medium py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg hover:bg-gray-800/50 transition-all text-sm sm:text-base min-h-[44px]"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Deposit Payment Modal */}
      {showDepositModal && (
        <DepositPaymentModal
          isOpen={showDepositModal}
          bookingId={bookingId}
          onSuccess={handleDepositSuccess}
          onClose={() => setShowDepositModal(false)}
        />
      )}
    </div>
  );
};

export default CashPaymentModal;

