/* global React */
const { useMemo: useMemoC, useState: useStateC } = React;

function Calendar({ month, year, events, onMonthChange }) {
  const weeks = useMemoC(() => {
    const first = new Date(year, month, 1);
    const start = new Date(first);
    start.setDate(start.getDate() - start.getDay());
    const arr = [];
    for (let w = 0; w < 6; w++) {
      const row = [];
      for (let d = 0; d < 7; d++) {
        const day = new Date(start);
        day.setDate(start.getDate() + w * 7 + d);
        row.push(day);
      }
      arr.push(row);
    }
    // Drop 6th row if fully in next month
    if (arr[5].every(d => d.getMonth() !== month)) arr.pop();
    return arr;
  }, [month, year]);

  const today = new Date(2026, 3, 21);
  const [selected, setSelected] = useStateC(`${year}-${month + 1}-21`);

  const key = (d) => `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;

  return (
    <section className="card" style={{display:'flex', flexDirection:'column'}}>
      <div className="card-hd">
        <div className="cal-hd">
          <span className="cal-title num">{year}년 {month + 1}월</span>
          <div className="cal-nav">
            <button className="icon-btn" onClick={() => onMonthChange(-1)} aria-label="이전 달"><i data-lucide="chevron-left"></i></button>
            <button className="cal-today-btn" onClick={() => onMonthChange(0)}>오늘</button>
            <button className="icon-btn" onClick={() => onMonthChange(1)} aria-label="다음 달"><i data-lucide="chevron-right"></i></button>
          </div>
        </div>
        <div className="cal-legend">
          <span><span className="dot teal"></span>수업·행사</span>
          <span><span className="dot amber"></span>평가</span>
          <span><span className="dot violet"></span>내부</span>
          <button className="card-hd-more"><i data-lucide="plus" style={{width:14,height:14}}></i>일정 추가</button>
        </div>
      </div>

      <div className="cal-note">
        <i data-lucide="info"></i>
        <span>4월 21일 기준으로 등록된 공지사항만 표시됩니다. 전체 일정은 시간표에서 확인할 수 있습니다.</span>
      </div>

      <div className="cal">
        <div className="cal-wd">
          {['일', '월', '화', '수', '목', '금', '토'].map((w, i) => (
            <div key={i} className={`cal-wd-item ${i === 0 ? 'sun' : ''} ${i === 6 ? 'sat' : ''}`}>{w}</div>
          ))}
        </div>
        {weeks.map((row, wi) => (
          <div key={wi} className="cal-row">
            {row.map((d, di) => {
              const isToday = d.getDate() === today.getDate() && d.getMonth() === today.getMonth() && d.getFullYear() === today.getFullYear();
              const dim = d.getMonth() !== month;
              const k = key(d);
              const dayEvents = events[k] || [];
              const isSel = selected === k;
              return (
                <div
                  key={di}
                  className={`cal-cell ${dim ? 'dim' : ''} ${di === 0 ? 'sun' : ''} ${di === 6 ? 'sat' : ''}`}
                  onClick={() => setSelected(k)}
                  style={isSel && !dim ? { background: 'var(--teal-50)', boxShadow: 'inset 0 0 0 1px var(--teal-500)' } : null}
                >
                  <span className={`cal-num ${isToday ? 'is-today' : ''}`}>{d.getDate()}</span>
                  {dayEvents.slice(0, 3).map((ev, ei) => (
                    <div key={ei} className={`cal-ev tone-${ev.tone}`}>{ev.label}</div>
                  ))}
                  {dayEvents.length > 3 && (
                    <div className="cal-ev tone-teal" style={{background:'transparent', border:0, color:'var(--fg-secondary)', padding:'0 4px', fontSize:10.5}}>+{dayEvents.length - 3}개 더보기</div>
                  )}
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </section>
  );
}
window.Calendar = Calendar;