import { memo } from 'react';
import { Clock, Tag, Link2 } from 'lucide-react';
import { decodeHtmlEntities, getDisplayMembers, getCategoryInfo, getScheduleTime } from '@/utils';

/**
 * Mobile용 일정 카드 컴포넌트 (홈용)
 * 홈 페이지의 다가오는 일정 섹션에서 사용
 * 간결한 레이아웃
 */
const ScheduleCard = memo(function ScheduleCard({ schedule, onClick, className = '' }) {
  const scheduleDate = new Date(schedule.date);
  const today = new Date();
  const currentYear = today.getFullYear();
  const currentMonth = today.getMonth();

  const scheduleYear = scheduleDate.getFullYear();
  const scheduleMonth = scheduleDate.getMonth();
  const isCurrentYear = scheduleYear === currentYear;
  const isCurrentMonth = isCurrentYear && scheduleMonth === currentMonth;

  const categoryInfo = getCategoryInfo(schedule);
  const timeStr = getScheduleTime(schedule);
  const displayMembers = getDisplayMembers(schedule);
  const sourceName = schedule.source?.name;

  const dayNames = ['일', '월', '화', '수', '목', '금', '토'];

  return (
    <div
      onClick={onClick}
      className={`flex gap-4 bg-white p-4 rounded-xl shadow-sm border border-gray-100 overflow-hidden ${className}`}
    >
      {/* 날짜 영역 */}
      <div className="flex flex-col items-center justify-center min-w-[50px]">
        {!isCurrentYear && (
          <span className="text-[10px] text-gray-400 font-medium">
            {scheduleYear}.{scheduleMonth + 1}
          </span>
        )}
        {isCurrentYear && !isCurrentMonth && (
          <span className="text-[10px] text-gray-400 font-medium">
            {scheduleMonth + 1}월
          </span>
        )}
        <span className="text-2xl font-bold text-primary">
          {scheduleDate.getDate()}
        </span>
        <span className="text-xs text-gray-400 font-medium">
          {dayNames[scheduleDate.getDay()]}
        </span>
      </div>

      {/* 세로 구분선 */}
      <div className="w-px bg-gray-100" />

      {/* 내용 영역 */}
      <div className="flex-1 min-w-0">
        <p className="font-semibold text-sm text-gray-800 line-clamp-2 leading-snug">
          {decodeHtmlEntities(schedule.title)}
        </p>
        {/* 시간 + 카테고리 */}
        <div className="flex items-center gap-3 mt-2 text-xs text-gray-400">
          {timeStr && (
            <span className="flex items-center gap-1">
              <Clock size={12} />
              {timeStr}
            </span>
          )}
          {categoryInfo.name && (
            <span className="flex items-center gap-1">
              <Tag size={12} />
              {categoryInfo.name}
            </span>
          )}
        </div>
        {/* 소스 */}
        {sourceName && (
          <div className="flex items-center gap-1 mt-1.5 text-xs text-gray-400">
            <Link2 size={12} />
            {sourceName}
          </div>
        )}
        {/* 멤버 */}
        {displayMembers.length > 0 && (
          <div className="flex flex-wrap gap-1 mt-2">
            {displayMembers.map((name, i) => (
              <span
                key={i}
                className="px-2 py-0.5 bg-primary/10 text-primary text-[10px] rounded-full font-medium"
              >
                {name}
              </span>
            ))}
          </div>
        )}
      </div>
    </div>
  );
});

export default ScheduleCard;
