basil/packages/web/src/components/meal-planner/CalendarView.tsx

import { MealPlan, MealType } from '@basil/shared';
import MealCard from './MealCard';
import '../../styles/CalendarView.css';

interface CalendarViewProps {
  currentDate: Date;
  mealPlans: MealPlan[];
  onAddMeal: (date: Date, mealType: MealType) => void;
  onRemoveMeal: (mealId: string) => void;
}

function CalendarView({ currentDate, mealPlans, onAddMeal, onRemoveMeal }: CalendarViewProps) {
  const getDaysInMonth = (): Date[] => {
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();

    // First day of month
    const firstDay = new Date(year, month, 1);
    const firstDayOfWeek = firstDay.getDay();

    // Last day of month
    const lastDay = new Date(year, month + 1, 0);
    const daysInMonth = lastDay.getDate();

    // Days array with padding
    const days: Date[] = [];

    // Add previous month's days to fill first week
    for (let i = 0; i < firstDayOfWeek; i++) {
      const date = new Date(year, month, -firstDayOfWeek + i + 1);
      days.push(date);
    }

    // Add current month's days
    for (let i = 1; i <= daysInMonth; i++) {
      days.push(new Date(year, month, i));
    }

    // Add next month's days to fill last week
    const remainingDays = 7 - (days.length % 7);
    if (remainingDays < 7) {
      for (let i = 1; i <= remainingDays; i++) {
        days.push(new Date(year, month + 1, i));
      }
    }

    return days;
  };

  const getMealPlanForDate = (date: Date): MealPlan | undefined => {
    return mealPlans.find(mp => {
      const mpDate = new Date(mp.date);
      return mpDate.toDateString() === date.toDateString();
    });
  };

  const isToday = (date: Date): boolean => {
    const today = new Date();
    return date.toDateString() === today.toDateString();
  };

  const isCurrentMonth = (date: Date): boolean => {
    return date.getMonth() === currentDate.getMonth();
  };

  const days = getDaysInMonth();
  const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

  return (
    <div className="calendar-view">
      <div className="calendar-header">
        {weekDays.map(day => (
          <div key={day} className="calendar-header-cell">
            {day}
          </div>
        ))}
      </div>

      <div className="calendar-grid">
        {days.map((date, index) => {
          const mealPlan = getMealPlanForDate(date);
          const today = isToday(date);
          const currentMonth = isCurrentMonth(date);

          return (
            <div
              key={index}
              className={`calendar-cell ${!currentMonth ? 'other-month' : ''} ${today ? 'today' : ''}`}
            >
              <div className="date-header">
                <span className="date-number">{date.getDate()}</span>
              </div>

              <div className="meals-container">
                {mealPlan ? (
                  <>
                    {Object.values(MealType).map(mealType => {
                      const mealsOfType = mealPlan.meals.filter(
                        m => m.mealType === mealType
                      );

                      if (mealsOfType.length === 0) return null;

                      return (
                        <div key={mealType} className="meal-type-group">
                          <div className="meal-type-label">{mealType}</div>
                          {mealsOfType.map(meal => (
                            <MealCard
                              key={meal.id}
                              meal={meal}
                              compact={true}
                              onRemove={() => onRemoveMeal(meal.id)}
                            />
                          ))}
                        </div>
                      );
                    })}
                  </>
                ) : null}

                <button
                  className="btn-add-meal"
                  onClick={() => onAddMeal(date, MealType.DINNER)}
                  title="Add meal"
                >
                  + Add Meal
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default CalendarView;