import { motion } from 'motion/react';
import { Search, AlertCircle, Info, RefreshCw } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Button } from '@/shared/ui/button';

type EmptyStatus = 'loading' | 'error' | 'not_found' | 'timeout';

interface EmptyStateProps {
  message?: string;
  subtext?: string;
  status?: EmptyStatus;
  onRetry?: () => void;
  /** 자동 타임아웃: N초 후 'timeout' 상태로 전환 (기본값: 60) */
  autoTimeoutSec?: number;
}

const STATUS_CONFIG: Record<EmptyStatus, {
  icon: typeof Search;
  iconColor: string;
  bgColor: string;
  defaultMessage: string;
  defaultSubtext: string;
}> = {
  loading: {
    icon: Search,
    iconColor: 'text-slate-400',
    bgColor: 'bg-slate-100',
    defaultMessage: '데이터 수집 중',
    defaultSubtext: '채널 데이터 보강이 완료되면 자동으로 업데이트됩니다.',
  },
  error: {
    icon: AlertCircle,
    iconColor: 'text-red-400',
    bgColor: 'bg-red-50',
    defaultMessage: '데이터 수집 실패',
    defaultSubtext: '일시적인 오류가 발생했습니다. 다시 시도해 주세요.',
  },
  not_found: {
    icon: Info,
    iconColor: 'text-blue-400',
    bgColor: 'bg-blue-50',
    defaultMessage: '채널을 찾을 수 없음',
    defaultSubtext: '이 채널은 발견되지 않았거나 데이터가 없습니다.',
  },
  timeout: {
    icon: AlertCircle,
    iconColor: 'text-amber-400',
    bgColor: 'bg-amber-50',
    defaultMessage: '응답 시간 초과',
    defaultSubtext: '데이터 수집에 시간이 오래 걸리고 있습니다.',
  },
};

/**
 * 데이터가 아직 준비되지 않았을 때 리포트 섹션 내에 표시
 * (예: 보강 완료 전, 채널을 찾지 못했을 때, 또는 에러 발생 시).
 */
export function EmptyState({
  message,
  subtext,
  status = 'loading',
  onRetry,
  autoTimeoutSec = 60,
}: EmptyStateProps) {
  const [currentStatus, setCurrentStatus] = useState<EmptyStatus>(status);

  // 자동 타임아웃: N초 후 'loading'에서 'timeout'으로 전환
  useEffect(() => {
    if (status !== 'loading') return;
    const timer = setTimeout(() => setCurrentStatus('timeout'), autoTimeoutSec * 1000);
    return () => clearTimeout(timer);
  }, [status, autoTimeoutSec]);

  // 외부 status 변경 동기화
  useEffect(() => {
    setCurrentStatus(status);
  }, [status]);

  const config = STATUS_CONFIG[currentStatus];
  const Icon = config.icon;

  return (
    <motion.div
      className="flex flex-col items-center justify-center py-12 text-center"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.4 }}
    >
      <div className={`w-12 h-12 rounded-2xl ${config.bgColor} flex items-center justify-center mb-4`}>
        {currentStatus === 'loading' ? (
          <div className="w-5 h-5 border-2 border-slate-300 border-t-slate-500 rounded-full animate-spin" />
        ) : (
          <Icon size={20} className={config.iconColor} />
        )}
      </div>
      <p className="text-sm font-medium text-slate-500">{message || config.defaultMessage}</p>
      <p className="text-xs text-slate-400 mt-1 max-w-xs">{subtext || config.defaultSubtext}</p>

      {onRetry && (currentStatus === 'error' || currentStatus === 'timeout') && (
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={onRetry}
          className="mt-4 flex items-center gap-1.5 px-4 py-1.5 h-auto text-xs font-medium text-purple-600 bg-purple-50 rounded-lg hover:bg-purple-100"
        >
          <RefreshCw size={12} />
          다시 시도
        </Button>
      )}
    </motion.div>
  );
}
