import React, { useState } from 'react';
import { useReservations } from './ReservationsProvider';
import { Reservation } from '@/types/types';
import ReservationDialog from './ReservationDialog';
import { DragProvider } from './DragContext';
import DayColumn from './DayColumn';
import { DropdownProvider } from './ReservationCard';

export default function ReservationsKanban() {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [selectedReservation, setSelectedReservation] = useState<
    Reservation | undefined
  >();
  const {
    reservations,
    updateReservation,
    deleteReservation,
    startDate,
    interval
  } = useReservations();
  const today = new Date(startDate);
  today.setHours(0, 0, 0, 0);

  const columns = Array.from({ length: interval }, (_, i) => {
    const date = new Date(today.getTime() + i * 24 * 60 * 60 * 1000);
    return {
      date,
      reservations: reservations
        .filter((r) => {
          const rDate = new Date(r.from_date);
          return (
            rDate.getDate() === date.getDate() &&
            rDate.getMonth() === date.getMonth() &&
            rDate.getFullYear() === date.getFullYear()
          );
        })
        .sort(
          (a, b) =>
            new Date(a.from_date).getTime() - new Date(b.from_date).getTime()
        )
    };
  });

  const handleReservationClick = (reservation: Reservation) => {
    setSelectedReservation(reservation);
    setIsDialogOpen(true);
  };

  return (
    <DragProvider>
      <DropdownProvider>
        <div className="w-full h-full overflow-x-auto">
          <div
            className={`grid gap-4 pl-1 pr-1 relative`}
            style={{
              gridTemplateColumns: `repeat(${interval}, minmax(0, 1fr))`
            }}
          >
            {columns.map(({ date, reservations }, index) => (
              <DayColumn
                key={date.toISOString()}
                date={date}
                reservations={reservations}
                showHours={
                  index === 0
                    ? 'left'
                    : index === columns.length - 1
                      ? 'right'
                      : undefined
                }
                onReservationClick={handleReservationClick}
              />
            ))}
          </div>
          <ReservationDialog
            isOpen={isDialogOpen}
            onClose={() => {
              setIsDialogOpen(false);
              setSelectedReservation(undefined);
            }}
            onSave={(updatedReservation) => {
              if (selectedReservation?.id) {
                updateReservation(selectedReservation.id, updatedReservation);
                setIsDialogOpen(false);
                setSelectedReservation(undefined);
              }
            }}
            onDelete={(id) => {
              deleteReservation(id);
              setIsDialogOpen(false);
              setSelectedReservation(undefined);
            }}
            reservation={selectedReservation}
          />
        </div>
      </DropdownProvider>
    </DragProvider>
  );
}