"use client";

import { useState, useCallback } from "react";
import { BookingCalendar, SelectedSlot } from "@/components/bookings/booking-calendar";
import { BookingDialog } from "@/components/bookings/booking-dialog";

export default function BookingsPage() {
  const [selectedSlot, setSelectedSlot] = useState<SelectedSlot | null>(null);
  const [refreshKey, setRefreshKey] = useState(0);

  const handleSlotClick = useCallback((slot: SelectedSlot) => {
    setSelectedSlot(slot);
  }, []);

  const handleCloseDialog = useCallback(() => {
    setSelectedSlot(null);
  }, []);

  const handleBookingCreated = useCallback(() => {
    // Refresh the calendar after booking creation
    setRefreshKey((prev) => prev + 1);
  }, []);

  const handleBookingCancelled = useCallback(() => {
    // Refresh the calendar after booking cancellation
    setRefreshKey((prev) => prev + 1);
  }, []);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-primary-800">Reservas</h1>
        <p className="mt-2 text-primary-600">
          Gestiona las reservas de canchas. Selecciona un horario para crear o ver una reserva.
        </p>
      </div>

      <BookingCalendar key={refreshKey} onSlotClick={handleSlotClick} />

      {selectedSlot && (
        <BookingDialog
          courtId={selectedSlot.courtId}
          date={selectedSlot.date}
          slot={selectedSlot}
          onClose={handleCloseDialog}
          onBookingCreated={handleBookingCreated}
          onBookingCancelled={handleBookingCancelled}
        />
      )}
    </div>
  );
}