import React, { useEffect, useState, useRef } from 'react';
import { Search, Eye, XCircle, CheckCircle, Loader2, FileText, Plus } from 'lucide-react';
import bookingService, { Booking, Payment } from '../../features/bookings/services/bookingService';
import invoiceService from '../../features/payments/services/invoiceService';
import { toast } from 'react-toastify';
import Loading from '../../shared/components/Loading';
import Pagination from '../../shared/components/Pagination';
import { useFormatCurrency } from '../../features/payments/hooks/useFormatCurrency';
import { parseDateLocal } from '../../shared/utils/format';
import { useNavigate } from 'react-router-dom';
import CreateBookingModal from '../../features/hotel_services/components/CreateBookingModal';
import { logger } from '../../shared/utils/logger';
import { validateBookingId } from '../../shared/utils/routeValidation';

const BookingManagementPage: React.FC = () => {
  const { formatCurrency } = useFormatCurrency();
  const navigate = useNavigate();
  const [bookings, setBookings] = useState<Booking[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedBooking, setSelectedBooking] = useState<Booking | null>(null);
  const [showDetailModal, setShowDetailModal] = useState(false);
  const [updatingBookingId, setUpdatingBookingId] = useState<number | null>(null);
  const [cancellingBookingId, setCancellingBookingId] = useState<number | null>(null);
  const [creatingInvoice, setCreatingInvoice] = useState(false);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [filters, setFilters] = useState({
    search: '',
    status: '',
  });
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalItems, setTotalItems] = useState(0);
  const itemsPerPage = 5;
  const abortControllerRef = useRef<AbortController | null>(null);

  useEffect(() => {
    setCurrentPage(1);
  }, [filters]);

  useEffect(() => {
    // Cancel previous request if exists
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    // Create new abort controller
    abortControllerRef.current = new AbortController();

    fetchBookings();

    // Cleanup: abort request on unmount
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filters, currentPage]);

  const fetchBookings = async () => {
    try {
      setLoading(true);
      const response = await bookingService.getAllBookings({
        ...filters,
        page: currentPage,
        limit: itemsPerPage,
      });
      setBookings(response.data.bookings);
      if (response.data.pagination) {
        setTotalPages(response.data.pagination.totalPages);
        setTotalItems(response.data.pagination.total);
      }
    } catch (error: unknown) {
      const isAbortError = (e: unknown): boolean => {
        if (typeof e === 'object' && e !== null) {
          const err = e as { name?: string; code?: string };
          return err.name === 'AbortError' || err.code === 'ERR_CANCELED';
        }
        return false;
      };
      if (isAbortError(error)) {
        return;
      }
      logger.error('Error fetching bookings', error);
      toast.error(getUserFriendlyError(error) || 'Unable to load bookings list');
    } finally {
      setLoading(false);
    }
  };

  const handleUpdateStatus = 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 handleCreateInvoice = async (bookingId: number) => {
    try {
      // Validate bookingId before proceeding
      const validatedId = validateBookingId(bookingId);
      if (!validatedId) {
        toast.error('Invalid booking ID');
        return;
      }
      
      setCreatingInvoice(true);
      
      const invoiceData = {
        booking_id: bookingId,
      };
      
      const response = await invoiceService.createInvoice(invoiceData);
      
      if (response.status === 'success' && response.data?.invoice) {
        // Extract and validate invoice ID - handle both number and string types
        let invoiceId = response.data.invoice.id;
        
        // Convert to number if it's a string
        if (typeof invoiceId === 'string') {
          invoiceId = parseInt(invoiceId, 10);
        }
        
        // Validate invoice ID before navigation
        if (invoiceId && !isNaN(invoiceId) && invoiceId > 0 && typeof invoiceId === 'number') {
          toast.success('Invoice created successfully!');
          setShowDetailModal(false);
          // Small delay to ensure invoice is fully committed to database
          setTimeout(() => {
            navigate(`/staff/invoices/${invoiceId}`);
          }, 100);
        } else {
          logger.error('Invalid invoice ID received from server', { 
            invoiceId, 
            type: typeof invoiceId, 
            response: response.data 
          });
          throw new Error(`Invalid invoice ID received from server: ${invoiceId}`);
        }
      } else {
        logger.error('Failed to create invoice - invalid response', { response });
        throw new Error(response.message || 'Failed to create invoice - invalid response from server');
      }
    } catch (error: unknown) {
      const errorMessage = getUserFriendlyError(error) || getUserFriendlyError(error) || getUserFriendlyError(error) || 'Unable to create invoice';
      toast.error(errorMessage);
      logger.error('Invoice creation error', error);
    } finally {
      setCreatingInvoice(false);
    }
  };

  const getStatusBadge = (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>
    );
  };

  if (loading) {
    return <Loading />;
  }

  return (
    <div className="space-y-8 bg-gradient-to-br from-slate-50 via-white to-slate-50 min-h-screen -m-6 p-8">
      {/* Header with Create Button */}
      <div className="animate-fade-in">
        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6">
          <div className="flex-1">
            <div className="flex items-center gap-3 mb-2">
              <div className="h-1 w-16 bg-gradient-to-r from-amber-400 to-amber-600 rounded-full"></div>
              <h1 className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 bg-clip-text text-transparent tracking-tight">
                Booking Management
              </h1>
            </div>
            <p className="text-slate-600 mt-3 text-base sm:text-lg font-light">Manage and track all hotel bookings with precision</p>
          </div>
          <button
            onClick={() => setShowCreateModal(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 className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 animate-fade-in" style={{ animationDelay: '0.1s' }}>
        <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-slate-400 w-5 h-5 group-focus-within:text-amber-500 transition-colors" />
            <input
              type="text"
              placeholder="Search by booking number, guest name..."
              value={filters.search}
              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
              className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 placeholder-slate-400 font-medium shadow-sm hover:shadow-md"
            />
          </div>
          <select
            value={filters.status}
            onChange={(e) => setFilters({ ...filters, status: e.target.value })}
            className="w-full px-4 py-3.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-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/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 overflow-hidden animate-fade-in" style={{ animationDelay: '0.2s' }}>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900">
                <th className="px-8 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-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Customer</th>
                <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Room</th>
                <th className="px-8 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-8 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-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Status</th>
                <th className="px-8 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, index) => (
                <tr 
                  key={booking.id} 
                  className="hover:bg-gradient-to-r hover:from-amber-50/30 hover:to-yellow-50/30 transition-all duration-200 group border-b border-slate-100"
                  style={{ animationDelay: `${index * 0.05}s` }}
                >
                  <td className="px-8 py-5 whitespace-nowrap">
                    <div className="text-sm font-bold text-slate-900 group-hover:text-amber-700 transition-colors font-mono">
                      {booking.booking_number}
                    </div>
                  </td>
                  <td className="px-8 py-5 whitespace-nowrap">
                    <div className="text-sm font-semibold text-slate-900">{booking.guest_info?.full_name || booking.user?.name}</div>
                    <div className="text-xs text-slate-500 mt-0.5">{booking.guest_info?.email || booking.user?.email}</div>
                  </td>
                  <td className="px-8 py-5 whitespace-nowrap">
                    <div className="text-sm font-medium text-slate-800">
                      <span className="text-amber-600 font-semibold">Room {booking.room?.room_number}</span>
                      <span className="text-slate-400 mx-2">•</span>
                      <span className="text-slate-600">{booking.room?.room_type?.name}</span>
                    </div>
                  </td>
                  <td className="px-8 py-5 whitespace-nowrap">
                    <div className="text-sm font-medium text-slate-900">
                      {parseDateLocal(booking.check_in_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
                    </div>
                    <div className="text-xs text-slate-500 mt-0.5">
                      → {parseDateLocal(booking.check_out_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                    </div>
                  </td>
                  <td className="px-8 py-5 whitespace-nowrap">
                    {(() => {
                      const completedPayments = booking.payments?.filter(
                        (p) => p.payment_status === 'completed'
                      ) || [];
                      const amountPaid = completedPayments.reduce(
                        (sum, p) => sum + (p.amount || 0),
                        0
                      );
                      const remainingDue = booking.total_price - amountPaid;
                      const hasPayments = completedPayments.length > 0;
                      
                      return (
                        <div>
                          <div className="text-sm font-bold text-slate-900 bg-gradient-to-r from-amber-600 to-amber-700 bg-clip-text text-transparent">
                            {formatCurrency(booking.total_price)}
                          </div>
                          {hasPayments && (
                            <div className="text-xs mt-1">
                              <div className="text-green-600 font-medium">
                                Paid: {formatCurrency(amountPaid)}
                              </div>
                              {remainingDue > 0 && (
                                <div className="text-amber-600 font-medium">
                                  Due: {formatCurrency(remainingDue)}
                                </div>
                              )}
                            </div>
                          )}
                        </div>
                      );
                    })()}
                  </td>
                  <td className="px-8 py-5 whitespace-nowrap">
                    {getStatusBadge(booking.status)}
                  </td>
                  <td className="px-8 py-5 whitespace-nowrap text-right">
                    <div className="flex items-center justify-end gap-2">
                      <button
                        onClick={() => {
                          setSelectedBooking(booking);
                          setShowDetailModal(true);
                        }}
                        className="p-2 rounded-lg text-slate-600 hover:text-amber-600 hover:bg-amber-50 transition-all duration-200 shadow-sm hover:shadow-md border border-slate-200 hover:border-amber-300"
                        title="View details"
                      >
                        <Eye className="w-5 h-5" />
                      </button>
                      {booking.status === 'pending' && (
                        <>
                          <button
                            onClick={() => handleUpdateStatus(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={() => handleUpdateStatus(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={currentPage}
          totalPages={totalPages}
          onPageChange={setCurrentPage}
          totalItems={totalItems}
          itemsPerPage={itemsPerPage}
        />
      </div>

      {}
      {showDetailModal && selectedBooking && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4 animate-fade-in">
          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden animate-scale-in border border-slate-200">
            {}
            <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-3xl 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={() => setShowDetailModal(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">{getStatusBadge(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 && 'service_usages' in selectedBooking && Array.isArray((selectedBooking as Booking & { service_usages?: Array<{ id?: number; service_name?: string; name?: string; quantity?: number; price?: number; total?: number }> }).service_usages) && (selectedBooking as Booking & { service_usages: Array<{ id?: number; service_name?: string; name?: string; quantity?: number; price?: number; total?: number }> }).service_usages.length > 0 && (
                  <div className="bg-gradient-to-br from-purple-50/50 to-pink-50/50 p-6 rounded-xl border border-purple-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-purple-400 to-purple-600 rounded-full"></div>
                      Additional Services
                    </label>
                    <div className="space-y-2">
                      {((selectedBooking as Booking & { service_usages: Array<{ id?: number; service_name?: string; name?: string; quantity?: number; price?: number; total?: number }> }).service_usages).map((service, idx: number) => (
                        <div key={service.id || idx} className="flex justify-between items-center py-2 border-b border-purple-100 last:border-0">
                          <div>
                            <p className="text-sm font-medium text-slate-900">{service.service_name || service.name || 'Service'}</p>
                            <p className="text-xs text-slate-500">
                              {formatCurrency(service.unit_price || service.price || 0)} × {service.quantity || 1}
                            </p>
                          </div>
                          <p className="text-sm font-semibold text-slate-900">
                            {formatCurrency(service.total_price || (service.unit_price || service.price || 0) * (service.quantity || 1))}
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {}
                {(() => {
                  const completedPayments = selectedBooking.payments?.filter(
                    (p) => p.payment_status === 'completed'
                  ) || [];
                  const allPayments = selectedBooking.payments || [];
                  const amountPaid = completedPayments.reduce(
                    (sum, p) => sum + (p.amount || 0),
                    0
                  );
                  const remainingDue = selectedBooking.total_price - amountPaid;
                  const hasPayments = allPayments.length > 0;
                  
                  return (
                    <>
                      {hasPayments && (
                        <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">
                            {allPayments.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>
                      )}
                      {}
                      <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-3xl 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-3xl 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>
                        <p className="text-2xl 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>
                    </>
                  );
                })()}

                {}
                <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-4 block flex items-center gap-2">
                    <div className="w-1 h-4 bg-gradient-to-b from-slate-400 to-slate-600 rounded-full"></div>
                    Booking Metadata
                  </label>
                  <div className="grid grid-cols-2 gap-4">
                    {selectedBooking.createdAt && (
                      <div>
                        <p className="text-xs text-slate-500 mb-1">Created At</p>
                        <p className="text-sm font-medium text-slate-900">
                          {new Date(selectedBooking.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
                        </p>
                      </div>
                    )}
                    {selectedBooking.updatedAt && (
                      <div>
                        <p className="text-xs text-slate-500 mb-1">Last Updated</p>
                        <p className="text-sm font-medium text-slate-900">
                          {new Date(selectedBooking.updatedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
                        </p>
                      </div>
                    )}
                    {selectedBooking.requires_deposit !== undefined && (
                      <div>
                        <p className="text-xs text-slate-500 mb-1">Deposit Required</p>
                        <p className="text-sm font-medium text-slate-900">
                          {selectedBooking.requires_deposit ? 'Yes (20%)' : 'No'}
                        </p>
                      </div>
                    )}
                    {selectedBooking.deposit_paid !== undefined && (
                      <div>
                        <p className="text-xs text-slate-500 mb-1">Deposit Paid</p>
                        <p className={`text-sm font-medium ${selectedBooking.deposit_paid ? 'text-green-600' : 'text-amber-600'}`}>
                          {selectedBooking.deposit_paid ? '✅ Yes' : '❌ No'}
                        </p>
                      </div>
                    )}
                  </div>
                </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-between items-center">
                <button
                  onClick={() => handleCreateInvoice(selectedBooking.id)}
                  disabled={creatingInvoice}
                  className="flex items-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 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-lg hover:shadow-xl"
                >
                  {creatingInvoice ? (
                    <>
                      <Loader2 className="w-5 h-5 animate-spin" />
                      Creating Invoice...
                    </>
                  ) : (
                    <>
                      <FileText className="w-5 h-5" />
                      Create Invoice
                    </>
                  )}
                </button>
                <button
                  onClick={() => setShowDetailModal(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>
      )}

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

export default BookingManagementPage;
