import React, { useState, useEffect, useCallback } from 'react';
import { 
  LogIn,
  LogOut,
  Search,
  User,
  Hotel,
  CheckCircle,
  AlertCircle,
  FileText,
  CreditCard,
  Printer,
  Sparkles,
  ChevronRight,
  Eye,
  XCircle,
  Loader2,
  Plus,
  Calendar
} from 'lucide-react';
import bookingService, { Booking, Payment } from '../../features/bookings/services/bookingService';
import { toast } from 'react-toastify';
import Loading from '../../shared/components/Loading';
import CurrencyIcon from '../../shared/components/CurrencyIcon';
import Pagination from '../../shared/components/Pagination';
import { useFormatCurrency } from '../../features/payments/hooks/useFormatCurrency';
import { parseDateLocal } from '../../shared/utils/format';
import CreateBookingModal from '../../features/hotel_services/components/CreateBookingModal';

type ReceptionTab = 'overview' | 'check-in' | 'check-out' | 'bookings';

interface GuestInfo {
  name: string;
  id_number: string;
  phone: string;
}

interface ServiceItem {
  service_name: string;
  quantity: number;
  price: number;
  total: number;
}

const ReceptionDashboardPage: React.FC = () => {
  const { formatCurrency } = useFormatCurrency();
  const [activeTab, setActiveTab] = useState<ReceptionTab>('overview');

  
  const [checkInBookingNumber, setCheckInBookingNumber] = useState('');
  const [checkInBooking, setCheckInBooking] = useState<Booking | null>(null);
  const [checkInLoading, setCheckInLoading] = useState(false);
  const [checkInSearching, setCheckInSearching] = useState(false);
  const [actualRoomNumber, setActualRoomNumber] = useState('');
  const [guests, setGuests] = useState<GuestInfo[]>([{ name: '', id_number: '', phone: '' }]);
  const [extraPersons, setExtraPersons] = useState(0);
  const [children, setChildren] = useState(0);
  const [additionalFee, setAdditionalFee] = useState(0);

  
  const [checkOutBookingNumber, setCheckOutBookingNumber] = useState('');
  const [checkOutBooking, setCheckOutBooking] = useState<Booking | null>(null);
  const [checkOutLoading, setCheckOutLoading] = useState(false);
  const [checkOutSearching, setCheckOutSearching] = useState(false);
  const [checkOutServices, setCheckOutServices] = useState<ServiceItem[]>([]);
  const [paymentMethod, setPaymentMethod] = useState<'cash' | 'stripe'>('cash');
  const [discount, setDiscount] = useState(0);
  const [showInvoice, setShowInvoice] = useState(false);

  
  const [bookings, setBookings] = useState<Booking[]>([]);
  const [bookingsLoading, setBookingsLoading] = useState(true);
  const [selectedBooking, setSelectedBooking] = useState<Booking | null>(null);
  const [showBookingDetailModal, setShowBookingDetailModal] = useState(false);
  const [updatingBookingId, setUpdatingBookingId] = useState<number | null>(null);
  const [cancellingBookingId, setCancellingBookingId] = useState<number | null>(null);
  const [bookingFilters, setBookingFilters] = useState({
    search: '',
    status: '',
  });
  const [bookingCurrentPage, setBookingCurrentPage] = useState(1);
  const [bookingTotalPages, setBookingTotalPages] = useState(1);
  const [bookingTotalItems, setBookingTotalItems] = useState(0);
  const bookingItemsPerPage = 5;
  const [showCreateBookingModal, setShowCreateBookingModal] = useState(false);

  
  const handleCheckInSearch = async () => {
    if (!checkInBookingNumber.trim()) {
      toast.error('Please enter booking number');
      return;
    }

    try {
      setCheckInSearching(true);
      const response = await bookingService.checkBookingByNumber(checkInBookingNumber);
      setCheckInBooking(response.data.booking);
      setActualRoomNumber(response.data.booking.room?.room_number || '');
      toast.success('Booking found');
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Booking not found');
      setCheckInBooking(null);
    } finally {
      setCheckInSearching(false);
    }
  };

  const handleAddGuest = () => {
    setGuests([...guests, { name: '', id_number: '', phone: '' }]);
  };

  const handleRemoveGuest = (index: number) => {
    if (guests.length > 1) {
      setGuests(guests.filter((_, i) => i !== index));
    }
  };

  const handleGuestChange = (index: number, field: keyof GuestInfo, value: string) => {
    const newGuests = [...guests];
    newGuests[index][field] = value;
    setGuests(newGuests);
  };

  const calculateCheckInAdditionalFee = () => {
    const extraPersonFee = extraPersons * 200000;
    const childrenFee = children * 100000;
    const total = extraPersonFee + childrenFee;
    setAdditionalFee(total);
    return total;
  };

  
  useEffect(() => {
    const extraPersonFee = extraPersons * 200000;
    const childrenFee = children * 100000;
    const total = extraPersonFee + childrenFee;
    setAdditionalFee(total);
  }, [extraPersons, children]);

  const handleCheckIn = async () => {
    if (!checkInBooking) return;

    if (!actualRoomNumber.trim()) {
      toast.error('Please enter actual room number');
      return;
    }

    const mainGuest = guests[0];
    if (!mainGuest.name || !mainGuest.id_number || !mainGuest.phone) {
      toast.error('Please fill in all main guest information');
      return;
    }

    try {
      setCheckInLoading(true);
      calculateCheckInAdditionalFee();

      await bookingService.updateBooking(checkInBooking.id, {
        status: 'checked_in',
      });

      toast.success('Check-in successful');
      
      setCheckInBooking(null);
      setCheckInBookingNumber('');
      setActualRoomNumber('');
      setGuests([{ name: '', id_number: '', phone: '' }]);
      setExtraPersons(0);
      setChildren(0);
      setAdditionalFee(0);
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'An error occurred during check-in');
    } finally {
      setCheckInLoading(false);
    }
  };

  
  const handleCheckOutSearch = async () => {
    if (!checkOutBookingNumber.trim()) {
      toast.error('Please enter booking number');
      return;
    }

    try {
      setCheckOutSearching(true);
      const response = await bookingService.checkBookingByNumber(checkOutBookingNumber);
      const foundBooking = response.data.booking;
      
      if (foundBooking.status !== 'checked_in') {
        toast.warning('Only checked-in bookings can be checked out');
      }
      
      setCheckOutBooking(foundBooking);
      
      setCheckOutServices([
        { service_name: 'Laundry', quantity: 2, price: 50000, total: 100000 },
        { service_name: 'Minibar', quantity: 1, price: 150000, total: 150000 },
      ]);
      
      toast.success('Booking found');
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Booking not found');
      setCheckOutBooking(null);
    } finally {
      setCheckOutSearching(false);
    }
  };

  const calculateRoomFee = () => {
    if (!checkOutBooking) return 0;
    return checkOutBooking.total_price || 0;
  };

  const calculateServiceFee = () => {
    return checkOutServices.reduce((sum, service) => sum + service.total, 0);
  };

  const calculateCheckOutAdditionalFee = () => {
    return 0;
  };

  const calculateTotalPaid = () => {
    if (!checkOutBooking?.payments) return 0;
    return checkOutBooking.payments
      .filter(payment => payment.payment_status === 'completed')
      .reduce((sum, payment) => sum + (payment.amount || 0), 0);
  };

  const calculateSubtotal = () => {
    return calculateRoomFee() + calculateServiceFee() + calculateCheckOutAdditionalFee();
  };

  const calculateTotal = () => {
    return calculateSubtotal() - discount;
  };

  const calculateRemaining = () => {
    const total = calculateTotal();
    const totalPaid = calculateTotalPaid();
    return total - totalPaid;
  };

  const handleCheckOut = async () => {
    if (!checkOutBooking) return;

    if (calculateRemaining() < 0) {
      toast.error('Invalid refund amount');
      return;
    }

    try {
      setCheckOutLoading(true);
      
      await bookingService.updateBooking(checkOutBooking.id, {
        status: 'checked_out',
      });

      toast.success('Check-out successful');
      setShowInvoice(true);
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'An error occurred during check-out');
    } finally {
      setCheckOutLoading(false);
    }
  };

  const handlePrintInvoice = () => {
    window.print();
  };

  const resetCheckOutForm = () => {
    setCheckOutBooking(null);
    setCheckOutBookingNumber('');
    setCheckOutServices([]);
    setDiscount(0);
    setPaymentMethod('cash');
    setShowInvoice(false);
  };

  
  const fetchBookings = useCallback(async () => {
    try {
      setBookingsLoading(true);
      const response = await bookingService.getAllBookings({
        ...bookingFilters,
        page: bookingCurrentPage,
        limit: bookingItemsPerPage,
      });
      setBookings(response.data.bookings);
      if (response.data.pagination) {
        setBookingTotalPages(response.data.pagination.totalPages);
        setBookingTotalItems(response.data.pagination.total);
      }
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to load bookings list');
    } finally {
      setBookingsLoading(false);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [bookingFilters.search, bookingFilters.status, bookingCurrentPage]);

  useEffect(() => {
    setBookingCurrentPage(1);
  }, [bookingFilters.search, bookingFilters.status]);

  useEffect(() => {
    if (activeTab === 'bookings') {
      fetchBookings();
    }
  }, [activeTab, fetchBookings]);

  const handleUpdateBookingStatus = async (id: number, status: string) => {
    try {
      setUpdatingBookingId(id);
      await bookingService.updateBooking(id, { status } as { status: string });
      toast.success('Status updated successfully');
      await fetchBookings();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to update status');
    } finally {
      setUpdatingBookingId(null);
    }
  };

  const handleCancelBooking = async (id: number) => {
    if (!window.confirm('Are you sure you want to cancel this booking?')) return;
    
    try {
      setCancellingBookingId(id);
      await bookingService.cancelBooking(id);
      toast.success('Booking cancelled successfully');
      await fetchBookings();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to cancel booking');
    } finally {
      setCancellingBookingId(null);
    }
  };

  const getBookingStatusBadge = (status: string) => {
    const badges: Record<string, { bg: string; text: string; label: string; border: string }> = {
      pending: { 
        bg: 'bg-gradient-to-r from-amber-50 to-yellow-50', 
        text: 'text-amber-800', 
        label: 'Pending confirmation',
        border: 'border-amber-200'
      },
      confirmed: { 
        bg: 'bg-gradient-to-r from-blue-50 to-indigo-50', 
        text: 'text-blue-800', 
        label: 'Confirmed',
        border: 'border-blue-200'
      },
      checked_in: { 
        bg: 'bg-gradient-to-r from-emerald-50 to-green-50', 
        text: 'text-emerald-800', 
        label: 'Checked in',
        border: 'border-emerald-200'
      },
      checked_out: { 
        bg: 'bg-gradient-to-r from-slate-50 to-gray-50', 
        text: 'text-slate-700', 
        label: 'Checked out',
        border: 'border-slate-200'
      },
      cancelled: { 
        bg: 'bg-gradient-to-r from-rose-50 to-red-50', 
        text: 'text-rose-800', 
        label: '❌ Canceled',
        border: 'border-rose-200'
      },
    };
    const badge = badges[status] || badges.pending;
    return (
      <span className={`px-4 py-1.5 rounded-full text-xs font-semibold border ${badge.bg} ${badge.text} ${badge.border} shadow-sm`}>
        {badge.label}
      </span>
    );
  };

  
  const tabs = [
    { id: 'overview' as ReceptionTab, label: 'Overview', icon: LogIn },
    { id: 'check-in' as ReceptionTab, label: 'Check-in', icon: LogIn },
    { id: 'check-out' as ReceptionTab, label: 'Check-out', icon: LogOut },
    { id: 'bookings' as ReceptionTab, label: 'Bookings', icon: Calendar },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50">
      <div className="max-w-7xl mx-auto px-2 sm:px-3 md:px-4 lg:px-6 xl:px-8 py-2 sm:py-4 md:py-6 lg:py-8 space-y-3 sm:space-y-4 md:space-y-6 lg:space-y-8 animate-fade-in">
        {}
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-r from-emerald-400/5 via-transparent to-teal-600/5 rounded-3xl blur-3xl"></div>
          <div className="relative bg-white/80 backdrop-blur-xl rounded-xl sm:rounded-2xl md:rounded-3xl shadow-2xl border border-emerald-200/30 p-3 sm:p-4 md:p-6 lg:p-8">
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 sm:gap-6 md:gap-8">
              <div className="flex items-start gap-3 sm:gap-4 md:gap-5">
                <div className="relative flex-shrink-0">
                  <div className="absolute inset-0 bg-gradient-to-br from-emerald-400 to-teal-600 rounded-xl sm:rounded-2xl blur-lg opacity-50"></div>
                  <div className="relative p-2.5 sm:p-3 md:p-4 rounded-xl sm:rounded-2xl bg-gradient-to-br from-emerald-500 via-emerald-500 to-teal-600 shadow-xl border border-emerald-400/50">
                    <LogIn className="w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8 text-white" />
                    <div className="absolute -top-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 bg-gradient-to-br from-green-300 to-emerald-500 rounded-full shadow-lg animate-pulse"></div>
                  </div>
                </div>
                <div className="space-y-2 sm:space-y-3 flex-1">
                  <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
                    <h1 className="text-2xl sm:text-3xl md:text-3xl font-extrabold bg-gradient-to-r from-slate-900 via-emerald-700 to-slate-900 bg-clip-text text-transparent">
                      Reception Dashboard
                    </h1>
                    <Sparkles className="w-4 h-4 sm:w-5 sm:h-5 text-emerald-500 animate-pulse" />
                  </div>
                  <p className="text-gray-600 text-xs sm:text-sm md:text-sm max-w-2xl leading-relaxed">
                    Manage guest check-in and check-out processes
                  </p>
                </div>
              </div>
            </div>

            {}
            <div className="mt-6 sm:mt-8 md:mt-10 pt-6 sm:pt-8 border-t border-gradient-to-r from-transparent via-emerald-200/30 to-transparent">
              <div className="flex flex-wrap gap-2 sm:gap-3">
                {tabs.map((tab) => {
                  const Icon = tab.icon;
                  const isActive = activeTab === tab.id;
                  return (
                    <button
                      key={tab.id}
                      onClick={() => setActiveTab(tab.id)}
                      className={`
                        group relative flex items-center gap-2 sm:gap-3 px-3 sm:px-4 md:px-6 py-2 sm:py-2.5 md:py-3.5 rounded-lg sm:rounded-xl font-semibold text-xs sm:text-sm
                        transition-all duration-300 overflow-hidden
                        ${
                          isActive
                            ? 'bg-gradient-to-r from-emerald-500 via-emerald-500 to-teal-600 text-white shadow-xl shadow-emerald-500/40 scale-105'
                            : 'bg-white/80 text-gray-700 border border-gray-200/60 hover:border-emerald-300/60 hover:bg-gradient-to-r hover:from-emerald-50/50 hover:to-teal-50/30 hover:shadow-lg hover:scale-102'
                        }
                      `}
                    >
                      {isActive && (
                        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer"></div>
                      )}
                      <Icon className={`w-5 h-5 transition-transform duration-300 ${isActive ? 'text-white' : 'text-gray-600 group-hover:text-emerald-600 group-hover:scale-110'}`} />
                      <span className="relative z-10">{tab.label}</span>
                      {isActive && (
                        <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-green-300 via-emerald-400 to-teal-400"></div>
                      )}
                    </button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>

        {}
        {activeTab === 'overview' && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
            <div 
              onClick={() => setActiveTab('check-in')}
              className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-emerald-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-emerald-300/60 overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-emerald-400/10 to-transparent rounded-bl-full"></div>
              <div className="relative space-y-5">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-4">
                    <div className="relative">
                      <div className="absolute inset-0 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-xl blur-md opacity-50 group-hover:opacity-75 transition-opacity"></div>
                      <div className="relative p-3.5 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 shadow-lg border border-emerald-400/50 group-hover:scale-110 transition-transform">
                        <LogIn className="w-6 h-6 text-white" />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-900 text-xl mb-1">Check-in</h3>
                      <div className="h-1 w-12 bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full"></div>
                    </div>
                  </div>
                </div>
                <p className="text-gray-600 text-sm leading-relaxed">
                  Process guest check-in and room assignment
                </p>
                <div className="pt-5 border-t border-gray-100">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500 font-medium">Start Check-in</span>
                    <ChevronRight className="w-5 h-5 text-emerald-600 group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </div>
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-emerald-50/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
            </div>

            <div 
              onClick={() => setActiveTab('check-out')}
              className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-teal-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-teal-300/60 overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-teal-400/10 to-transparent rounded-bl-full"></div>
              <div className="relative space-y-5">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-4">
                    <div className="relative">
                      <div className="absolute inset-0 bg-gradient-to-br from-teal-400 to-teal-600 rounded-xl blur-md opacity-50 group-hover:opacity-75 transition-opacity"></div>
                      <div className="relative p-3.5 rounded-xl bg-gradient-to-br from-teal-500 to-teal-600 shadow-lg border border-teal-400/50 group-hover:scale-110 transition-transform">
                        <LogOut className="w-6 h-6 text-white" />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-900 text-xl mb-1">Check-out</h3>
                      <div className="h-1 w-12 bg-gradient-to-r from-teal-500 to-teal-600 rounded-full"></div>
                    </div>
                  </div>
                </div>
                <p className="text-gray-600 text-sm leading-relaxed">
                  Process guest check-out and payment collection
                </p>
                <div className="pt-5 border-t border-gray-100">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500 font-medium">Start Check-out</span>
                    <ChevronRight className="w-5 h-5 text-teal-600 group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </div>
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-teal-50/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
            </div>

            <div 
              onClick={() => setActiveTab('bookings')}
              className="group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100/50 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 hover:border-blue-300/60 overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400/10 to-transparent rounded-bl-full"></div>
              <div className="relative space-y-5">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-4">
                    <div className="relative">
                      <div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl blur-md opacity-50 group-hover:opacity-75 transition-opacity"></div>
                      <div className="relative p-3.5 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg border border-blue-400/50 group-hover:scale-110 transition-transform">
                        <Calendar className="w-6 h-6 text-white" />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-900 text-xl mb-1">Bookings</h3>
                      <div className="h-1 w-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full"></div>
                    </div>
                  </div>
                </div>
                <p className="text-gray-600 text-sm leading-relaxed">
                  Manage and track all hotel bookings
                </p>
                <div className="pt-5 border-t border-gray-100">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500 font-medium">Manage Bookings</span>
                    <ChevronRight className="w-5 h-5 text-blue-600 group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </div>
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-50/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
            </div>

          </div>
        )}

        {}
        {activeTab === 'check-in' && (
          <div className="space-y-8">
            {checkInLoading && (
              <Loading fullScreen text="Processing check-in..." />
            )}

            {}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="space-y-3">
                <div className="flex items-center gap-3">
                  <div className="p-2.5 rounded-xl bg-gradient-to-br from-emerald-500/10 to-green-500/10 border border-emerald-200/40">
                    <LogIn className="w-6 h-6 text-emerald-600" />
                  </div>
                  <h2 className="text-xl sm:text-2xl md:text-2xl font-extrabold text-gray-900">Check-in</h2>
                </div>
                <p className="text-gray-600 text-base max-w-2xl leading-relaxed">
                  Customer check-in process and room assignment
                </p>
              </div>
            </div>

            {}
            <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                <div className="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
                  <span className="text-emerald-600 font-bold">1</span>
                </div>
                Search Booking
              </h2>
              <div className="flex gap-4">
                <div className="flex-1 relative group">
                  <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 group-focus-within:text-emerald-500 transition-colors" />
                  <input
                    type="text"
                    value={checkInBookingNumber}
                    onChange={(e) => setCheckInBookingNumber(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && handleCheckInSearch()}
                    placeholder="Enter booking number"
                    className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
                  />
                </div>
                <button
                  onClick={handleCheckInSearch}
                  disabled={checkInSearching}
                  className="group relative px-8 py-3.5 bg-gradient-to-r from-emerald-500 via-emerald-500 to-teal-600 text-white font-semibold rounded-xl shadow-xl shadow-emerald-500/30 hover:shadow-2xl hover:shadow-emerald-500/40 transition-all duration-300 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 overflow-hidden"
                >
                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
                  <div className="relative flex items-center gap-2">
                    <Search className="w-5 h-5" />
                    {checkInSearching ? 'Searching...' : 'Search'}
                  </div>
                </button>
              </div>
            </div>

            {}
            {checkInBooking && (
              <>
                <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
                  <h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
                      <CheckCircle className="w-5 h-5 text-emerald-600" />
                    </div>
                    Booking Information
                  </h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div className="space-y-4">
                      <div className="flex justify-between items-center py-2 border-b border-gray-100">
                        <span className="text-gray-600 font-medium">Booking Number:</span>
                        <span className="font-bold text-gray-900 font-mono">{checkInBooking.booking_number}</span>
                      </div>
                      <div className="flex justify-between items-center py-2 border-b border-gray-100">
                        <span className="text-gray-600 font-medium">Customer:</span>
                        <span className="font-semibold text-gray-900">{checkInBooking.user?.full_name}</span>
                      </div>
                      <div className="flex justify-between items-center py-2 border-b border-gray-100">
                        <span className="text-gray-600 font-medium">Email:</span>
                        <span className="text-gray-900">{checkInBooking.user?.email}</span>
                      </div>
                      <div className="flex justify-between items-center py-2">
                        <span className="text-gray-600 font-medium">Phone:</span>
                        <span className="text-gray-900">{checkInBooking.user?.phone_number || 'N/A'}</span>
                      </div>
                    </div>
                    <div className="space-y-4">
                      <div className="flex justify-between items-center py-2 border-b border-gray-100">
                        <span className="text-gray-600 font-medium">Room Type:</span>
                        <span className="font-semibold text-gray-900">{checkInBooking.room?.room_type?.name || 'N/A'}</span>
                      </div>
                      <div className="flex justify-between items-center py-2 border-b border-gray-100">
                        <span className="text-gray-600 font-medium">Check-in:</span>
                        <span className="text-gray-900">{checkInBooking.check_in_date ? parseDateLocal(checkInBooking.check_in_date).toLocaleDateString('en-US') : 'N/A'}</span>
                      </div>
                      <div className="flex justify-between items-center py-2 border-b border-gray-100">
                        <span className="text-gray-600 font-medium">Check-out:</span>
                        <span className="text-gray-900">{checkInBooking.check_out_date ? parseDateLocal(checkInBooking.check_out_date).toLocaleDateString('en-US') : 'N/A'}</span>
                      </div>
                      <div className="flex justify-between items-center py-2">
                        <span className="text-gray-600 font-medium">Number of Guests:</span>
                        <span className="font-semibold text-gray-900">{checkInBooking.guest_count} guest(s)</span>
                      </div>
                    </div>
                  </div>

                  {}
                  <div className="mt-6 p-6 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border border-green-200">
                    <h3 className="text-md font-semibold text-gray-900 mb-4 flex items-center gap-2">
                      <CheckCircle className="w-5 h-5 text-green-600" />
                      Payment Information
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <div className="space-y-3">
                          <div className="flex justify-between items-center py-2 border-b border-green-100">
                            <span className="text-gray-600 font-medium">Payment Method:</span>
                            <span className="font-semibold text-gray-900">
                              {checkInBooking.payment_method === 'cash'
                                ? '💵 Pay at Hotel'
                                : checkInBooking.payment_method === 'stripe'
                                ? '💳 Stripe (Card)'
                                : checkInBooking.payment_method === 'paypal'
                                ? '💳 PayPal'
                                : checkInBooking.payment_method || 'N/A'}
                            </span>
                          </div>
                          <div className="flex justify-between items-center py-2">
                            <span className="text-gray-600 font-medium">Payment Status:</span>
                            <span className={`font-semibold ${
                              checkInBooking.payment_status === 'paid'
                                ? 'text-green-600'
                                : checkInBooking.payment_status === 'refunded'
                                ? 'text-orange-600'
                                : 'text-red-600'
                            }`}>
                              {checkInBooking.payment_status === 'paid'
                                ? '✅ Paid'
                                : checkInBooking.payment_status === 'refunded'
                                ? '💰 Refunded'
                                : '❌ Unpaid'}
                            </span>
                          </div>
                        </div>
                      </div>
                      <div>
                        <div className="space-y-3">
                          {(() => {
                            const completedPayments = checkInBooking.payments?.filter(
                              (p) => p.payment_status === 'completed'
                            ) || [];
                            const amountPaid = completedPayments.reduce(
                              (sum, p) => sum + (p.amount || 0),
                              0
                            );
                            const remainingDue = checkInBooking.total_price - amountPaid;
                            const hasPayments = completedPayments.length > 0;
                            
                            return (
                              <>
                                <div className="flex justify-between items-center py-2 border-b border-green-100">
                                  <span className="text-gray-600 font-medium">Total Price:</span>
                                  <span className="font-semibold text-gray-900">{formatCurrency(checkInBooking.total_price)}</span>
                                </div>
                                {hasPayments && (
                                  <>
                                    <div className="flex justify-between items-center py-2 border-b border-green-100">
                                      <span className="text-gray-600 font-medium">Amount Paid:</span>
                                      <span className="font-semibold text-green-600">{formatCurrency(amountPaid)}</span>
                                    </div>
                                    {remainingDue > 0 && (
                                      <div className="flex justify-between items-center py-2">
                                        <span className="text-gray-600 font-medium">Remaining Due:</span>
                                        <span className="font-semibold text-amber-600">{formatCurrency(remainingDue)}</span>
                                      </div>
                                    )}
                                    {completedPayments.length > 0 && (
                                      <div className="mt-3 pt-3 border-t border-green-200">
                                        <p className="text-xs text-gray-500 mb-2 font-medium">Payment Details:</p>
                                        {completedPayments.map((payment, idx) => (
                                          <div key={payment.id || idx} className="text-xs text-gray-600 mb-1">
                                            • {formatCurrency(payment.amount)} via {payment.payment_method === 'stripe' ? 'Stripe' : payment.payment_method === 'paypal' ? 'PayPal' : payment.payment_method || 'Cash'}
                                            {payment.payment_type === 'deposit' && ' (Deposit 20%)'}
                                            {payment.transaction_id && ` - ${payment.transaction_id}`}
                                          </div>
                                        ))}
                                      </div>
                                    )}
                                  </>
                                )}
                              </>
                            );
                          })()}
                        </div>
                      </div>
                    </div>
                  </div>

                  {checkInBooking.status !== 'confirmed' && (
                    <div className="mt-6 p-4 bg-gradient-to-br from-amber-50 to-yellow-50 border border-amber-200 rounded-xl flex items-start gap-3">
                      <AlertCircle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
                      <div>
                        <p className="text-sm font-semibold text-amber-900">Warning</p>
                        <p className="text-sm text-amber-800 mt-1">
                          Booking status: <span className="font-semibold">{checkInBooking.status}</span>. Only check-in confirmed bookings.
                        </p>
                      </div>
                    </div>
                  )}
                </div>

                {}
                <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
                  <h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                      <Hotel className="w-5 h-5 text-blue-600" />
                    </div>
                    Assign Actual Room Number
                  </h2>
                  <div className="max-w-md space-y-3">
                    <label className="block text-sm font-semibold text-gray-900">
                      Room Number <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="text"
                      value={actualRoomNumber}
                      onChange={(e) => setActualRoomNumber(e.target.value)}
                      placeholder="e.g: 101, 202, 305"
                      className="w-full px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md"
                    />
                    <p className="text-xs text-gray-500">
                      Enter the actual room number to assign to the guest
                    </p>
                  </div>
                </div>

                {}
                <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
                  <h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
                      <User className="w-5 h-5 text-purple-600" />
                    </div>
                    Guest Information
                  </h2>
                  <div className="space-y-6">
                    {guests.map((guest, index) => (
                      <div key={index} className="p-6 bg-gradient-to-br from-gray-50 to-white border-2 border-gray-200 rounded-xl hover:border-purple-200 transition-colors">
                        <div className="flex justify-between items-center mb-4">
                          <h3 className="font-bold text-gray-900">
                            {index === 0 ? 'Main Guest' : `Guest ${index + 1}`}
                            {index === 0 && <span className="text-red-500 ml-1">*</span>}
                          </h3>
                          {index > 0 && (
                            <button
                              onClick={() => handleRemoveGuest(index)}
                              className="px-4 py-2 text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors text-sm font-semibold"
                            >
                              Remove
                            </button>
                          )}
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                          <div className="space-y-2">
                            <label className="block text-sm font-semibold text-gray-700">
                              Full Name {index === 0 && <span className="text-red-500">*</span>}
                            </label>
                            <input
                              type="text"
                              value={guest.name}
                              onChange={(e) => handleGuestChange(index, 'name', e.target.value)}
                              className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                              placeholder="John Doe"
                            />
                          </div>
                          <div className="space-y-2">
                            <label className="block text-sm font-semibold text-gray-700">
                              ID Number {index === 0 && <span className="text-red-500">*</span>}
                            </label>
                            <input
                              type="text"
                              value={guest.id_number}
                              onChange={(e) => handleGuestChange(index, 'id_number', e.target.value)}
                              className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm font-mono"
                              placeholder="001234567890"
                            />
                          </div>
                          <div className="space-y-2">
                            <label className="block text-sm font-semibold text-gray-700">
                              Phone Number {index === 0 && <span className="text-red-500">*</span>}
                            </label>
                            <input
                              type="tel"
                              value={guest.phone}
                              onChange={(e) => handleGuestChange(index, 'phone', e.target.value)}
                              className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                              placeholder="0912345678"
                            />
                          </div>
                        </div>
                      </div>
                    ))}
                    <button
                      onClick={handleAddGuest}
                      className="px-6 py-3 text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50 rounded-xl transition-colors text-sm font-semibold border-2 border-emerald-200 hover:border-emerald-300"
                    >
                      + Add Guest
                    </button>
                  </div>
                </div>

                {}
                <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
                  <h2 className="text-xl font-bold text-gray-900 mb-6">Additional Fees (if any)</h2>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div className="space-y-3">
                      <label className="block text-sm font-semibold text-gray-900">Extra Persons</label>
                      <input
                        type="number"
                        min="0"
                        value={extraPersons}
                        onChange={(e) => {
                          setExtraPersons(parseInt(e.target.value) || 0);
                          calculateCheckInAdditionalFee();
                        }}
                        className="w-full px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                      />
                      <p className="text-xs text-gray-500">€50/person</p>
                    </div>
                    <div className="space-y-3">
                      <label className="block text-sm font-semibold text-gray-900">Number of Children</label>
                      <input
                        type="number"
                        min="0"
                        value={children}
                        onChange={(e) => {
                          setChildren(parseInt(e.target.value) || 0);
                          calculateCheckInAdditionalFee();
                        }}
                        className="w-full px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-emerald-400 focus:ring-4 focus:ring-emerald-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                      />
                      <p className="text-xs text-gray-500">€25/child</p>
                    </div>
                    <div className="space-y-3">
                      <label className="block text-sm font-semibold text-gray-900">Total Additional Fee</label>
                      <div className="px-4 py-3.5 bg-gradient-to-br from-emerald-50 to-green-50 border-2 border-emerald-200 rounded-xl text-lg font-bold text-emerald-600">
                        {formatCurrency(additionalFee)}
                      </div>
                    </div>
                  </div>
                </div>

                {}
                <div className="relative bg-gradient-to-r from-emerald-500 via-emerald-600 to-teal-600 rounded-2xl shadow-2xl p-8 text-white overflow-hidden">
                  <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
                  <div className="relative flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                    <div>
                      <h3 className="text-xl font-bold mb-2">Confirm Check-in</h3>
                      <p className="text-emerald-100 text-sm">
                        Guest: <span className="font-semibold">{checkInBooking.user?.full_name}</span> | 
                        Room: <span className="font-semibold">{actualRoomNumber || 'Not assigned'}</span>
                        {additionalFee > 0 && (
                          <> | Additional Fee: <span className="font-semibold">{formatCurrency(additionalFee)}</span></>
                        )}
                      </p>
                    </div>
                    <button
                      onClick={handleCheckIn}
                      disabled={!actualRoomNumber || !guests[0].name || checkInBooking.status !== 'confirmed'}
                      className="px-8 py-4 bg-white text-emerald-600 rounded-xl hover:bg-emerald-50 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed font-bold flex items-center gap-2 transition-all duration-200 shadow-xl hover:shadow-2xl hover:scale-105 disabled:hover:scale-100"
                    >
                      <CheckCircle className="w-5 h-5" />
                      Confirm Check-in
                    </button>
                  </div>
                </div>
              </>
            )}

            {}
            {!checkInBooking && !checkInSearching && (
              <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-12 text-center">
                <div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-emerald-100 to-emerald-200 flex items-center justify-center">
                  <Search className="w-10 h-10 text-emerald-600" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-2">No booking selected</h3>
                <p className="text-gray-600">
                  Please enter booking number above to start check-in process
                </p>
              </div>
            )}
          </div>
        )}

        {}
        {activeTab === 'check-out' && (
          <div className="space-y-8">
            {checkOutLoading && (
              <Loading fullScreen text="Processing check-out..." />
            )}

            {}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="space-y-3">
                <div className="flex items-center gap-3">
                  <div className="p-2.5 rounded-xl bg-gradient-to-br from-teal-500/10 to-cyan-500/10 border border-teal-200/40">
                    <LogOut className="w-6 h-6 text-teal-600" />
                  </div>
                  <h2 className="text-xl sm:text-2xl md:text-2xl font-extrabold text-gray-900">Check-out</h2>
                </div>
                <p className="text-gray-600 text-base max-w-2xl leading-relaxed">
                  Payment and check-out process for guests
                </p>
              </div>
            </div>

            {}
            {!showInvoice && (
              <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
                <h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                  <div className="w-8 h-8 rounded-lg bg-teal-100 flex items-center justify-center">
                    <span className="text-teal-600 font-bold">1</span>
                  </div>
                  Search Booking
                </h2>
                <div className="flex gap-4">
                  <div className="flex-1 relative group">
                    <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 group-focus-within:text-teal-500 transition-colors" />
                    <input
                      type="text"
                      value={checkOutBookingNumber}
                      onChange={(e) => setCheckOutBookingNumber(e.target.value)}
                      onKeyPress={(e) => e.key === 'Enter' && handleCheckOutSearch()}
                      placeholder="Enter booking number or room number"
                      className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-teal-400 focus:ring-4 focus:ring-teal-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
                    />
                  </div>
                  <button
                    onClick={handleCheckOutSearch}
                    disabled={checkOutSearching}
                    className="group relative px-8 py-3.5 bg-gradient-to-r from-teal-500 via-teal-500 to-cyan-600 text-white font-semibold rounded-xl shadow-xl shadow-teal-500/30 hover:shadow-2xl hover:shadow-teal-500/40 transition-all duration-300 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 overflow-hidden"
                  >
                    <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
                    <div className="relative flex items-center gap-2">
                      <Search className="w-5 h-5" />
                      {checkOutSearching ? 'Searching...' : 'Search'}
                    </div>
                  </button>
                </div>
              </div>
            )}

            {}
            {checkOutBooking && !showInvoice && (
              <>
                {}
                <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
                  <h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-teal-100 flex items-center justify-center">
                      <CheckCircle className="w-5 h-5 text-teal-600" />
                    </div>
                    Booking Information
                  </h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div className="space-y-4">
                      <div className="flex justify-between items-center py-2 border-b border-gray-100">
                        <span className="text-gray-600 font-medium">Booking number:</span>
                        <span className="font-bold text-gray-900 font-mono">{checkOutBooking.booking_number}</span>
                      </div>
                      <div className="flex justify-between items-center py-2 border-b border-gray-100">
                        <span className="text-gray-600 font-medium">Customer:</span>
                        <span className="font-semibold text-gray-900">{checkOutBooking.user?.full_name}</span>
                      </div>
                      <div className="flex justify-between items-center py-2">
                        <span className="text-gray-600 font-medium">Room number:</span>
                        <span className="font-semibold text-gray-900">{checkOutBooking.room?.room_number}</span>
                      </div>
                    </div>
                    <div className="space-y-4">
                      <div className="flex justify-between items-center py-2 border-b border-gray-100">
                        <span className="text-gray-600 font-medium">Check-in:</span>
                        <span className="text-gray-900">{checkOutBooking.check_in_date ? parseDateLocal(checkOutBooking.check_in_date).toLocaleDateString('en-US') : 'N/A'}</span>
                      </div>
                      <div className="flex justify-between items-center py-2 border-b border-gray-100">
                        <span className="text-gray-600 font-medium">Check-out:</span>
                        <span className="text-gray-900">{checkOutBooking.check_out_date ? parseDateLocal(checkOutBooking.check_out_date).toLocaleDateString('en-US') : 'N/A'}</span>
                      </div>
                      <div className="flex justify-between items-center py-2">
                        <span className="text-gray-600 font-medium">Nights:</span>
                        <span className="font-semibold text-gray-900">
                          {checkOutBooking.check_in_date && checkOutBooking.check_out_date
                            ? Math.ceil((parseDateLocal(checkOutBooking.check_out_date).getTime() - parseDateLocal(checkOutBooking.check_in_date).getTime()) / (1000 * 60 * 60 * 24))
                            : 0} night(s)
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

                {}
                <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
                  <h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                      <FileText className="w-5 h-5 text-blue-600" />
                    </div>
                    Invoice Details
                  </h2>
                  
                  {}
                  <div className="mb-6">
                    <h3 className="font-semibold text-gray-700 mb-3">Room Fee</h3>
                    <div className="bg-gradient-to-br from-gray-50 to-white p-5 rounded-xl border border-gray-200">
                      <div className="flex justify-between items-center">
                        <span className="text-gray-900 font-medium">{checkOutBooking.room?.room_type?.name || 'Room'}</span>
                        <span className="font-bold text-gray-900">{formatCurrency(calculateRoomFee())}</span>
                      </div>
                    </div>
                  </div>

                  {}
                  {checkOutServices.length > 0 && (
                    <div className="mb-6">
                      <h3 className="font-semibold text-gray-700 mb-3">Services Used</h3>
                      <div className="bg-gradient-to-br from-gray-50 to-white p-5 rounded-xl border border-gray-200 space-y-3">
                        {checkOutServices.map((service, index) => (
                          <div key={index} className="flex justify-between items-center text-sm py-2 border-b border-gray-200 last:border-0">
                            <span className="text-gray-700">
                              {service.service_name} (x{service.quantity})
                            </span>
                            <span className="font-semibold text-gray-900">{formatCurrency(service.total)}</span>
                          </div>
                        ))}
                        <div className="pt-3 border-t-2 border-gray-300 flex justify-between font-bold">
                          <span>Total services:</span>
                          <span className="text-teal-600">{formatCurrency(calculateServiceFee())}</span>
                        </div>
                      </div>
                    </div>
                  )}

                  {}
                  {calculateCheckOutAdditionalFee() > 0 && (
                    <div className="mb-6">
                      <h3 className="font-semibold text-gray-700 mb-3">Additional Fees</h3>
                      <div className="bg-gradient-to-br from-gray-50 to-white p-5 rounded-xl border border-gray-200">
                        <div className="flex justify-between items-center">
                          <span className="text-gray-700">Extra person/children fee</span>
                          <span className="font-semibold text-gray-900">{formatCurrency(calculateCheckOutAdditionalFee())}</span>
                        </div>
                      </div>
                    </div>
                  )}

                  {}
                  <div className="mb-6">
                    <h3 className="font-semibold text-gray-700 mb-3">Discount</h3>
                    <input
                      type="number"
                      value={discount}
                      onChange={(e) => setDiscount(parseFloat(e.target.value) || 0)}
                      placeholder="Enter discount amount"
                      className="w-full px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-teal-400 focus:ring-4 focus:ring-teal-100 transition-all duration-200 text-gray-700 font-medium shadow-sm"
                    />
                  </div>

                  {}
                  <div className="border-t-2 border-gray-300 pt-6 space-y-4">
                    <div className="flex justify-between items-center text-lg">
                      <span className="text-gray-700 font-medium">Subtotal:</span>
                      <span className="font-bold text-gray-900">{formatCurrency(calculateSubtotal())}</span>
                    </div>
                    {discount > 0 && (
                      <div className="flex justify-between items-center text-lg text-rose-600">
                        <span>Discount:</span>
                        <span className="font-semibold">-{formatCurrency(discount)}</span>
                      </div>
                    )}
                    <div className="flex justify-between items-center text-lg sm:text-xl md:text-xl font-extrabold bg-gradient-to-r from-teal-600 to-cyan-600 bg-clip-text text-transparent pt-2 border-t-2 border-gray-300">
                      <span>Total:</span>
                      <span>{formatCurrency(calculateTotal())}</span>
                    </div>
                    {calculateTotalPaid() > 0 && (
                      <div className="flex justify-between items-center text-lg text-gray-600">
                        <span>Total paid:</span>
                        <span className="font-semibold">-{formatCurrency(calculateTotalPaid())}</span>
                      </div>
                    )}
                    <div className="flex justify-between items-center text-xl sm:text-2xl md:text-2xl font-extrabold text-emerald-600 pt-4 border-t-2 border-gray-300">
                      <span>Remaining payment:</span>
                      <span>{formatCurrency(calculateRemaining())}</span>
                    </div>
                  </div>
                </div>

                {}
                <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
                  <h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center">
                      <CreditCard className="w-5 h-5 text-green-600" />
                    </div>
                    Payment Method
                  </h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl">
                    <button
                      onClick={() => setPaymentMethod('cash')}
                      className={`p-6 border-2 rounded-xl text-center transition-all duration-200 ${
                        paymentMethod === 'cash'
                          ? 'border-emerald-600 bg-gradient-to-br from-emerald-50 to-green-50 text-emerald-700 shadow-lg'
                          : 'border-gray-200 hover:border-gray-300 text-gray-700 hover:bg-gray-50'
                      }`}
                    >
                      <CurrencyIcon className="mx-auto mb-3" size={40} />
                      <div className="font-bold text-lg">Cash</div>
                    </button>
                    <button
                      onClick={() => setPaymentMethod('stripe')}
                      className={`p-6 border-2 rounded-xl text-center transition-all duration-200 ${
                        paymentMethod === 'stripe'
                          ? 'border-indigo-600 bg-gradient-to-br from-indigo-50 to-purple-50 text-indigo-700 shadow-lg'
                          : 'border-gray-200 hover:border-gray-300 text-gray-700 hover:bg-gray-50'
                      }`}
                    >
                      <CreditCard className="w-10 h-10 mx-auto mb-3" />
                      <div className="font-bold text-lg">Stripe</div>
                    </button>
                  </div>
                </div>

                {}
                <div className="relative bg-gradient-to-r from-teal-500 via-teal-600 to-cyan-600 rounded-2xl shadow-2xl p-8 text-white overflow-hidden">
                  <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
                  <div className="relative flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                    <div>
                      <h3 className="text-xl font-bold mb-2">Confirm Check-out</h3>
                      <p className="text-teal-100 text-sm">
                        Total payment: <span className="font-bold text-white text-xl">{formatCurrency(calculateRemaining())}</span>
                      </p>
                    </div>
                    <button
                      onClick={handleCheckOut}
                      disabled={checkOutBooking.status !== 'checked_in'}
                      className="px-8 py-4 bg-white text-teal-600 rounded-xl hover:bg-teal-50 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed font-bold flex items-center gap-2 transition-all duration-200 shadow-xl hover:shadow-2xl hover:scale-105 disabled:hover:scale-100"
                    >
                      <CheckCircle className="w-5 h-5" />
                      Confirm payment & Check-out
                    </button>
                  </div>
                </div>
              </>
            )}

            {}
            {showInvoice && checkOutBooking && (
              <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-200/50 p-8">
                <div className="text-center mb-8">
                  <h2 className="text-xl sm:text-2xl md:text-2xl font-extrabold text-gray-900">PAYMENT INVOICE</h2>
                  <p className="text-gray-600 mt-2">Check-out successful</p>
                </div>

                <div className="border-t-2 border-b-2 border-gray-300 py-6 mb-8">
                  <div className="grid grid-cols-2 gap-8">
                    <div>
                      <p className="text-sm text-gray-600 mb-1">Booking number:</p>
                      <p className="font-bold text-gray-900 font-mono">{checkOutBooking.booking_number}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-600 mb-1">Check-out date:</p>
                      <p className="font-bold text-gray-900">{new Date().toLocaleString('en-US')}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-600 mb-1">Customer:</p>
                      <p className="font-bold text-gray-900">{checkOutBooking.user?.full_name}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-600 mb-1">Payment method:</p>
                      <p className="font-bold text-gray-900">
                        {paymentMethod === 'cash' ? 'Cash' : 'Stripe'}
                      </p>
                    </div>
                  </div>
                </div>

                <div className="mb-8">
                  <div className="flex justify-between items-center text-lg sm:text-xl md:text-xl font-extrabold text-emerald-600">
                    <span>Total payment:</span>
                    <span>{formatCurrency(calculateRemaining())}</span>
                  </div>
                </div>

                <div className="flex gap-4">
                  <button
                    onClick={handlePrintInvoice}
                    className="flex-1 px-6 py-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:from-blue-600 hover:to-blue-700 font-semibold flex items-center justify-center gap-2 transition-all duration-200 shadow-lg hover:shadow-xl"
                  >
                    <Printer className="w-5 h-5" />
                    Print Invoice
                  </button>
                  <button
                    onClick={resetCheckOutForm}
                    className="flex-1 px-6 py-4 bg-gradient-to-r from-gray-400 to-gray-500 text-white rounded-xl hover:from-gray-500 hover:to-gray-600 font-semibold transition-all duration-200 shadow-lg hover:shadow-xl"
                  >
                    Complete
                  </button>
                </div>
              </div>
            )}

            {}
            {!checkOutBooking && !checkOutSearching && !showInvoice && (
              <div className="relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-12 text-center">
                <div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-teal-100 to-teal-200 flex items-center justify-center">
                  <Search className="w-10 h-10 text-teal-600" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-2">No booking selected</h3>
                <p className="text-gray-600">
                  Please enter booking number to start check-out process
                </p>
              </div>
            )}
          </div>
        )}

        {}
        {activeTab === 'bookings' && (
          <div className="space-y-8">
            {bookingsLoading && <Loading />}

            {}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div className="space-y-3 flex-1">
                  <div className="flex items-center gap-3">
                    <div className="p-2.5 rounded-xl bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-200/40">
                      <Calendar className="w-6 h-6 text-blue-600" />
                    </div>
                    <h2 className="text-xl sm:text-2xl md:text-2xl font-extrabold text-gray-900">Reception Bookings</h2>
                  </div>
                  <p className="text-gray-600 text-base max-w-2xl leading-relaxed">
                    Quick view of bookings relevant to reception operations (confirmed, checked-in, checked-out)
                  </p>
                </div>
                <div className="flex gap-3">
                  <button
                    onClick={() => navigate('/admin/bookings')}
                    className="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl font-semibold hover:from-blue-600 hover:to-blue-700 transition-all duration-200 shadow-lg hover:shadow-xl whitespace-nowrap w-full sm:w-auto"
                  >
                    <Eye className="w-5 h-5" />
                    View All Bookings
                  </button>
                  <button
                    onClick={() => setShowCreateBookingModal(true)}
                    className="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl whitespace-nowrap w-full sm:w-auto"
                  >
                    <Plus className="w-5 h-5" />
                    Create Booking
                  </button>
                </div>
              </div>
            </div>

            {}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div className="relative group">
                  <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 group-focus-within:text-blue-500 transition-colors" />
                  <input
                    type="text"
                    placeholder="Search by booking number, guest name..."
                    value={bookingFilters.search}
                    onChange={(e) => setBookingFilters({ ...bookingFilters, search: e.target.value })}
                    className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
                  />
                </div>
                <select
                  value={bookingFilters.status}
                  onChange={(e) => setBookingFilters({ ...bookingFilters, status: e.target.value })}
                  className="w-full px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
                >
                  <option value="">All statuses</option>
                  <option value="pending">Pending confirmation</option>
                  <option value="confirmed">Confirmed</option>
                  <option value="checked_in">Checked in</option>
                  <option value="checked_out">Checked out</option>
                  <option value="cancelled">Canceled</option>
                </select>
              </div>
            </div>

            {}
            <div className="bg-white/90 backdrop-blur-xl rounded-xl sm:rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden">
              <div className="overflow-x-auto -mx-2 sm:mx-0 px-2 sm:px-0">
                <table className="w-full min-w-[640px] sm:min-w-full">
                  <thead>
                    <tr className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900">
                      <th className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Booking Number</th>
                      <th className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Customer</th>
                      <th className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Room</th>
                      <th className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Check-in/out</th>
                      <th className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Total Price</th>
                      <th className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Status</th>
                      <th className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 text-right text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-slate-100">
                    {bookings.map((booking) => (
                      <tr 
                        key={booking.id} 
                        className="hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/30 transition-all duration-200 group border-b border-slate-100"
                      >
                        <td className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 whitespace-nowrap">
                          <div className="text-sm font-bold text-gray-900 group-hover:text-blue-700 transition-colors font-mono">
                            {booking.booking_number}
                          </div>
                        </td>
                        <td className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 whitespace-nowrap">
                          <div className="text-xs sm:text-sm font-semibold text-gray-900">{booking.guest_info?.full_name || booking.user?.name}</div>
                          <div className="text-xs text-gray-500 mt-0.5 truncate max-w-[120px] sm:max-w-none">{booking.guest_info?.email || booking.user?.email}</div>
                        </td>
                        <td className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 whitespace-nowrap">
                          <div className="text-xs sm:text-sm font-medium text-gray-800">
                            <span className="text-blue-600 font-semibold">Room {booking.room?.room_number}</span>
                            <span className="text-gray-400 mx-1 sm:mx-2">•</span>
                            <span className="text-gray-600 hidden sm:inline">{booking.room?.room_type?.name}</span>
                          </div>
                        </td>
                        <td className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 whitespace-nowrap">
                          <div className="text-xs sm:text-sm font-medium text-gray-900">
                            {parseDateLocal(booking.check_in_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
                          </div>
                          <div className="text-xs text-gray-500 mt-0.5">
                            → {parseDateLocal(booking.check_out_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                          </div>
                        </td>
                        <td className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 whitespace-nowrap">
                          <div className="text-xs sm:text-sm font-bold text-gray-900 bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
                            {formatCurrency(booking.total_price)}
                          </div>
                        </td>
                        <td className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 whitespace-nowrap">
                          {getBookingStatusBadge(booking.status)}
                        </td>
                        <td className="px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4 md:py-5 whitespace-nowrap text-right">
                          <div className="flex items-center justify-end gap-1 sm:gap-2">
                            <button
                              onClick={() => {
                                setSelectedBooking(booking);
                                setShowBookingDetailModal(true);
                              }}
                              className="p-1.5 sm:p-2 rounded-lg text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200 shadow-sm hover:shadow-md border border-gray-200 hover:border-blue-300"
                              title="View details"
                            >
                              <Eye className="w-4 h-4 sm:w-5 sm:h-5" />
                            </button>
                            {booking.status === 'pending' && (
                              <>
                                <button
                                  onClick={() => handleUpdateBookingStatus(booking.id, 'confirmed')}
                                  disabled={updatingBookingId === booking.id || cancellingBookingId === booking.id}
                                  className="p-2 rounded-lg text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-sm hover:shadow-md border border-emerald-200 hover:border-emerald-300"
                                  title="Confirm"
                                >
                                  {updatingBookingId === booking.id ? (
                                    <Loader2 className="w-5 h-5 animate-spin" />
                                  ) : (
                                    <CheckCircle className="w-5 h-5" />
                                  )}
                                </button>
                                <button
                                  onClick={() => handleCancelBooking(booking.id)}
                                  disabled={updatingBookingId === booking.id || cancellingBookingId === booking.id}
                                  className="p-2 rounded-lg text-rose-600 hover:text-rose-700 hover:bg-rose-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-sm hover:shadow-md border border-rose-200 hover:border-rose-300"
                                  title="Cancel"
                                >
                                  {cancellingBookingId === booking.id ? (
                                    <Loader2 className="w-5 h-5 animate-spin" />
                                  ) : (
                                    <XCircle className="w-5 h-5" />
                                  )}
                                </button>
                              </>
                            )}
                            {booking.status === 'confirmed' && (
                              <button
                                onClick={() => handleUpdateBookingStatus(booking.id, 'checked_in')}
                                disabled={updatingBookingId === booking.id || cancellingBookingId === booking.id}
                                className="p-2 rounded-lg text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-sm hover:shadow-md border border-emerald-200 hover:border-emerald-300"
                                title="Check-in"
                              >
                                {updatingBookingId === booking.id ? (
                                  <Loader2 className="w-5 h-5 animate-spin" />
                                ) : (
                                  <CheckCircle className="w-5 h-5" />
                                )}
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <Pagination
                currentPage={bookingCurrentPage}
                totalPages={bookingTotalPages}
                onPageChange={setBookingCurrentPage}
                totalItems={bookingTotalItems}
                itemsPerPage={bookingItemsPerPage}
              />
            </div>

            {}
            {showBookingDetailModal && selectedBooking && (
              <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4">
                <div className="bg-white rounded-3xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden">
                  <div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-8 py-6 border-b border-slate-700">
                    <div className="flex justify-between items-center">
                      <div>
                        <h2 className="text-xl sm:text-2xl md:text-2xl font-bold text-amber-100 mb-1">Booking Details</h2>
                        <p className="text-amber-200/80 text-sm font-light">Comprehensive booking information</p>
                      </div>
                      <button 
                        onClick={() => setShowBookingDetailModal(false)} 
                        className="w-10 h-10 flex items-center justify-center rounded-xl text-amber-100 hover:text-white hover:bg-slate-700/50 transition-all duration-200 border border-slate-600 hover:border-amber-400"
                      >
                        ✕
                      </button>
                    </div>
                  </div>
                  
                  <div className="p-8 overflow-y-auto max-h-[calc(90vh-120px)]">
                    <div className="space-y-6">
                      <div className="grid grid-cols-2 gap-6">
                        <div className="bg-gradient-to-br from-slate-50 to-white p-5 rounded-xl border border-slate-200">
                          <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2 block">Booking Number</label>
                          <p className="text-xl font-bold text-slate-900 font-mono">{selectedBooking.booking_number}</p>
                        </div>
                        <div className="bg-gradient-to-br from-slate-50 to-white p-5 rounded-xl border border-slate-200">
                          <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2 block">Status</label>
                          <div className="mt-1">{getBookingStatusBadge(selectedBooking.status)}</div>
                        </div>
                      </div>

                      <div className="bg-gradient-to-br from-amber-50/50 to-yellow-50/50 p-6 rounded-xl border border-amber-100">
                        <label className="text-xs font-semibold text-slate-600 uppercase tracking-wider mb-4 block flex items-center gap-2">
                          <div className="w-1 h-4 bg-gradient-to-b from-amber-400 to-amber-600 rounded-full"></div>
                          Customer Information
                        </label>
                        <div className="space-y-2">
                          <p className="text-lg font-bold text-slate-900">{selectedBooking.guest_info?.full_name || selectedBooking.user?.name}</p>
                          <p className="text-slate-600">{selectedBooking.guest_info?.email || selectedBooking.user?.email}</p>
                          <p className="text-slate-600">{selectedBooking.guest_info?.phone || selectedBooking.user?.phone}</p>
                        </div>
                      </div>

                      <div className="bg-gradient-to-br from-blue-50/50 to-indigo-50/50 p-6 rounded-xl border border-blue-100">
                        <label className="text-xs font-semibold text-slate-600 uppercase tracking-wider mb-4 block flex items-center gap-2">
                          <div className="w-1 h-4 bg-gradient-to-b from-blue-400 to-blue-600 rounded-full"></div>
                          Room Information
                        </label>
                        <p className="text-lg font-semibold text-slate-900">
                          <span className="text-amber-600">Room {selectedBooking.room?.room_number}</span>
                          <span className="text-slate-400 mx-2">•</span>
                          <span className="text-slate-700">{selectedBooking.room?.room_type?.name}</span>
                        </p>
                      </div>

                      <div className="grid grid-cols-2 gap-6">
                        <div className="bg-gradient-to-br from-slate-50 to-white p-5 rounded-xl border border-slate-200">
                          <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2 block">Check-in Date</label>
                          <p className="text-base font-semibold text-slate-900">{parseDateLocal(selectedBooking.check_in_date).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}</p>
                        </div>
                        <div className="bg-gradient-to-br from-slate-50 to-white p-5 rounded-xl border border-slate-200">
                          <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2 block">Check-out Date</label>
                          <p className="text-base font-semibold text-slate-900">{parseDateLocal(selectedBooking.check_out_date).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}</p>
                        </div>
                      </div>

                      <div className="bg-gradient-to-br from-slate-50 to-white p-5 rounded-xl border border-slate-200">
                        <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2 block">Number of Guests</label>
                        <p className="text-lg font-semibold text-slate-900">{selectedBooking.guest_count} guest{selectedBooking.guest_count !== 1 ? 's' : ''}</p>
                      </div>

                      {}
                      <div className="bg-gradient-to-br from-indigo-50/50 to-purple-50/50 p-6 rounded-xl border border-indigo-100">
                        <label className="text-xs font-semibold text-slate-600 uppercase tracking-wider mb-4 block flex items-center gap-2">
                          <div className="w-1 h-4 bg-gradient-to-b from-indigo-400 to-indigo-600 rounded-full"></div>
                          Payment Information
                        </label>
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <p className="text-xs text-slate-500 mb-1">Payment Method</p>
                            <p className="text-base font-semibold text-slate-900">
                              {selectedBooking.payment_method === 'cash'
                                ? '💵 Pay at Hotel'
                                : selectedBooking.payment_method === 'stripe'
                                ? '💳 Stripe (Card)'
                                : selectedBooking.payment_method === 'paypal'
                                ? '💳 PayPal'
                                : selectedBooking.payment_method || 'N/A'}
                            </p>
                          </div>
                          <div>
                            <p className="text-xs text-slate-500 mb-1">Payment Status</p>
                            <p className={`text-base font-semibold ${
                              selectedBooking.payment_status === 'paid'
                                ? 'text-green-600'
                                : selectedBooking.payment_status === 'refunded'
                                ? 'text-orange-600'
                                : 'text-red-600'
                            }`}>
                              {selectedBooking.payment_status === 'paid'
                                ? '✅ Paid'
                                : selectedBooking.payment_status === 'refunded'
                                ? '💰 Refunded'
                                : '❌ Unpaid'}
                            </p>
                          </div>
                        </div>
                      </div>

                      {}
                      {selectedBooking.payments && selectedBooking.payments.length > 0 && (
                        <div className="bg-gradient-to-br from-teal-50/50 to-cyan-50/50 p-6 rounded-xl border border-teal-100">
                          <label className="text-xs font-semibold text-slate-600 uppercase tracking-wider mb-4 block flex items-center gap-2">
                            <div className="w-1 h-4 bg-gradient-to-b from-teal-400 to-teal-600 rounded-full"></div>
                            Payment History
                          </label>
                          <div className="space-y-3">
                            {selectedBooking.payments.map((payment: Payment, idx: number) => (
                              <div key={payment.id || idx} className="p-3 bg-white rounded-lg border border-teal-100">
                                <div className="flex justify-between items-start mb-2">
                                  <div>
                                    <p className="text-sm font-semibold text-slate-900">
                                      {formatCurrency(payment.amount || 0)}
                                    </p>
                                    <p className="text-xs text-slate-500 mt-1">
                                      {payment.payment_type === 'deposit' ? 'Deposit (20%)' : payment.payment_type === 'remaining' ? 'Remaining Payment' : 'Full Payment'}
                                      {' • '}
                                      {payment.payment_method === 'stripe' ? 'Stripe' : payment.payment_method === 'paypal' ? 'PayPal' : payment.payment_method || 'Cash'}
                                    </p>
                                  </div>
                                  <span className={`text-xs px-2 py-1 rounded-full font-medium ${
                                    payment.payment_status === 'completed' || payment.payment_status === 'paid'
                                      ? 'bg-green-100 text-green-700'
                                      : payment.payment_status === 'pending'
                                      ? 'bg-yellow-100 text-yellow-700'
                                      : 'bg-red-100 text-red-700'
                                  }`}>
                                    {payment.payment_status === 'completed' || payment.payment_status === 'paid' ? 'Paid' : payment.payment_status || 'Pending'}
                                  </span>
                                </div>
                                {payment.transaction_id && (
                                  <p className="text-xs text-slate-400 font-mono">ID: {payment.transaction_id}</p>
                                )}
                                {payment.payment_date && (
                                  <p className="text-xs text-slate-400 mt-1">
                                    {new Date(payment.payment_date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}
                                  </p>
                                )}
                              </div>
                            ))}
                          </div>
                        </div>
                      )}

                      {}
                      {(() => {
                        const completedPayments = selectedBooking.payments?.filter(
                          (p) => p.payment_status === 'completed'
                        ) || [];
                        const amountPaid = completedPayments.reduce(
                          (sum, p) => sum + (p.amount || 0),
                          0
                        );
                        const remainingDue = selectedBooking.total_price - amountPaid;
                        const hasPayments = selectedBooking.payments && selectedBooking.payments.length > 0;
                        
                        return (
                          <>
                            {}
                            <div className="bg-gradient-to-br from-green-50 via-emerald-50 to-green-50 p-6 rounded-xl border-2 border-green-200 shadow-lg mb-4">
                              <label className="text-xs font-semibold text-green-700 uppercase tracking-wider mb-2 block">Amount Paid</label>
                              <p className="text-xl sm:text-2xl md:text-2xl font-bold bg-gradient-to-r from-green-600 via-emerald-700 to-green-600 bg-clip-text text-transparent">
                                {formatCurrency(amountPaid)}
                              </p>
                              {hasPayments && completedPayments.length > 0 && (
                                <p className="text-xs text-green-600 mt-2">
                                  {completedPayments.length} payment{completedPayments.length !== 1 ? 's' : ''} completed
                                  {amountPaid > 0 && selectedBooking.total_price > 0 && (
                                    <span className="ml-2">
                                      ({((amountPaid / selectedBooking.total_price) * 100).toFixed(0)}% of total)
                                    </span>
                                  )}
                                </p>
                              )}
                              {amountPaid === 0 && !hasPayments && (
                                <p className="text-sm text-gray-500 mt-2">No payments made yet</p>
                              )}
                            </div>
                            
                            {}
                            {remainingDue > 0 && (
                              <div className="bg-gradient-to-br from-amber-50 via-yellow-50 to-amber-50 p-6 rounded-xl border-2 border-amber-200 shadow-lg mb-4">
                                <label className="text-xs font-semibold text-amber-700 uppercase tracking-wider mb-2 block">Remaining Due (To be paid)</label>
                                <p className="text-xl sm:text-2xl md:text-2xl font-bold text-amber-600">
                                  {formatCurrency(remainingDue)}
                                </p>
                                {selectedBooking.total_price > 0 && (
                                  <p className="text-xs text-amber-600 mt-2">
                                    ({((remainingDue / selectedBooking.total_price) * 100).toFixed(0)}% of total)
                                  </p>
                                )}
                              </div>
                            )}
                            
                            {}
                            <div className="bg-gradient-to-br from-slate-50 to-gray-50 p-6 rounded-xl border-2 border-slate-200 shadow-lg">
                              <label className="text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2 block">Total Booking Price</label>
                              {selectedBooking.original_price && selectedBooking.discount_amount && selectedBooking.discount_amount > 0 ? (
                                <>
                                  <div className="mb-2">
                                    <div className="flex justify-between items-center mb-1">
                                      <span className="text-sm text-slate-600">Subtotal:</span>
                                      <span className="text-lg font-semibold text-slate-700">{formatCurrency(selectedBooking.original_price)}</span>
                                    </div>
                                    <div className="flex justify-between items-center mb-2">
                                      <span className="text-sm text-green-600">
                                        Discount{selectedBooking.promotion_code ? ` (${selectedBooking.promotion_code})` : ''}:
                                      </span>
                                      <span className="text-lg font-semibold text-green-600">-{formatCurrency(selectedBooking.discount_amount)}</span>
                                    </div>
                                    <div className="border-t border-slate-300 pt-2 mt-2">
                                      <div className="flex justify-between items-center">
                                        <span className="text-sm font-semibold text-slate-700">Total:</span>
                                        <span className="text-lg sm:text-xl md:text-xl font-bold text-slate-700">{formatCurrency(selectedBooking.total_price)}</span>
                                      </div>
                                    </div>
                                  </div>
                                </>
                              ) : (
                                <p className="text-lg sm:text-xl md:text-xl font-bold text-slate-700">
                                  {formatCurrency(selectedBooking.total_price)}
                                </p>
                              )}
                              <p className="text-xs text-slate-500 mt-2">
                                This is the total amount for the booking
                              </p>
                            </div>
                          </>
                        );
                      })()}

                      {selectedBooking.notes && (
                        <div className="bg-gradient-to-br from-slate-50 to-white p-6 rounded-xl border border-slate-200">
                          <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3 block">Special Notes</label>
                          <p className="text-slate-700 leading-relaxed">{selectedBooking.notes}</p>
                        </div>
                      )}
                    </div>
                    
                    <div className="mt-8 pt-6 border-t border-slate-200 flex justify-end">
                      <button
                        onClick={() => setShowBookingDetailModal(false)}
                        className="px-8 py-3 bg-gradient-to-r from-slate-700 to-slate-800 text-white rounded-xl font-semibold hover:from-slate-800 hover:to-slate-900 transition-all duration-200 shadow-lg hover:shadow-xl border border-slate-600"
                      >
                        Close
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

        {}
      </div>

      {/* Create Booking Modal */}
      <CreateBookingModal
        isOpen={showCreateBookingModal}
        onClose={() => setShowCreateBookingModal(false)}
        onSuccess={() => {
          setShowCreateBookingModal(false);
          fetchBookings();
        }}
      />
    </div>
  );
};

export default ReceptionDashboardPage;

