/**
 * 봇 카드 컴포넌트
 */
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, y: 10 } : false}
      animate={{ opacity: 1, y: 0 }}
      transition={isInitialLoad ? { delay: index * 0.05, duration: 0.2 } : { duration: 0.15 }}
      onAnimationComplete={onAnimationComplete}
      className="group relative bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden hover:shadow-md transition-all"
    >
      {/* 상단: 이름 + 상태 */}
      <div className="p-4">
        <div className="flex items-start justify-between mb-3">
          <div className="flex-1 min-w-0">
            <h3 className="font-semibold text-gray-900 truncate">{bot.name}</h3>
            <p className="text-xs text-gray-400 mt-0.5">
              {bot.last_check_at ? formatTime(bot.last_check_at) : '대기 중'}
            </p>
          </div>
          <span
            className={`flex-shrink-0 flex items-center gap-1.5 px-2 py-0.5 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' : ''}`}
            />
            {statusInfo.text}
          </span>
        </div>

        {/* 통계 */}
        <div className="flex items-center gap-3 mt-3 p-2.5 bg-gray-50 rounded-lg text-sm">
          <div className="flex-1 text-center">
            <div className="font-semibold text-gray-900">{bot.schedules_added || 0}</div>
            <div className="text-xs text-gray-400">총 추가</div>
          </div>
          <div className="w-px h-8 bg-gray-200" />
          <div className="flex-1 text-center">
            <div className={`font-semibold ${bot.last_added_count > 0 ? 'text-green-600' : 'text-gray-400'}`}>
              +{bot.last_added_count || 0}
            </div>
            <div className="text-xs text-gray-400">최근</div>
          </div>
          <div className="w-px h-8 bg-gray-200" />
          <div className="flex-1 text-center">
            <div className="font-semibold text-gray-900">{formatInterval(bot.check_interval)}</div>
            <div className="text-xs text-gray-400">간격</div>
          </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="flex border-t border-gray-100">
        <button
          onClick={() => onSync(bot.id)}
          disabled={syncing === bot.id}
          className="flex-1 flex items-center justify-center gap-1.5 px-4 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-50 transition-colors disabled:opacity-50 border-r border-gray-100"
        >
          {syncing === bot.id ? (
            <>
              <RefreshCw size={14} className="animate-spin" />
              <span>동기화 중</span>
            </>
          ) : (
            <>
              <Download size={14} />
              <span>전체 동기화</span>
            </>
          )}
        </button>
        <button
          onClick={() => onToggle(bot.id, bot.status, bot.name)}
          className={`flex items-center justify-center gap-1.5 px-4 py-2.5 text-sm font-medium transition-colors ${
            bot.status === 'running'
              ? 'text-gray-600 hover:bg-gray-50'
              : 'text-green-600 hover:bg-green-50'
          }`}
        >
          {bot.status === 'running' ? (
            <>
              <Square size={14} />
              <span>정지</span>
            </>
          ) : (
            <>
              <Play size={14} />
              <span>시작</span>
            </>
          )}
        </button>
      </div>
    </motion.div>
  );
});

export default BotCard;