fromis_9/frontend/src/components/pc/admin/bot/BotCard.jsx

/**
 * 봇 카드 컴포넌트
 */
import { memo } from 'react';
import { motion } from 'framer-motion';
import { Youtube, Play, Square, RefreshCw, Download } from 'lucide-react';

// X 아이콘 컴포넌트
export const XIcon = ({ size = 20, fill = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}>
    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
  </svg>
);

// Meilisearch 아이콘 컴포넌트
export const MeilisearchIcon = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 108.4 512 295.2">
    <defs>
      <linearGradient
        id="meili-a"
        x1="488.157"
        x2="-21.055"
        y1="469.917"
        y2="179.001"
        gradientTransform="matrix(1 0 0 -1 0 514)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#ff5caa" />
        <stop offset="1" stopColor="#ff4e62" />
      </linearGradient>
      <linearGradient
        id="meili-b"
        x1="522.305"
        x2="13.094"
        y1="410.144"
        y2="119.228"
        gradientTransform="matrix(1 0 0 -1 0 514)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#ff5caa" />
        <stop offset="1" stopColor="#ff4e62" />
      </linearGradient>
      <linearGradient
        id="meili-c"
        x1="556.456"
        x2="47.244"
        y1="350.368"
        y2="59.452"
        gradientTransform="matrix(1 0 0 -1 0 514)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#ff5caa" />
        <stop offset="1" stopColor="#ff4e62" />
      </linearGradient>
    </defs>
    <path
      d="m0 403.6 94.6-239.3c13.3-33.7 46.2-55.9 82.8-55.9h57l-94.6 239.3c-13.3 33.7-46.2 55.9-82.8 55.9z"
      fill="url(#meili-a)"
    />
    <path
      d="m138.8 403.6 94.6-239.3c13.3-33.7 46.2-55.9 82.8-55.9h57l-94.6 239.3c-13.3 33.7-46.2 55.9-82.8 55.9z"
      fill="url(#meili-b)"
    />
    <path
      d="m277.6 403.6 94.6-239.3c13.3-33.7 46.2-55.9 82.8-55.9h57l-94.6 239.3c-13.3 33.7-46.2 55.9-82.8 55.9z"
      fill="url(#meili-c)"
    />
  </svg>
);

/**
 * @param {Object} props
 * @param {Object} props.bot - 봇 데이터
 * @param {number} props.index - 인덱스 (애니메이션용)
 * @param {boolean} props.isInitialLoad - 첫 로드 여부
 * @param {string|null} props.syncing - 동기화 중인 봇 ID
 * @param {Object} props.statusInfo - 상태 정보 (text, color, bg, dot)
 * @param {Function} props.onSync - 동기화 핸들러
 * @param {Function} props.onToggle - 토글 핸들러
 * @param {Function} props.onAnimationComplete - 애니메이션 완료 핸들러
 * @param {Function} props.formatTime - 시간 포맷 함수
 * @param {Function} props.formatInterval - 간격 포맷 함수
 */
const BotCard = memo(function BotCard({
  bot,
  index,
  isInitialLoad,
  syncing,
  statusInfo,
  onSync,
  onToggle,
  onAnimationComplete,
  formatTime,
  formatInterval,
}) {
  return (
    <motion.div
      initial={isInitialLoad ? { opacity: 0, scale: 0.95 } : false}
      animate={{ opacity: 1, scale: 1 }}
      transition={isInitialLoad ? { delay: index * 0.05 } : { duration: 0.15 }}
      onAnimationComplete={onAnimationComplete}
      className="relative bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-md transition-all"
    >
      {/* 상단 헤더 */}
      <div className="flex items-center justify-between p-4 border-b border-gray-100">
        <div className="flex items-center gap-3">
          <div
            className={`w-10 h-10 rounded-lg flex items-center justify-center ${
              bot.type === 'x'
                ? 'bg-black'
                : bot.type === 'meilisearch'
                  ? 'bg-[#ddf1fd]'
                  : 'bg-red-50'
            }`}
          >
            {bot.type === 'x' ? (
              <XIcon size={20} fill="white" />
            ) : bot.type === 'meilisearch' ? (
              <MeilisearchIcon size={20} />
            ) : (
              <Youtube size={20} className="text-red-500" />
            )}
          </div>
          <div>
            <h3 className="font-bold text-gray-900">{bot.name}</h3>
            <p className="text-xs text-gray-400">
              {bot.last_check_at
                ? `${formatTime(bot.last_check_at)}에 업데이트됨`
                : '아직 업데이트 없음'}
            </p>
          </div>
        </div>
        <span
          className={`flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full ${statusInfo.bg} ${statusInfo.color}`}
        >
          <span
            className={`w-1.5 h-1.5 rounded-full ${statusInfo.dot} ${bot.status === 'running' ? 'animate-pulse' : ''}`}
          ></span>
          {statusInfo.text}
        </span>
      </div>

      {/* 통계 정보 */}
      <div className="grid grid-cols-3 divide-x divide-gray-100 bg-gray-50/50">
        <div className="p-3 text-center">
          <div className="text-lg font-bold text-gray-900">{bot.schedules_added || 0}</div>
          <div className="text-xs text-gray-400">총 추가</div>
        </div>
        <div className="p-3 text-center">
          <div
            className={`text-lg font-bold ${bot.last_added_count > 0 ? 'text-green-500' : 'text-gray-400'}`}
          >
            +{bot.last_added_count || 0}
          </div>
          <div className="text-xs text-gray-400">마지막</div>
        </div>
        <div className="p-3 text-center">
          <div className="text-lg font-bold text-gray-900">{formatInterval(bot.check_interval)}</div>
          <div className="text-xs text-gray-400">업데이트 간격</div>
        </div>
      </div>

      {/* 오류 메시지 */}
      {bot.status === 'error' && bot.error_message && (
        <div className="px-4 py-2 bg-red-50 text-red-600 text-xs border-t border-red-100">
          {bot.error_message}
        </div>
      )}

      {/* 액션 버튼 */}
      <div className="p-4 border-t border-gray-100">
        <div className="flex gap-2">
          <button
            onClick={() => onSync(bot.id)}
            disabled={syncing === bot.id}
            className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-500 text-white rounded-lg font-medium transition-colors hover:bg-blue-600 disabled:opacity-50"
          >
            {syncing === bot.id ? (
              <>
                <RefreshCw size={16} className="animate-spin" />
                <span>동기화 중...</span>
              </>
            ) : (
              <>
                <Download size={16} />
                <span>전체 동기화</span>
              </>
            )}
          </button>
          <button
            onClick={() => onToggle(bot.id, bot.status, bot.name)}
            className={`flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium transition-colors ${
              bot.status === 'running'
                ? 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                : 'bg-green-500 text-white hover:bg-green-600'
            }`}
          >
            {bot.status === 'running' ? (
              <>
                <Square size={16} />
                <span>정지</span>
              </>
            ) : (
              <>
                <Play size={16} />
                <span>시작</span>
              </>
            )}
          </button>
        </div>
      </div>
    </motion.div>
  );
});

export default BotCard;