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

/**
 * Mobile용 일정 리스트 카드 컴포넌트 (타임라인용)
 * 스케줄 페이지에서 날짜별 일정 목록에 사용
 * 날짜가 이미 헤더에 표시되므로 날짜 없이 표시
 */
const ScheduleListCard = memo(function ScheduleListCard({
  schedule,
  onClick,
  delay = 0,
  className = '',
}) {
  const categoryInfo = getCategoryInfo(schedule);
  const timeStr = getScheduleTime(schedule);
  const displayMembers = getDisplayMembers(schedule);
  const sourceName = schedule.source?.name;

  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-gray-100 overflow-hidden active:bg-gray-50 transition-colors">
        <div className="p-4">
          {/* 시간 및 카테고리 뱃지 */}
          <div className="flex items-center gap-1.5 mb-2">
            {timeStr && (
              <div
                className="flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
                style={{ backgroundColor: categoryInfo.color }}
              >
                <Clock size={10} />
                {timeStr}
              </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 ScheduleListCard;
