import { useState, useEffect, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { motion, AnimatePresence } from 'framer-motion';
import { Home, ChevronRight, Bot, CheckCircle, XCircle, RefreshCw, Plus, Search, Database, Youtube, Twitter } from 'lucide-react';
import { Toast, Tooltip, AnimatedNumber } from '@/components/common';
import { AdminLayout, BotCard } from '@/components/pc/admin';
import { useAdminAuth } from '@/hooks/pc/admin';
import { useToast } from '@/hooks/common';
import * as botsApi from '@/api/admin/bots';

// 섹션 설정
const SECTIONS = {
  meilisearch: {
    title: 'Meilisearch',
    icon: Database,
    color: 'text-purple-500',
    bgColor: 'bg-purple-50',
    borderColor: 'border-purple-100',
  },
  youtube: {
    title: 'YouTube',
    icon: Youtube,
    color: 'text-red-500',
    bgColor: 'bg-red-50',
    borderColor: 'border-red-100',
    canAdd: true,
  },
  x: {
    title: 'X (Twitter)',
    icon: Twitter,
    color: 'text-gray-700',
    bgColor: 'bg-gray-50',
    borderColor: 'border-gray-200',
  },
};

// 애니메이션 variants
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.4, ease: 'easeOut' },
  },
};

function ScheduleBots() {
  const queryClient = useQueryClient();
  const { user, isAuthenticated } = useAdminAuth();
  const { toast, setToast } = useToast();
  const [isInitialLoad, setIsInitialLoad] = useState(true); // 첫 로드 여부 (애니메이션용)
  const [syncing, setSyncing] = useState(null); // 동기화 중인 봇 ID
  const [quotaWarning, setQuotaWarning] = useState(null); // 할당량 경고 상태

  // 봇 목록 조회
  const {
    data: bots = [],
    isLoading: loading,
    isError,
    refetch: fetchBots,
  } = useQuery({
    queryKey: ['admin', 'bots'],
    queryFn: botsApi.getBots,
    enabled: isAuthenticated,
    staleTime: 30000,
  });

  // 할당량 경고 상태 조회
  const { data: quotaData } = useQuery({
    queryKey: ['admin', 'bots', 'quota'],
    queryFn: botsApi.getQuotaWarning,
    enabled: isAuthenticated,
    staleTime: 60000,
  });

  // 에러 처리
  useEffect(() => {
    if (isError) {
      setToast({ type: 'error', message: '봇 목록을 불러올 수 없습니다.' });
    }
  }, [isError, setToast]);

  // 할당량 경고 상태 업데이트
  useEffect(() => {
    if (quotaData?.active) {
      setQuotaWarning(quotaData);
    }
  }, [quotaData]);

  // 할당량 경고 해제
  const handleDismissQuotaWarning = async () => {
    try {
      await botsApi.dismissQuotaWarning();
      setQuotaWarning(null);
    } catch (error) {
      console.error('할당량 경고 해제 오류:', error);
    }
  };

  // 봇 시작/정지 토글
  const toggleBot = async (botId, currentStatus, botName) => {
    try {
      const action = currentStatus === 'running' ? 'stop' : 'start';

      if (action === 'start') {
        await botsApi.startBot(botId);
      } else {
        await botsApi.stopBot(botId);
      }

      // 캐시 업데이트 (전체 목록 새로고침 대신)
      queryClient.setQueryData(['admin', 'bots'], (prev) =>
        prev?.map((bot) =>
          bot.id === botId ? { ...bot, status: action === 'start' ? 'running' : 'stopped' } : bot
        )
      );
      setToast({
        type: 'success',
        message:
          action === 'start' ? `${botName} 봇이 시작되었습니다.` : `${botName} 봇이 정지되었습니다.`,
      });
    } catch (error) {
      console.error('봇 토글 오류:', error);
      setToast({ type: 'error', message: error.message || '작업 중 오류가 발생했습니다.' });
    }
  };

  // 전체 동기화
  const handleSyncAllVideos = async (botId) => {
    setSyncing(botId);
    try {
      const data = await botsApi.syncAllVideos(botId);
      setToast({
        type: 'success',
        message: `${data.addedCount}개 일정이 추가되었습니다. (전체 ${data.total}개)`,
      });
      fetchBots();
    } catch (error) {
      console.error('전체 동기화 오류:', error);
      setToast({ type: 'error', message: error.message || '동기화 중 오류가 발생했습니다.' });
      fetchBots();
    } finally {
      setSyncing(null);
    }
  };

  // 상태 아이콘 및 색상
  const getStatusInfo = (status) => {
    switch (status) {
      case 'running':
        return {
          icon: <CheckCircle size={16} />,
          text: '실행 중',
          color: 'text-green-500',
          bg: 'bg-green-50',
          dot: 'bg-green-500',
        };
      case 'stopped':
        return {
          icon: <XCircle size={16} />,
          text: '정지됨',
          color: 'text-gray-400',
          bg: 'bg-gray-50',
          dot: 'bg-gray-400',
        };
      case 'error':
        return {
          icon: <XCircle size={16} />,
          text: '오류',
          color: 'text-red-500',
          bg: 'bg-red-50',
          dot: 'bg-red-500',
        };
      default:
        return {
          icon: null,
          text: '알 수 없음',
          color: 'text-gray-400',
          bg: 'bg-gray-50',
          dot: 'bg-gray-400',
        };
    }
  };

  // 시간 포맷 (UTC → KST 변환)
  const formatTime = (dateString) => {
    if (!dateString) return '-';
    const date = new Date(dateString);
    return date.toLocaleString('ko-KR', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  // 간격 포맷 (분 → 분/시간/일)
  const formatInterval = (minutes) => {
    if (!minutes) return '-';
    if (minutes >= 1440) {
      const days = Math.floor(minutes / 1440);
      return `${days}일`;
    } else if (minutes >= 60) {
      const hours = Math.floor(minutes / 60);
      return `${hours}시간`;
    }
    return `${minutes}분`;
  };

  // 통계 계산
  const runningCount = bots.filter((b) => b.status === 'running').length;
  const stoppedCount = bots.filter((b) => b.status === 'stopped').length;
  const errorCount = bots.filter((b) => b.status === 'error').length;

  // 봇을 타입별로 그룹화
  const botsByType = useMemo(() => {
    const grouped = { meilisearch: [], youtube: [], x: [] };
    bots.forEach((bot) => {
      if (grouped[bot.type]) {
        grouped[bot.type].push(bot);
      }
    });
    return grouped;
  }, [bots]);

  return (
    <AdminLayout user={user}>
      <Toast toast={toast} onClose={() => setToast(null)} />

      {/* 메인 콘텐츠 */}
      <motion.div
        className="max-w-7xl mx-auto px-6 py-8"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        {/* 브레드크럼 */}
        <motion.div variants={itemVariants} className="flex items-center gap-2 text-sm text-gray-400 mb-8">
          <Link to="/admin/dashboard" className="hover:text-primary transition-colors">
            <Home size={16} />
          </Link>
          <ChevronRight size={14} />
          <Link to="/admin/schedule" className="hover:text-primary transition-colors">
            일정 관리
          </Link>
          <ChevronRight size={14} />
          <span className="text-gray-700">봇 관리</span>
        </motion.div>

        {/* 타이틀 */}
        <motion.div variants={itemVariants} className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">봇 관리</h1>
          <p className="text-gray-500">일정 자동화 봇을 관리합니다</p>
        </motion.div>

        {/* 봇 통계 */}
        <motion.div variants={itemVariants} className="grid grid-cols-4 gap-4 mb-8">
          <div className="bg-white rounded-xl p-5 border border-gray-100">
            <div className="text-sm text-gray-500 mb-1">전체 봇</div>
            <div className="text-2xl font-bold text-gray-900">
              <AnimatedNumber value={bots.length} />
            </div>
          </div>
          <div className="bg-white rounded-xl p-5 border border-gray-100">
            <div className="text-sm text-gray-500 mb-1">실행 중</div>
            <div className="text-2xl font-bold text-green-500">
              <AnimatedNumber value={runningCount} />
            </div>
          </div>
          <div className="bg-white rounded-xl p-5 border border-gray-100">
            <div className="text-sm text-gray-500 mb-1">정지됨</div>
            <div className="text-2xl font-bold text-gray-400">
              <AnimatedNumber value={stoppedCount} />
            </div>
          </div>
          <div className="bg-white rounded-xl p-5 border border-gray-100">
            <div className="text-sm text-gray-500 mb-1">오류</div>
            <div className="text-2xl font-bold text-red-500">
              <AnimatedNumber value={errorCount} />
            </div>
          </div>
        </motion.div>

        {/* API 할당량 경고 배너 */}
        <AnimatePresence>
          {quotaWarning && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              className="bg-red-50 border border-red-200 rounded-xl p-4 mb-8 flex items-start justify-between overflow-hidden"
            >
              <div className="flex items-start gap-3">
                <div className="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                  <XCircle size={18} className="text-red-500" />
                </div>
                <div>
                  <h3 className="font-bold text-red-700">YouTube API 할당량 경고</h3>
                  <p className="text-sm text-red-600 mt-0.5">{quotaWarning.message}</p>
                </div>
              </div>
              <button
                onClick={handleDismissQuotaWarning}
                className="text-red-400 hover:text-red-600 transition-colors text-sm px-2 py-1"
              >
                닫기
              </button>
            </motion.div>
          )}
        </AnimatePresence>

        {/* 로딩 상태 */}
        {loading ? (
          <motion.div variants={itemVariants} className="flex justify-center items-center py-20">
            <div className="animate-spin rounded-full h-10 w-10 border-4 border-primary border-t-transparent"></div>
          </motion.div>
        ) : bots.length === 0 ? (
          <motion.div variants={itemVariants} className="text-center py-20 text-gray-400">
            <Bot size={48} className="mx-auto mb-4 opacity-30" />
            <p>등록된 봇이 없습니다</p>
          </motion.div>
        ) : (
          /* 섹션별 봇 목록 */
          <div className="space-y-6">
            {Object.entries(SECTIONS).map(([type, section]) => {
              const sectionBots = botsByType[type] || [];
              if (sectionBots.length === 0 && !section.canAdd) return null;

              const SectionIcon = section.icon;

              return (
                <motion.div
                  key={type}
                  variants={itemVariants}
                  className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden"
                >
                  {/* 섹션 헤더 */}
                  <div className={`px-6 py-4 border-b ${section.borderColor} ${section.bgColor} flex items-center justify-between`}>
                    <div className="flex items-center gap-3">
                      <div className={`w-8 h-8 rounded-lg ${section.bgColor} flex items-center justify-center`}>
                        <SectionIcon size={18} className={section.color} />
                      </div>
                      <div>
                        <h2 className="font-bold text-gray-900">{section.title}</h2>
                        <p className="text-xs text-gray-500">{sectionBots.length}개의 봇</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {section.canAdd && (
                        <button
                          onClick={() => {/* TODO: 봇 추가 모달 */}}
                          className="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
                        >
                          <Plus size={16} />
                          봇 추가
                        </button>
                      )}
                      <Tooltip text="새로고침">
                        <button
                          onClick={() => {
                            setIsInitialLoad(true);
                            fetchBots();
                          }}
                          disabled={loading}
                          className="p-2 hover:bg-white/50 rounded-lg transition-colors text-gray-500 hover:text-gray-700 disabled:opacity-50"
                        >
                          <RefreshCw size={18} className={loading ? 'animate-spin' : ''} />
                        </button>
                      </Tooltip>
                    </div>
                  </div>

                  {/* 봇 카드 목록 */}
                  {sectionBots.length === 0 ? (
                    <div className="text-center py-12 text-gray-400">
                      <Bot size={36} className="mx-auto mb-3 opacity-30" />
                      <p className="text-sm">등록된 봇이 없습니다</p>
                      {section.canAdd && (
                        <p className="text-xs mt-1">위의 버튼을 클릭하여 봇을 추가하세요</p>
                      )}
                    </div>
                  ) : (
                    <div className="p-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
                      {sectionBots.map((bot, index) => (
                        <BotCard
                          key={bot.id}
                          bot={bot}
                          index={index}
                          isInitialLoad={isInitialLoad}
                          syncing={syncing}
                          statusInfo={getStatusInfo(bot.status)}
                          onSync={handleSyncAllVideos}
                          onToggle={toggleBot}
                          onAnimationComplete={() =>
                            isInitialLoad && index === sectionBots.length - 1 && setIsInitialLoad(false)
                          }
                          formatTime={formatTime}
                          formatInterval={formatInterval}
                        />
                      ))}
                    </div>
                  )}
                </motion.div>
              );
            })}
          </div>
        )}
      </motion.div>
    </AdminLayout>
  );
}

export default ScheduleBots;
