/* global React */
const { useEffect: useWHGE } = React;

// Phase 3: 영상 숙제 셀 클릭 시 해당 영상으로 이동 (라우팅 연결)
function WeeklyHomeworkGrid({ homeworkData }) {
  useWHGE(() => { if (window.lucide) window.lucide.createIcons(); });

  const ICON = { video: '🎥', workbook: '📝', other: '📚' };

  const handleClick = (cell) => {
    if (cell.status === 'rest') return;
    if (window.showToast) {
      window.showToast(`${cell.day}요일 (${cell.date}) 숙제 상세는 Phase 3에서 구현됩니다`);
    }
  };

  const statusIcon = (done, count) => {
    if (count === 0) return null;
    if (done === count) return <span className="s-hw-status-icon" style={{ color: 'var(--teal-600)' }}>✓</span>;
    if (done > 0)      return <span className="s-hw-status-icon" style={{ color: 'var(--slate-400)' }}>○</span>;
    return                    <span className="s-hw-status-icon" style={{ color: 'var(--slate-300)' }}>-</span>;
  };

  return (
    <div className="s-homework-grid">
      {homeworkData.map((cell, i) => {
        const isToday = cell.status === 'today';
        const isRest  = cell.status === 'rest';
        return (
          <div
            key={i}
            className={`s-hw-cell ${isToday ? 'is-today' : ''} ${isRest ? 'is-rest' : ''}`}
            onClick={() => handleClick(cell)}
          >
            <div className="s-hw-day">{cell.day}</div>
            <div className="s-hw-date">{cell.date}</div>
            {cell.items.length > 0 ? (
              <div className="s-hw-items">
                {cell.items.map((it, j) => (
                  <div key={j} className="s-hw-item">
                    <span className="s-hw-icon">{ICON[it.type] || '📚'}</span>
                    <span className="s-hw-progress">{it.done}/{it.count}</span>
                    {statusIcon(it.done, it.count)}
                  </div>
                ))}
              </div>
            ) : (
              <div className="s-hw-empty">휴식</div>
            )}
          </div>
        );
      })}
    </div>
  );
}
window.WeeklyHomeworkGrid = WeeklyHomeworkGrid;