/* ============================================
   CALENDAR VIEW (month grid)
   ============================================ */

const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];

const CalendarView = ({ tasks, onOpenTask }) => {
  const [cursor, setCursor] = React.useState(() => new Date(TODAY.getFullYear(), TODAY.getMonth(), 1));

  const year = cursor.getFullYear();
  const month = cursor.getMonth();
  const firstDay = new Date(year, month, 1).getDay(); // 0 = Sun
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const prevMonthDays = new Date(year, month, 0).getDate();

  // Build 42 cells (6 weeks)
  const cells = [];
  for (let i = 0; i < firstDay; i++) {
    cells.push({ day: prevMonthDays - firstDay + 1 + i, muted: true, date: new Date(year, month - 1, prevMonthDays - firstDay + 1 + i) });
  }
  for (let d = 1; d <= daysInMonth; d++) {
    cells.push({ day: d, muted: false, date: new Date(year, month, d) });
  }
  while (cells.length < 42) {
    const last = cells[cells.length - 1].date;
    const next = new Date(last); next.setDate(last.getDate() + 1);
    cells.push({ day: next.getDate(), muted: true, date: next });
  }

  // Group tasks by date (using dueDate)
  const tasksByDate = React.useMemo(() => {
    const map = {};
    tasks.forEach(t => {
      if (!t.dueDate) return;
      const key = t.dueDate.split('T')[0];
      if (!map[key]) map[key] = [];
      map[key].push(t);
    });
    return map;
  }, [tasks]);

  const isoOf = (d) => d.toISOString().split('T')[0];
  const todayIso = isoOf(TODAY);

  return (
    <div className="calendar">
      <div className="cal-head">
        <div className="cal-month">{MONTHS[month]} {year}</div>
        <IconBtn icon="chevronLeft" onClick={() => setCursor(new Date(year, month - 1, 1))} />
        <IconBtn icon="chevronRight" onClick={() => setCursor(new Date(year, month + 1, 1))} />
        <Btn kind="secondary" onClick={() => setCursor(new Date(TODAY.getFullYear(), TODAY.getMonth(), 1))}>
          Today
        </Btn>
        <span style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--text-muted)' }}>
          Showing tasks by <b style={{ color: 'var(--text)' }}>due date</b>
        </span>
      </div>
      <div className="cal-grid">
        <div className="cal-weekdays">
          {WEEKDAYS.map(w => <div key={w} className="cal-weekday">{w}</div>)}
        </div>
        <div className="cal-days">
          {cells.map((c, i) => {
            const iso = isoOf(c.date);
            const dayTasks = tasksByDate[iso] || [];
            const visible = dayTasks.slice(0, 3);
            const more = dayTasks.length - visible.length;
            return (
              <div
                key={i}
                className={`cal-day${c.muted ? ' muted' : ''}${iso === todayIso ? ' today' : ''}`}
              >
                <div className="cal-day-num">{c.day}</div>
                {visible.map(t => {
                  const proj = getProject(t.project);
                  const color = proj?.color || '#94A3B8';
                  return (
                    <div
                      key={t.id}
                      className="cal-event"
                      style={{
                        background: `${color}1A`,
                        borderLeftColor: color,
                        color: 'var(--text)',
                      }}
                      onClick={() => onOpenTask(t.id)}
                      title={t.name}
                    >
                      {t.name}
                    </div>
                  );
                })}
                {more > 0 && (
                  <div className="cal-event-more">+ {more} more</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { CalendarView });