tududi/frontend/components/Calendar/CalendarMonthView.tsx

import React from 'react';
import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isToday, startOfWeek, endOfWeek } from 'date-fns';
import { useTranslation } from 'react-i18next';

interface CalendarEvent {
  id: string;
  title: string;
  start: Date;
  end: Date;
  type: 'task' | 'event' | 'google';
  color?: string;
}

interface CalendarMonthViewProps {
  currentDate: Date;
  events: CalendarEvent[];
  onDateClick?: (date: Date) => void;
  onEventClick?: (event: CalendarEvent) => void;
}

const CalendarMonthView: React.FC<CalendarMonthViewProps> = ({ 
  currentDate, 
  events, 
  onDateClick, 
  onEventClick 
}) => {
  const { t } = useTranslation();

  const monthStart = startOfMonth(currentDate);
  const monthEnd = endOfMonth(currentDate);
  const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 }); // Start on Monday
  const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
  
  const days = eachDayOfInterval({
    start: calendarStart,
    end: calendarEnd
  });

  const weekDays = [
    t('weekdays.monday', 'Mon'),
    t('weekdays.tuesday', 'Tue'), 
    t('weekdays.wednesday', 'Wed'),
    t('weekdays.thursday', 'Thu'),
    t('weekdays.friday', 'Fri'),
    t('weekdays.saturday', 'Sat'),
    t('weekdays.sunday', 'Sun')
  ];

  const handleDateClick = (date: Date) => {
    if (onDateClick) {
      onDateClick(date);
    }
  };

  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {
    e.stopPropagation();
    if (onEventClick) {
      onEventClick(event);
    }
  };

  return (
    <div className="bg-white dark:bg-gray-900 rounded-lg shadow overflow-hidden">
      {/* Week days header */}
      <div className="grid grid-cols-7 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
        {weekDays.map(day => (
          <div key={day} className="p-3 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
            {day}
          </div>
        ))}
      </div>

      {/* Calendar grid */}
      <div className="grid grid-cols-7">
        {days.map(day => {
          const dayEvents = events.filter(event => 
            format(event.start, 'yyyy-MM-dd') === format(day, 'yyyy-MM-dd')
          );

          const isCurrentMonth = isSameMonth(day, currentDate);
          const isTodayDate = isToday(day);

          return (
            <div
              key={day.toString()}
              onClick={() => handleDateClick(day)}
              className={`min-h-32 p-2 border-r border-b border-gray-100 dark:border-gray-800 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 ${
                !isCurrentMonth 
                  ? 'bg-gray-50 dark:bg-gray-800' 
                  : 'bg-white dark:bg-gray-900'
              } ${isTodayDate ? 'bg-blue-50 dark:bg-blue-900/20 ring-2 ring-blue-300 dark:ring-blue-600' : ''}`}
            >
              <div className={`text-sm mb-2 ${
                !isCurrentMonth 
                  ? 'text-gray-400 dark:text-gray-600' 
                  : 'text-gray-900 dark:text-gray-100'
              } ${isTodayDate ? 'font-bold text-blue-600 dark:text-blue-400' : ''}`}>
                {isTodayDate && (
                  <span className="inline-flex items-center justify-center w-6 h-6 bg-blue-600 text-white text-xs font-bold rounded-full">
                    {format(day, 'd')}
                  </span>
                )}
                {!isTodayDate && format(day, 'd')}
              </div>
              
              {/* Events */}
              <div className="space-y-1">
                {dayEvents.slice(0, 3).map(event => (
                  <div
                    key={event.id}
                    onClick={(e) => handleEventClick(event, e)}
                    className={`text-xs p-1 rounded text-white truncate cursor-pointer hover:opacity-80 transition-opacity ${
                      event.type === 'task' ? 'border-l-2 border-l-white/50' : ''
                    }`}
                    style={{ backgroundColor: event.color || '#3b82f6' }}
                    title={`${event.type === 'task' ? '📋 ' : ''}${event.title}`}
                  >
                    {event.type === 'task' && '📋 '}{event.title}
                  </div>
                ))}
                {dayEvents.length > 3 && (
                  <div className="text-xs text-gray-500 dark:text-gray-400 px-1">
                    +{dayEvents.length - 3} more
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default CalendarMonthView;