import { memo } from 'react';
import { motion } from 'framer-motion';
import { Link2 } from 'lucide-react';
import { decodeHtmlEntities, getDisplayMembers, getCategoryInfo } from '@/utils';

/**
 * Mobile용 날짜 미정(월만 확정) 일정 카드
 * date_precision === 'month' 인 일정에 사용. 시간 대신 "N월 중"을 표시하고
 * 점선 테두리로 확정 일정과 구분한다.
 */
const UndatedScheduleListCard = memo(function UndatedScheduleListCard({
  schedule,
  onClick,
  delay = 0,
  className = '',
}) {
  const categoryInfo = getCategoryInfo(schedule);
  const displayMembers = getDisplayMembers(schedule);
  const sourceName = schedule.source?.name;

  // date는 해당 월 1일(YYYY-MM-01)로 저장됨 → 월만 추출
  const month = new Date(schedule.date).getMonth() + 1;

  return (
    <motion.div
      initial={{ opacity: 0, x: -10 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay, type: 'spring', stiffness: 300, damping: 30 }}
      onClick={() => onClick?.(schedule)}
      className={`cursor-pointer ${className}`}
    >
      {/* 카드 본체 (점선 테두리) */}
      <div className="relative bg-white rounded-xl border-[1.5px] border-dashed border-gray-300 overflow-hidden active:bg-gray-50 transition-colors">
        <div className="p-4">
          {/* "N월 중" 및 카테고리 뱃지 */}
          <div className="flex items-center gap-1.5 mb-2">
            <div
              className="px-2 py-0.5 rounded-full text-white text-xs font-medium"
              style={{ backgroundColor: categoryInfo.color }}
            >
              {month}월 중
            </div>
            <span
              className="px-2 py-0.5 rounded-full text-xs font-medium"
              style={{
                backgroundColor: `${categoryInfo.color}15`,
                color: categoryInfo.color,
              }}
            >
              {categoryInfo.name}
            </span>
          </div>

          {/* 제목 */}
          <h3 className="font-bold text-[15px] text-gray-800 leading-snug">
            {decodeHtmlEntities(schedule.title)}
          </h3>

          {/* 출처 */}
          {sourceName && (
            <div className="flex items-center gap-1 mt-1.5 text-xs text-gray-400">
              <Link2 size={11} />
              <span>{sourceName}</span>
            </div>
          )}

          {/* 멤버 */}
          {displayMembers.length > 0 && (
            <div className="flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-gray-100">
              {displayMembers.map((name, i) => (
                <span
                  key={i}
                  className="px-2.5 py-1 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-lg font-semibold shadow-sm"
                >
                  {name}
                </span>
              ))}
            </div>
          )}
        </div>
      </div>
    </motion.div>
  );
});

export default UndatedScheduleListCard;
