SweetHome/app/components/property/BookingCalendar.js

'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from 'lucide-react';

export default function BookingCalendar({ property, onDateSelect }) {
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [selectedRange, setSelectedRange] = useState({ start: null, end: null });
  const [bookedDates, setBookedDates] = useState(property.bookings || []);

  const daysInMonth = new Date(
    currentMonth.getFullYear(),
    currentMonth.getMonth() + 1,
    0
  ).getDate();

  const firstDayOfMonth = new Date(
    currentMonth.getFullYear(),
    currentMonth.getMonth(),
    1
  ).getDay();

  const monthNames = [
    'يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو',
    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
  ];

  const isDateBooked = (date) => {
    const dateStr = date.toISOString().split('T')[0];
    return bookedDates.some(booking => {
      const start = new Date(booking.startDate);
      const end = new Date(booking.endDate);
      const current = new Date(date);
      return current >= start && current <= end;
    });
  };

  const isInSelectedRange = (date) => {
    if (!selectedRange.start || !selectedRange.end) return false;
    const dateStr = date.toISOString().split('T')[0];
    return dateStr >= selectedRange.start && dateStr <= selectedRange.end;
  };

  const handleDateClick = (date) => {
    if (isDateBooked(date)) return;

    const dateStr = date.toISOString().split('T')[0];
    
    if (!selectedRange.start || (selectedRange.start && selectedRange.end)) {
      setSelectedRange({ start: dateStr, end: null });
    } else {
      if (dateStr > selectedRange.start) {
        setSelectedRange({ ...selectedRange, end: dateStr });
        onDateSelect?.({ start: selectedRange.start, end: dateStr });
      } else {
        setSelectedRange({ start: dateStr, end: null });
      }
    }
  };

  const changeMonth = (direction) => {
    setCurrentMonth(new Date(
      currentMonth.getFullYear(),
      currentMonth.getMonth() + direction,
      1
    ));
  };

  const renderDays = () => {
    const days = [];
    const totalDays = daysInMonth + firstDayOfMonth;

    for (let i = 0; i < totalDays; i++) {
      if (i < firstDayOfMonth) {
        days.push(<div key={`empty-${i}`} className="p-2" />);
      } else {
        const dayNumber = i - firstDayOfMonth + 1;
        const date = new Date(
          currentMonth.getFullYear(),
          currentMonth.getMonth(),
          dayNumber
        );
        
        const isBooked = isDateBooked(date);
        const isSelected = isInSelectedRange(date);
        const isToday = date.toDateString() === new Date().toDateString();

        days.push(
          <motion.button
            key={dayNumber}
            whileHover={!isBooked ? { scale: 1.1 } : {}}
            onClick={() => handleDateClick(date)}
            disabled={isBooked}
            className={`
              p-2 rounded-lg text-center transition-all
              ${isBooked ? 'bg-gray-200 text-gray-400 cursor-not-allowed line-through' : 'hover:bg-amber-100 cursor-pointer'}
              ${isSelected ? 'bg-amber-500 text-white hover:bg-amber-600' : ''}
              ${isToday && !isSelected && !isBooked ? 'border-2 border-amber-500' : ''}
            `}
          >
            {dayNumber}
          </motion.button>
        );
      }
    }
    return days;
  };

  return (
    <div className="bg-white rounded-xl p-6 shadow-lg">
      <div className="flex items-center justify-between mb-6">
        <button
          onClick={() => changeMonth(-1)}
          className="p-2 hover:bg-gray-100 rounded-lg"
        >
          <ChevronRight className="w-5 h-5" />
        </button>
        
        <h3 className="text-lg font-bold flex items-center gap-2">
          <CalendarIcon className="w-5 h-5 text-amber-500" />
          {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
        </h3>
        
        <button
          onClick={() => changeMonth(1)}
          className="p-2 hover:bg-gray-100 rounded-lg"
        >
          <ChevronLeft className="w-5 h-5" />
        </button>
      </div>

      <div className="grid grid-cols-7 gap-1 mb-2 text-center text-sm font-semibold text-gray-600">
        <div>جمعة</div>
        <div>سبت</div>
        <div>أحد</div>
        <div>إثنين</div>
        <div>ثلاثاء</div>
        <div>أربعاء</div>
        <div>خميس</div>
      </div>
      <div className="grid grid-cols-7 gap-1">
        {renderDays()}
      </div>

      <div className="flex gap-4 mt-6 pt-4 border-t text-sm">
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 bg-amber-500 rounded" />
          <span>محدد</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 bg-gray-200 rounded line-through" />
          <span>محجوز</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 border-2 border-amber-500 rounded" />
          <span>اليوم</span>
        </div>
      </div>
    </div>
  );
}