import React from 'react';
import { BookingType, TimeSlot } from '@/types/bookings';

interface BookingSummaryProps {
  selectedBookingTypeData: BookingType | undefined;
  selectedDate: string;
  selectedTimeSlot: string;
  timeSlots: TimeSlot[];
  participantsCount: number;
  onSubmit: () => void;
}

const BookingSummary: React.FC<BookingSummaryProps> = ({
  selectedBookingTypeData,
  selectedDate,
  selectedTimeSlot,
  timeSlots,
  participantsCount,
  onSubmit,
}) => {
  const selectedTimeSlotData = timeSlots.find(s => s.id === selectedTimeSlot);

  // Format time to display in Tbilisi timezone (UTC+4)
  const formatTime = (time: string) => {
    if (time.match(/^\d{2}:\d{2}$/)) {
      return time;
    }
    if (time.includes('T') || time.includes(' ') || time.includes('Z')) {
      const date = new Date(time);
      return date.toLocaleTimeString('en-US', { 
        timeZone: 'Asia/Tbilisi',
        hour12: false, 
        hour: '2-digit', 
        minute: '2-digit' 
      });
    }
    return time;
  };

  return (
    <div className="bg-white rounded-xl p-6 shadow-sm">
      <h2 className="text-xl font-semibold text-gray-900 mb-4">Booking Summary</h2>
      
      <div className="space-y-3 mb-6">
        <div className="flex justify-between">
          <span className="text-gray-600">Experience:</span>
          <span className="font-medium">{selectedBookingTypeData?.display_name}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-gray-600">Date:</span>
          <span className="font-medium">{selectedDate}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-gray-600">Time:</span>
          <span className="font-medium">
            {selectedTimeSlotData?.start_time && selectedTimeSlotData?.end_time 
              ? `${formatTime(selectedTimeSlotData.start_time)}—${formatTime(selectedTimeSlotData.end_time)}`
              : 'Not selected'
            }
          </span>
        </div>
        <div className="flex justify-between">
          <span className="text-gray-600">Participants:</span>
          <span className="font-medium">{participantsCount}</span>
        </div>
        {selectedBookingTypeData?.requires_payment && (
          <div className="flex justify-between text-lg font-semibold border-t pt-3">
            <span>Total:</span>
            <span>₾{selectedBookingTypeData.price_per_person * participantsCount}</span>
          </div>
        )}
      </div>

      <button
        onClick={onSubmit}
        className="w-full bg-blue-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
      >
        {selectedBookingTypeData?.requires_payment ? 'Continue to Payment' : 'Confirm Booking'}
      </button>
    </div>
  );
};

export default BookingSummary;