/* global React */
// Phase 3: 선생님이 어드민에서 수업일지 작성 시 학생 홈에 자동 노출
// Phase 4: 선생님별 메시지 히스토리, 학생별 개인 메시지 vs 반 전체 공지 구분
// 표기 규칙:
//   - isDefault === true (대표 멘트, 날짜 무의미): "박성호 선생님" 만 표시
//   - isDefault !== true (실제 작성된 메시지): "박성호 선생님 · 04.22"
function TeacherMessageCard({ teacherName, message, publishedAt, teacherAvatar, isDefault }) {
  // 입력 형식 지원: "YYYY-MM-DD" 또는 "YYYY-MM-DDTHH:mm:ss" (시간은 무시)
  const formatDate = (iso) => {
    try {
      if (!iso) return '';
      const datePart = String(iso).split('T')[0];
      const parts = datePart.split('-').map(Number);
      if (parts.length < 3 || !parts[0] || !parts[1] || !parts[2]) return '';
      const mm = String(parts[1]).padStart(2, '0');
      const dd = String(parts[2]).padStart(2, '0');
      return `${mm}.${dd}`;
    } catch (_) {
      return '';
    }
  };

  const handleClick = () => {
    if (window.showToast) window.showToast('선생님 메시지 전체 보기는 Phase 3에서 구현됩니다');
  };

  const dateLabel = formatDate(publishedAt);
  const showDate = !isDefault && dateLabel;

  return (
    <div className="s-tmsg" onClick={handleClick}>
      <div className="s-tmsg-avatar" aria-hidden="true">
        {teacherAvatar ? (
          <img src={teacherAvatar} alt="" />
        ) : (
          <i data-lucide="user-round"></i>
        )}
      </div>
      <div className="s-tmsg-body">
        <div className="s-tmsg-label">선생님 메시지</div>
        <div className="s-tmsg-content">{message}</div>
      </div>
      <div className="s-tmsg-meta">
        {teacherName}{showDate ? ` · ${dateLabel}` : ''}
      </div>
    </div>
  );
}
window.TeacherMessageCard = TeacherMessageCard;