SweetHomeWeb/app/owner/calendar/page.js

'use client';

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useTranslation } from 'react-i18next';
import {
  Calendar,
  ChevronLeft,
  ChevronRight,
  Home,
  Building,
  MapPin,
  Bed,
  Bath,
  Square,
  DollarSign,
  Eye,
  ArrowLeft,
  Loader2,
  Filter,
  Download,
  Printer,
  ChevronDown,
  X,
  CheckCircle,
  XCircle,
  Clock,
  Users,
  TrendingUp,
  CalendarDays,
  LayoutGrid,
  List,
  AlertCircle,
  XCircle as XCircleIcon,
  Calendar as CalendarIcon
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '../../services/AuthService';

const MonthlyCalendar = ({ properties, selectedPropertyId, onDateClick, onPropertySelect }) => {
  const { t } = useTranslation();
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState(null);
  const [viewType, setViewType] = useState('grid');

  const monthNames = [
    t('calendar.month1'), t('calendar.month2'), t('calendar.month3'), t('calendar.month4'), t('calendar.month5'), t('calendar.month6'),
    t('calendar.month7'), t('calendar.month8'), t('calendar.month9'), t('calendar.month10'), t('calendar.month11'), t('calendar.month12')
  ];

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

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

  const isDateBookedForProperty = (date, property) => {
    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 getDayStatus = (date) => {
    if (selectedPropertyId === 'all') {
      const totalProperties = properties.length;
      const bookedCount = properties.filter(p => isDateBookedForProperty(date, p)).length;
      
      if (bookedCount === 0) return { status: 'all_available', label: t('calendar.allAvailable'), color: 'bg-green-100 text-green-800' };
      if (bookedCount === totalProperties) return { status: 'all_booked', label: t('calendar.allBooked'), color: 'bg-red-100 text-red-800' };
      return { status: 'partial', label: t('calendar.bookedCount', { count: bookedCount, total: totalProperties }), color: 'bg-yellow-100 text-yellow-800' };
    } else {
      const property = properties.find(p => p.id === selectedPropertyId);
      if (!property) return { status: 'no_property', label: t('calendar.notAvailable'), color: 'bg-gray-100 text-gray-500' };
      
      const isBooked = isDateBookedForProperty(date, property);
      return {
        status: isBooked ? 'booked' : 'available',
        label: isBooked ? t('calendar.booked') : t('calendar.available'),
        color: isBooked ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
      };
    }
  };

  const handleDateClick = (date) => {
    setSelectedDate(date);
    onDateClick?.(date);
  };

  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 md:p-3" />);
      } else {
        const dayNumber = i - firstDayOfMonth + 1;
        const date = new Date(
          currentMonth.getFullYear(),
          currentMonth.getMonth(),
          dayNumber
        );
        
        const isToday = date.toDateString() === new Date().toDateString();
        const status = getDayStatus(date);
        const isSelected = selectedDate?.toDateString() === date.toDateString();

        days.push(
          <button
            key={dayNumber}
            onClick={() => handleDateClick(date)}
            className={`
              p-2 md:p-3 rounded-xl text-center transition-all relative group
              ${status.color}
              ${isToday ? 'ring-2 ring-amber-500 ring-offset-2' : ''}
              ${isSelected ? 'ring-2 ring-blue-500 ring-offset-2' : ''}
              hover:scale-105 hover:shadow-md
            `}
          >
            <div className="text-sm md:text-base font-medium">{dayNumber}</div>
            <div className="text-xs mt-1 hidden md:block">{status.label}</div>
            {status.status === 'partial' && (
              <div className="absolute -top-1 -right-1 w-2 h-2 bg-yellow-500 rounded-full animate-pulse" />
            )}
          </button>
        );
      }
    }
    return days;
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
      <div className="p-4 md:p-6 border-b border-gray-200">
        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="flex items-center gap-3">
            <button
              onClick={() => changeMonth(-1)}
              className="p-2 hover:bg-gray-100 rounded-xl transition-colors"
            >
              <ChevronRight className="w-5 h-5" />
            </button>
            <h2 className="text-xl md:text-2xl font-bold text-gray-900">
              {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
            </h2>
            <button
              onClick={() => changeMonth(1)}
              className="p-2 hover:bg-gray-100 rounded-xl transition-colors"
            >
              <ChevronLeft className="w-5 h-5" />
            </button>
          </div>
          
          <div className="flex gap-2">
            <button
              onClick={() => setCurrentMonth(new Date())}
              className="px-4 py-2 bg-amber-500 text-white rounded-xl text-sm hover:bg-amber-600 transition-colors"
            >
              {t('calendar.today')}
            </button>
            <div className="flex border border-gray-200 rounded-xl overflow-hidden">
              <button
                onClick={() => setViewType('grid')}
                className={`p-2 transition-colors ${viewType === 'grid' ? 'bg-amber-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-100'}`}
              >
                <LayoutGrid className="w-4 h-4" />
              </button>
              <button
                onClick={() => setViewType('list')}
                className={`p-2 transition-colors ${viewType === 'list' ? 'bg-amber-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-100'}`}
              >
                <List className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-7 gap-1 p-4 bg-gray-50 border-b border-gray-200">
        {[t('calendar.day1'), t('calendar.day2'), t('calendar.day3'), t('calendar.day4'), t('calendar.day5'), t('calendar.day6'), t('calendar.day7')].map((day, index) => (
          <div key={index} className="text-center text-sm font-medium text-gray-600 py-2">
            {day}
          </div>
        ))}
      </div>

      <div className="p-4">
        <div className="grid grid-cols-7 gap-1 md:gap-2">
          {renderDays()}
        </div>
      </div>

      <div className="p-4 border-t border-gray-200 bg-gray-50">
        <div className="flex flex-wrap gap-4 justify-center text-xs">
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-green-100 rounded" />
            <span className="text-gray-600">{t('calendar.available')}</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-red-100 rounded" />
            <span className="text-gray-600">{t('calendar.booked')}</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-yellow-100 rounded" />
            <span className="text-gray-600">{t('calendar.partiallyBooked')}</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 ring-2 ring-amber-500 rounded" />
            <span className="text-gray-600">{t('calendar.today')}</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 ring-2 ring-blue-500 rounded" />
            <span className="text-gray-600">{t('calendar.selected')}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const PropertyCalendarList = ({ properties, selectedDate, onPropertyClick }) => {
  const { t } = useTranslation();
  const formatCurrency = (amount) => {
    return amount?.toLocaleString() + ' ' + t('calendar.syp');
  };

  const isDateBooked = (property, date) => {
    if (!property?.bookings || !date) 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 getBookingForDate = (property, date) => {
    if (!property?.bookings || !date) return null;
    const dateStr = date.toISOString().split('T')[0];
    return property.bookings.find(booking => {
      const start = new Date(booking.startDate);
      const end = new Date(booking.endDate);
      const current = new Date(date);
      return current >= start && current <= end;
    });
  };

  if (!selectedDate) {
    return (
      <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-12 text-center">
        <CalendarDays className="w-16 h-16 text-gray-300 mx-auto mb-4" />
        <h3 className="text-lg font-bold text-gray-700 mb-2">{t('calendar.selectDate')}</h3>
        <p className="text-gray-500">{t('calendar.clickDayHint')}</p>
      </div>
    );
  }

  const formattedDate = selectedDate.toLocaleDateString('ar-SA', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
      <div className="p-4 md:p-6 border-b border-gray-200 bg-gradient-to-r from-amber-50 to-amber-100">
        <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
          <CalendarDays className="w-5 h-5 text-amber-500" />
          {t('calendar.statusForDate')} {formattedDate}
        </h3>
      </div>

      <div className="divide-y divide-gray-200">
        {properties.map((property) => {
          const isBooked = isDateBooked(property, selectedDate);
          const booking = getBookingForDate(property, selectedDate);
          
          return (
            <motion.div
              key={property.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              className={`p-4 md:p-6 hover:bg-gray-50 transition-colors cursor-pointer ${isBooked ? 'bg-red-50/30' : 'bg-green-50/30'}`}
              onClick={() => onPropertyClick(property)}
            >
              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <h4 className="font-bold text-gray-900 text-lg">{property.title}</h4>
                    <span className={`px-2 py-1 rounded-lg text-xs font-medium ${
                      isBooked ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
                    }`}>
                      {isBooked ? t('calendar.booked') : t('calendar.available')}
                    </span>
                  </div>
                  <div className="flex items-center gap-1 text-gray-500 text-sm mb-2">
                    <MapPin className="w-4 h-4" />
                    {property.location}
                  </div>
                  <div className="flex flex-wrap gap-3 text-sm text-gray-600">
                    <div className="flex items-center gap-1">
                      <Bed className="w-4 h-4" />
                      <span>{property.bedrooms} {t('calendar.rooms')}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <Bath className="w-4 h-4" />
                      <span>{property.bathrooms} {t('calendar.bathrooms')}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <Square className="w-4 h-4" />
                      <span>{property.area} {t('calendar.sqm')}</span>
                    </div>
                  </div>
                </div>

                <div className="text-right">
                  <div className="text-lg font-bold text-amber-600">{formatCurrency(property.price)}</div>
                  <div className="text-xs text-gray-500">{t('calendar.perDay')}</div>
                  {isBooked && booking && (
                    <div className="mt-2 text-xs text-gray-500">
                      <div>{t('calendar.tenant')}: {booking.tenantName || t('calendar.unknown')}</div>
                      <div>{t('calendar.from')} {booking.startDate} {t('calendar.to')} {booking.endDate}</div>
                    </div>
                  )}
                </div>
              </div>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
};

const PropertyDetailsModal = ({ property, isOpen, onClose }) => {
  const { t } = useTranslation();
  if (!isOpen || !property) return null;

  const formatCurrency = (amount) => {
    return amount?.toLocaleString() + ' ' + t('calendar.syp');
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.9, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        exit={{ scale: 0.9, y: 20 }}
        className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="sticky top-0 bg-gradient-to-r from-amber-500 to-amber-600 p-6 text-white">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-xl font-bold">{property.title}</h2>
              <p className="text-amber-100 text-sm mt-1">{property.location}</p>
            </div>
            <button onClick={onClose} className="p-1 hover:bg-white/20 rounded-full">
              <XCircleIcon className="w-6 h-6" />
            </button>
          </div>
        </div>

        <div className="p-6 space-y-6">
          {property.images && property.images.length > 0 && (
            <div>
              <h3 className="font-bold text-gray-900 mb-3">{t('calendar.propertyImages')}</h3>
              <div className="grid grid-cols-2 gap-3">
                {property.images.slice(0, 4).map((image, index) => (
                  <div key={index} className="relative h-32 rounded-lg overflow-hidden bg-gray-100">
                    <img src={image} alt={`${property.title} ${index + 1}`} className="w-full h-full object-cover" />
                  </div>
                ))}
              </div>
            </div>
          )}

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="bg-gray-50 p-3 rounded-xl text-center">
              <Bed className="w-5 h-5 text-amber-500 mx-auto mb-1" />
              <div className="text-sm font-bold">{property.bedrooms}</div>
              <div className="text-xs text-gray-500">{t('calendar.bedrooms')}</div>
            </div>
            <div className="bg-gray-50 p-3 rounded-xl text-center">
              <Bath className="w-5 h-5 text-amber-500 mx-auto mb-1" />
              <div className="text-sm font-bold">{property.bathrooms}</div>
              <div className="text-xs text-gray-500">{t('calendar.bathrooms')}</div>
            </div>
            <div className="bg-gray-50 p-3 rounded-xl text-center">
              <Square className="w-5 h-5 text-amber-500 mx-auto mb-1" />
              <div className="text-sm font-bold">{property.area}</div>
              <div className="text-xs text-gray-500">{t('calendar.sqm')}</div>
            </div>
            <div className="bg-gray-50 p-3 rounded-xl text-center">
              <DollarSign className="w-5 h-5 text-amber-500 mx-auto mb-1" />
              <div className="text-sm font-bold">{formatCurrency(property.price)}</div>
              <div className="text-xs text-gray-500">{t('calendar.perDay')}</div>
            </div>
          </div>

          {property.features && property.features.length > 0 && (
            <div>
              <h3 className="font-bold text-gray-900 mb-3">{t('calendar.features')}</h3>
              <div className="flex flex-wrap gap-2">
                {property.features.map((feature, index) => (
                  <span key={index} className="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">
                    {feature}
                  </span>
                ))}
              </div>
            </div>
          )}

          {property.bookings && property.bookings.length > 0 && (
            <div>
              <h3 className="font-bold text-gray-900 mb-3 flex items-center gap-2">
                <Clock className="w-4 h-4 text-amber-500" />
                {t('calendar.upcomingBookings')}
              </h3>
              <div className="space-y-2">
                {property.bookings.slice(0, 3).map((booking, index) => (
                  <div key={index} className="bg-gray-50 p-3 rounded-lg flex justify-between items-center">
                    <div>
                      <p className="font-medium text-gray-900">{booking.startDate} - {booking.endDate}</p>
                      <p className="text-xs text-gray-500">{t('calendar.tenant')}: {booking.tenantName || t('calendar.unknown')}</p>
                    </div>
                    <span className="text-sm font-bold text-amber-600">{formatCurrency(booking.totalAmount)}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        <div className="p-6 pt-0 flex gap-3">
          <Link
            href={`/owner/properties/edit?id=${property.id}`}
            className="flex-1 bg-amber-500 text-white py-3 rounded-xl text-center font-medium hover:bg-amber-600 transition-colors"
          >
            {t('calendar.editProperty')}
          </Link>
          <button
            onClick={() => window.location.href = `/owner/bookings?property=${property.id}`}
            className="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl text-center font-medium hover:bg-gray-200 transition-colors"
          >
            {t('calendar.viewBookings')}
          </button>
        </div>
      </motion.div>
    </motion.div>
  );
};

export default function OwnerCalendarPage() {
  const { t, i18n } = useTranslation();
  const router = useRouter();
  const [user, setUser] = useState(null);
  const [properties, setProperties] = useState([]);
  const [filteredProperties, setFilteredProperties] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedPropertyId, setSelectedPropertyId] = useState('all');
  const [selectedDate, setSelectedDate] = useState(null);
  const [selectedProperty, setSelectedProperty] = useState(null);
  const [showFilters, setShowFilters] = useState(false);

    useEffect(() => {
    const authUser = AuthService.getUser();
    if (authUser && AuthService.isOwner()) {
      setUser({
        name: authUser.name || authUser.email,
        email: authUser.email,
        role: 'owner',
      });
      loadCalendar();
    } else {
      router.push('/auth/choose-role');
    }
  }, [router]);



  const loadProperties = () => {
    const storedProperties = localStorage.getItem('ownerProperties');
    if (storedProperties) {
      const props = JSON.parse(storedProperties);
      setProperties(props);
      setFilteredProperties(props);
    } else {
      const mockProperties = [
        {
          id: 1,
          title: t('calendar.mockVillaTitle'),
          location: t('calendar.mockVillaLocation'),
          bedrooms: 5,
          bathrooms: 4,
          area: 450,
          price: 500000,
          features: [t('swimmingPool'), t('privateGarden'), t('parking'), t('propertyService.security247')],
          images: ['/villa1.jpg'],
          status: 'available',
          bookings: [
            { startDate: '2024-03-10', endDate: '2024-03-15', totalAmount: 2500000, tenantName: t('calendar.mockTenant1') },
            { startDate: '2024-03-20', endDate: '2024-03-25', totalAmount: 2500000, tenantName: t('calendar.mockTenant2') }
          ]
        },
        {
          id: 2,
          title: t('calendar.mockApartmentTitle'),
          location: t('calendar.mockApartmentLocation'),
          bedrooms: 3,
          bathrooms: 2,
          area: 180,
          price: 250000,
          features: [t('equippedKitchen'), t('balcony'), t('parking'), t('propertyService.elevator')],
          images: ['/apartment1.jpg'],
          status: 'available',
          bookings: [
            { startDate: '2024-03-05', endDate: '2024-03-08', totalAmount: 750000, tenantName: t('calendar.mockTenant3') }
          ]
        },
        {
          id: 3,
          title: t('calendar.mockHouseTitle'),
          location: t('calendar.mockHouseLocation'),
          bedrooms: 4,
          bathrooms: 3,
          area: 300,
          price: 350000,
          features: [t('largeGarden'), t('parking'), t('fireplace'), t('garage')],
          images: ['/house1.jpg'],
          status: 'booked',
          bookings: []
        }
      ];
      setProperties(mockProperties);
      setFilteredProperties(mockProperties);
      localStorage.setItem('ownerProperties', JSON.stringify(mockProperties));
    }
    setIsLoading(false);
  };

  const calendarStats = {
    totalProperties: properties.length,
    availableToday: properties.filter(p => {
      const today = new Date();
      const isBooked = p.bookings?.some(b => {
        const start = new Date(b.startDate);
        const end = new Date(b.endDate);
        return today >= start && today <= end;
      });
      return !isBooked;
    }).length,
    bookedToday: properties.filter(p => {
      const today = new Date();
      return p.bookings?.some(b => {
        const start = new Date(b.startDate);
        const end = new Date(b.endDate);
        return today >= start && today <= end;
      });
    }).length,
    upcomingBookings: properties.reduce((sum, p) => sum + (p.bookings?.length || 0), 0)
  };

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
          <p className="text-gray-600">{t('calendar.loading')}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8" dir={i18n.language === 'ar' ? 'rtl' : 'ltr'}>
      <Toaster position="top-center" reverseOrder={false} />
      
      <PropertyDetailsModal
        property={selectedProperty}
        isOpen={!!selectedProperty}
        onClose={() => setSelectedProperty(null)}
      />

      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"
        >
          <div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">{t('calendar.pageTitle')}</h1>
            <p className="text-gray-600">{t('calendar.welcomeMessage', { name: user?.name })}</p>
          </div>
          
          <div className="flex gap-3">
            <button
              onClick={() => setShowFilters(!showFilters)}
              className="px-4 py-2 bg-white border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-2"
            >
              <Filter className="w-5 h-5" />
              {t('calendar.filterProperties')}
              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
            </button>
            {/* <button className="px-4 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700 transition-colors flex items-center gap-2">
              <Printer className="w-5 h-5" />
              طباعة التقويم
            </button> */}
          </div>
        </motion.div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="bg-white rounded-xl shadow-sm p-4 text-center border border-gray-200"
          >
            <Building className="w-6 h-6 text-amber-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-gray-900">{calendarStats.totalProperties}</div>
            <div className="text-sm text-gray-600">{t('calendar.totalProperties')}</div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="bg-white rounded-xl shadow-sm p-4 text-center border border-gray-200"
          >
            <CheckCircle className="w-6 h-6 text-green-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-green-600">{calendarStats.availableToday}</div>
            <div className="text-sm text-gray-600">{t('calendar.availableToday')}</div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="bg-white rounded-xl shadow-sm p-4 text-center border border-gray-200"
          >
            <XCircle className="w-6 h-6 text-red-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-red-600">{calendarStats.bookedToday}</div>
            <div className="text-sm text-gray-600">{t('calendar.bookedToday')}</div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
            className="bg-white rounded-xl shadow-sm p-4 text-center border border-gray-200"
          >
            <CalendarDays className="w-6 h-6 text-blue-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-blue-600">{calendarStats.upcomingBookings}</div>
            <div className="text-sm text-gray-600">{t('calendar.upcomingBookings')}</div>
          </motion.div>
        </div>

        <AnimatePresence>
          {showFilters && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              className="mb-6 overflow-hidden"
            >
              <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-4">
                <div className="flex flex-wrap gap-3 items-center">
                  <label className="text-sm font-medium text-gray-700">{t('calendar.selectProperty')}</label>
                  <select
                    value={selectedPropertyId}
                    onChange={(e) => setSelectedPropertyId(e.target.value)}
                    className="px-4 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
                  >
                    <option value="all">{t('calendar.allProperties')}</option>
                    {properties.map((property) => (
                      <option key={property.id} value={property.id}>{property.title}</option>
                    ))}
                  </select>
                  <button
                    onClick={() => setSelectedPropertyId('all')}
                    className="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
                  >
                    {t('calendar.reset')}
                  </button>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        <div className="mb-8">
          <MonthlyCalendar
            properties={filteredProperties}
            selectedPropertyId={selectedPropertyId}
            onDateClick={setSelectedDate}
            onPropertySelect={setSelectedProperty}
          />
        </div>

        <div>
          <PropertyCalendarList
            properties={filteredProperties}
            selectedDate={selectedDate}
            onPropertyClick={setSelectedProperty}
          />
        </div>

        {selectedDate && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="mt-6 text-center text-sm text-gray-500"
          >
            <AlertCircle className="w-4 h-4 inline ml-1" />
            {t('calendar.clickPropertyHint')}
          </motion.div>
        )}
      </div>
    </div>
  );
}