/**
 * Advanced Bookings Management Page
 */

import React from 'react';
import { useBookings } from '@/hooks/useBookings';
import { BookingFilters } from '@/components/bookings/BookingFilters';
import { BookingsTable } from '@/components/bookings/BookingsTable';
import { BulkActions } from '@/components/bookings/BulkActions';

export const BookingsManagement: React.FC = () => {
  const {
    bookings,
    total,
    loading,
    error,
    filters,
    selectedBookings,
    updateFilters,
    resetFilters,
    toggleBookingSelection,
    toggleAllBookings,
    clearSelection,
    exportBookings,
  } = useBookings({ page: 1, pageSize: 50 });

  const handleRowClick = (booking: any) => {
    // Navigate to booking details
    window.location.href = `/bookings/${booking.id}`;
  };

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Bookings Management</h1>
          <p className="mt-2 text-sm text-gray-600">
            Manage and filter your bookings with advanced search and bulk actions
          </p>
        </div>

        {/* Filters */}
        <BookingFilters filters={filters} onFiltersChange={updateFilters} onReset={resetFilters} />

        {/* Bulk Actions */}
        <BulkActions
          selectedCount={selectedBookings.size}
          onExport={exportBookings}
          onClearSelection={clearSelection}
        />

        {/* Results Summary */}
        <div className="mb-4 flex items-center justify-between">
          <div className="text-sm text-gray-600">
            Showing {bookings.length} of {total} bookings
          </div>
          {loading && <div className="text-sm text-blue-600">Loading...</div>}
        </div>

        {/* Error State */}
        {error && (
          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
            <p className="text-sm text-red-800">{error}</p>
          </div>
        )}

        {/* Table */}
        {!loading && bookings.length === 0 ? (
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
            <svg
              className="mx-auto h-12 w-12 text-gray-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
              />
            </svg>
            <h3 className="mt-2 text-sm font-medium text-gray-900">No bookings found</h3>
            <p className="mt-1 text-sm text-gray-500">
              Try adjusting your filters or create a new booking
            </p>
          </div>
        ) : (
          <BookingsTable
            bookings={bookings}
            selectedBookings={selectedBookings}
            onToggleSelection={toggleBookingSelection}
            onToggleAll={toggleAllBookings}
            onRowClick={handleRowClick}
          />
        )}

        {/* Pagination */}
        {total > (filters.pageSize || 50) && (
          <div className="mt-6 flex items-center justify-between">
            <button
              onClick={() => updateFilters({ page: (filters.page || 1) - 1 })}
              disabled={!filters.page || filters.page <= 1}
              className="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Previous
            </button>
            <span className="text-sm text-gray-600">
              Page {filters.page || 1} of {Math.ceil(total / (filters.pageSize || 50))}
            </span>
            <button
              onClick={() => updateFilters({ page: (filters.page || 1) + 1 })}
              disabled={(filters.page || 1) >= Math.ceil(total / (filters.pageSize || 50))}
              className="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Next
            </button>
          </div>
        )}
      </div>
    </div>
  );
};
