'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 }) {
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [selectedRange, setSelectedRange] = useState({ start: null, end: null });

  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) => {
    if (!property.bookings) return false;
    const dateStr = date.toISOString().split('T')[0];
    return property.bookings.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 handleDateClick = (date) => {
    if (isDateBooked(date)) return;
  };

  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);

        days.push(
          <button
            key={dayNumber}
            onClick={() => handleDateClick(date)}
            disabled={isBooked}
            className={`
              p-2 rounded-lg text-center text-sm transition-all
              ${isBooked ? 'bg-gray-200 text-gray-400 cursor-not-allowed line-through' : 'hover:bg-amber-100 cursor-pointer'}
            `}
          >
            {dayNumber}
          </button>
        );
      }
    }
    return days;
  };

  return (
    <div className="bg-white rounded-xl p-4 border border-gray-200">
      <div className="flex items-center justify-between mb-4">
        <button
          onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1))}
          className="p-1 hover:bg-gray-100 rounded"
        >
          <ChevronRight className="w-4 h-4" />
        </button>
        
        <h4 className="font-medium text-sm flex items-center gap-1">
          <CalendarIcon className="w-4 h-4 text-amber-500" />
          {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
        </h4>
        
        <button
          onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1))}
          className="p-1 hover:bg-gray-100 rounded"
        >
          <ChevronLeft className="w-4 h-4" />
        </button>
      </div>
      <div className="grid grid-cols-7 gap-1 mb-2 text-center text-xs font-medium text-gray-500">
        <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-3 mt-3 pt-3 border-t text-xs">
        <div className="flex items-center gap-1">
          <div className="w-3 h-3 bg-gray-200 rounded" />
          <span className="text-gray-500">محجوز</span>
        </div>
        <div className="flex items-center gap-1">
          <div className="w-3 h-3 bg-white border border-gray-300 rounded" />
          <span className="text-gray-500">متاح</span>
        </div>
      </div>
    </div>
  );
}