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

/**
 * 날짜 미정(월만 확정) 일정 카드 (PC)
 * date_precision === 'month' 인 일정에 사용. 날짜 대신 "날짜 미정"으로 표시하고
 * 점선 테두리로 확정 일정과 구분한다.
 */
const UndatedScheduleCard = memo(function UndatedScheduleCard({ schedule, onClick, 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 (
    <div
      onClick={() => onClick?.(schedule)}
      className={`flex items-stretch bg-white rounded-2xl border-2 border-dashed border-gray-300 hover:border-gray-400 transition-colors overflow-hidden cursor-pointer ${className}`}
    >
      {/* 월 영역 (연한 카테고리 색) */}
      <div
        className="w-24 flex flex-col items-center justify-center py-6 leading-tight"
        style={{ backgroundColor: `${categoryInfo.color}1a`, color: categoryInfo.color }}
      >
        <span className="text-2xl font-bold">{month}월</span>
        <span className="text-xs font-semibold mt-1 opacity-90">중</span>
      </div>

      {/* 내용 */}
      <div className="flex-1 p-6 flex flex-col justify-center">
        <h3 className="font-bold text-lg mb-2">{decodeHtmlEntities(schedule.title)}</h3>
        <div className="flex flex-wrap gap-3 text-base text-gray-500">
          {categoryInfo.name && (
            <span className="flex items-center gap-1">
              <Tag size={16} className="opacity-60" />
              {categoryInfo.name}
            </span>
          )}
          {sourceName && (
            <span className="flex items-center gap-1">
              <Link2 size={16} className="opacity-60" />
              {sourceName}
            </span>
          )}
        </div>
        {displayMembers.length > 0 && (
          <div className="flex flex-wrap gap-1.5 mt-2">
            {displayMembers.map((name, i) => (
              <span
                key={i}
                className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full"
              >
                {name}
              </span>
            ))}
          </div>
        )}
      </div>
    </div>
  );
});

export default UndatedScheduleCard;
