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

/**
 * PC용 일정 카드 컴포넌트
 * 홈, 스케줄 페이지에서 공통으로 사용
 */
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?.(schedule)}
      className={`flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer ${className}`}
    >
      {/* 날짜 영역 */}
      <div
        className="w-24 flex flex-col items-center justify-center text-white py-6"
        style={{ backgroundColor: categoryInfo.color }}
      >
        {!isCurrentYear && (
          <span className="text-xs font-medium opacity-60">
            {scheduleYear}.{scheduleMonth + 1}
          </span>
        )}
        {isCurrentYear && !isCurrentMonth && (
          <span className="text-xs font-medium opacity-60">
            {scheduleMonth + 1}월
          </span>
        )}
        <span className="text-3xl font-bold">{scheduleDate.getDate()}</span>
        <span className="text-sm font-medium opacity-80">
          {dayNames[scheduleDate.getDay()]}
        </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">
          {timeStr && (
            <span className="flex items-center gap-1">
              <Clock size={16} className="opacity-60" />
              {timeStr}
            </span>
          )}
          {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 ScheduleCard;
