/* eslint-disable */
// CalendarWidget — mini month-view + event dots, used on Dashboard
// WeekCalendar — full weekly grid, used in Meal Planner "This Week" tab

const CalendarWidget = () => {
  const realToday = new Date();
  const [viewYear, setViewYear] = React.useState(realToday.getFullYear());
  const [viewMonth, setViewMonth] = React.useState(realToday.getMonth());
  const [selected, setSelected] = React.useState(realToday.getDate());

  const MONTH_NAMES = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
  const startDay = new Date(viewYear, viewMonth, 1).getDay();
  const isCurrentMonth = viewYear === realToday.getFullYear() && viewMonth === realToday.getMonth();
  const todayDate = isCurrentMonth ? realToday.getDate() : null;

  const goBack = () => {
    if (viewMonth === 0) { setViewYear(viewYear - 1); setViewMonth(11); }
    else setViewMonth(viewMonth - 1);
    setSelected(null);
  };
  const goForward = () => {
    if (viewMonth === 11) { setViewYear(viewYear + 1); setViewMonth(0); }
    else setViewMonth(viewMonth + 1);
    setSelected(null);
  };

  const MONTH_EVENTS = React.useMemo(() => {
    const events = {};
    const addEvent = (day, label, color) => {
      if (!events[day]) events[day] = [];
      events[day].push({ label, color });
    };
    const tasks = Storage.getArray('familyhub_kanban', 'tasks');
    tasks.forEach(t => {
      if (t.dueDate) {
        const parts = t.dueDate.split("-");
        if (parts.length === 3) {
          const y = parseInt(parts[0]), m = parseInt(parts[1]) - 1, day = parseInt(parts[2]);
          if (y === viewYear && m === viewMonth) addEvent(day, "📋 " + t.title, "bg-blue-400");
        }
      }
      if (t.recurrence?.pattern && t.dueDate) {
        const recurDays = getRecurringDates(t, viewYear, viewMonth);
        recurDays.forEach(day => {
          addEvent(day, "🔁 " + t.title, "bg-purple-400");
        });
      }
    });
    return events;
  }, [viewYear, viewMonth]);

  const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  const cells = Array(startDay).fill(null).concat(
    Array.from({ length: daysInMonth }, (_, i) => i + 1)
  );

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transition-shadow duration-200">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-base font-bold text-gray-900 dark:text-white">{MONTH_NAMES[viewMonth]} {viewYear}</h3>
        <div className="flex gap-1">
          <button onClick={goBack} className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 text-sm cursor-pointer">‹</button>
          <button onClick={goForward} className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 text-sm cursor-pointer">›</button>
        </div>
      </div>

      <div className="grid grid-cols-7 mb-1">
        {weekdays.map((d) => (
          <div key={d} className="text-center text-xs font-semibold text-gray-400 dark:text-gray-500 py-1">{d}</div>
        ))}
      </div>

      <div className="grid grid-cols-7 gap-y-0.5">
        {cells.map((day, i) => {
          if (!day) return <div key={"blank-" + i}></div>;
          const isToday = day === todayDate;
          const isSelected = day === selected;
          const hasEvents = !!MONTH_EVENTS[day];
          return (
            <button
              key={day}
              onClick={() => setSelected(day)}
              className={
                "relative flex flex-col items-center justify-center rounded-lg py-1 text-sm transition-colors " +
                (isSelected
                  ? "bg-blue-600 text-white font-semibold"
                  : isToday
                  ? "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-semibold"
                  : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700")
              }
            >
              {day}
              {hasEvents && (
                <span className={
                  "block w-1 h-1 rounded-full mt-0.5 " +
                  (isSelected ? "bg-white" : MONTH_EVENTS[day][0].color)
                }></span>
              )}
            </button>
          );
        })}
      </div>

      {selected && MONTH_EVENTS[selected] && (
        <div className="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700 space-y-1">
          {MONTH_EVENTS[selected].map((ev, i) => (
            <div key={i} className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
              <span className={"block w-2 h-2 rounded-full shrink-0 " + ev.color}></span>
              {ev.label}
            </div>
          ))}
        </div>
      )}
      {selected && !MONTH_EVENTS[selected] && (
        <div className="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700 text-xs text-gray-400 dark:text-gray-500">
          No events on {MONTH_NAMES[viewMonth]} {selected}
        </div>
      )}
    </div>
  );
};

// ── Weekly calendar for Meal Planner ────────────────────────────────────────
const MEAL_SLOTS = ["Breakfast", "Lunch", "Dinner"];

const WeekCalendar = ({ plan, onAddMeal, onDeleteMeal }) => {
  const now = new Date();
  const todayDate = now.getDate();
  const dayOfWeek = now.getDay();
  const monday = new Date(now);
  monday.setDate(todayDate - ((dayOfWeek + 6) % 7));

  const weekDays = Array.from({ length: 7 }, (_, i) => {
    const d = new Date(monday);
    d.setDate(monday.getDate() + i);
    return { label: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"][i], date: d.getDate(), fullDate: d.toISOString().split('T')[0] };
  });

  return (
    <div className="overflow-x-auto">
      <div className="min-w-[600px]">
        <div className="grid grid-cols-8 mb-1 gap-1">
          <div className="text-xs text-gray-400 dark:text-gray-500 font-semibold px-2 py-1"></div>
          {weekDays.map((d) => (
            <div key={d.fullDate} className={"text-center rounded-lg py-1 " + (d.date === todayDate ? "bg-blue-100 dark:bg-blue-900" : "")}>
              <div className={"text-xs font-semibold " + (d.date === todayDate ? "text-blue-700 dark:text-blue-300" : "text-gray-500 dark:text-gray-400")}>{d.label}</div>
              <div className={"text-base font-bold " + (d.date === todayDate ? "text-blue-700 dark:text-blue-300" : "text-gray-900 dark:text-white")}>{d.date}</div>
            </div>
          ))}
        </div>
        {MEAL_SLOTS.map((slot) => (
          <div key={slot} className="grid grid-cols-8 gap-1 mb-1">
            <div className="flex items-center px-2 py-2">
              <span className="text-xs font-semibold text-gray-500 dark:text-gray-400">{slot}</span>
            </div>
            {weekDays.map((d) => {
              const meal = (plan[d.fullDate] || {})[slot.toLowerCase()];
              return (
                <div key={d.fullDate} onClick={() => meal ? onDeleteMeal(d.fullDate, slot.toLowerCase()) : onAddMeal(d.fullDate, slot.toLowerCase())}
                  className={"rounded-lg min-h-[48px] p-2 text-xs flex items-center justify-center text-center transition-colors cursor-pointer " +
                    (meal
                      ? "bg-blue-50 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 hover:bg-red-50 dark:hover:bg-red-900/20"
                      : "bg-gray-50 dark:bg-gray-800 border border-dashed border-gray-200 dark:border-gray-700 text-gray-400 dark:text-gray-600 hover:border-blue-300 dark:hover:border-blue-700")
                  }
                >
                  {meal || <span>+</span>}
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { CalendarWidget, WeekCalendar });