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

/**
 * Mobile용 일정 검색 카드 컴포넌트
 * 스케줄 페이지의 검색 결과에서 사용
 * 날짜를 왼쪽에 표시하는 레이아웃
 */
const ScheduleSearchCard = memo(function ScheduleSearchCard({
  schedule,
  onClick,
  delay = 0,
  className = '',
}) {
  const scheduleDate = new Date(schedule.date);
  const categoryInfo = getCategoryInfo(schedule);
  const timeStr = getScheduleTime(schedule);
  const displayMembers = getDisplayMembers(schedule);
  const sourceName = schedule.source?.name;

  const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
  const isSunday = scheduleDate.getDay() === 0;
  const isSaturday = scheduleDate.getDay() === 6;

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay, type: 'spring', stiffness: 300, damping: 30 }}
      onClick={onClick}
      className={`cursor-pointer ${className}`}
    >
      {/* 카드 본체 */}
      <div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden active:bg-gray-50 transition-colors">
        <div className="flex">
          {/* 왼쪽 날짜 영역 */}
          <div className="flex-shrink-0 w-16 py-3 px-2 bg-gray-50 border-r border-gray-100 flex flex-col items-center justify-center">
            <span className="text-[10px] text-gray-400">
              {scheduleDate.getFullYear()}
            </span>
            <span className="text-lg font-bold text-gray-800">
              {scheduleDate.getMonth() + 1}.{scheduleDate.getDate()}
            </span>
            <span
              className={`text-[11px] font-medium ${
                isSunday
                  ? 'text-red-500'
                  : isSaturday
                    ? 'text-blue-500'
                    : 'text-gray-500'
              }`}
            >
              {dayNames[scheduleDate.getDay()]}요일
            </span>
          </div>

          {/* 오른쪽 콘텐츠 영역 */}
          <div className="flex-1 p-4 min-w-0">
            {/* 시간 및 카테고리 뱃지 */}
            <div className="flex items-center gap-1.5 mb-2 flex-wrap">
              {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 line-clamp-2">
              {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>
      </div>
    </motion.div>
  );
});

export default ScheduleSearchCard;
