import React, { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useFiles } from '../contexts/FileContext';
import { X, Upload, Trash2, Search } from 'lucide-react';

interface FileUploadModalProps {
  onClose: () => void;
  onPDFView: (fileId: string, filename: string) => void;
}

const FileUploadModal: React.FC<FileUploadModalProps> = ({ onClose, onPDFView }) => {
  const { files, uploadFile, deleteFile, refreshFiles, searchFiles, isLoading, isFileLoading } = useFiles();
  const [dragActive, setDragActive] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [uploadStatus, setUploadStatus] = useState<'idle' | 'success' | 'error'>('idle');
  const [uploadMessage, setUploadMessage] = useState('');
  const [isSearching, setIsSearching] = useState(false);
  const [lastSearchTerm, setLastSearchTerm] = useState('');
  const [tooltip, setTooltip] = useState<{ show: boolean; content: string; x: number; y: number }>({
    show: false,
    content: '',
    x: 0,
    y: 0
  });
  
  // 순차적 업로드를 위한 상태
  const [isUploading, setIsUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState<{
    current: number;
    total: number;
    currentFile: string;
    progress: number;
  } | null>(null);
  const [isUploadCancelled, setIsUploadCancelled] = useState(false);
  const [uploadedFileIds, setUploadedFileIds] = useState<string[]>([]);
  
  // 모달 자체의 로딩 상태 (FileContext의 isLoading과 독립적)
  const [modalLoading, setModalLoading] = useState(false);
  
  const fileInputRef = useRef<HTMLInputElement>(null);
  const abortControllerRef = useRef<AbortController | null>(null);

  // 모달이 열릴 때마다 파일 목록 새로고침 (독립적으로 실행)
  useEffect(() => {
    console.log('📁 FileUploadModal 열림 - 파일 목록 새로고침 시작');
    console.log('📁 현재 files 상태:', files);
    console.log('📁 현재 isLoading 상태:', isLoading);
    
    const loadFiles = async () => {
      setModalLoading(true);
      try {
        await refreshFiles();
        console.log('📁 FileUploadModal - 파일 목록 새로고침 완료');
      } catch (error) {
        console.error('📁 FileUploadModal - 파일 목록 새로고침 실패:', error);
      } finally {
        setModalLoading(false);
      }
    };
    
    loadFiles();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  // ESC 키로 업로드 중단 및 모달 닫기
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        if (isUploading) {
          // 업로드 중이면 업로드 중단
          handleCancelUpload();
        } else {
          // 업로드 중이 아니면 모달 닫기
          onClose();
        }
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isUploading, onClose]); // eslint-disable-line react-hooks/exhaustive-deps

  // 업로드 중단 핸들러
  const handleCancelUpload = async () => {
    console.log('🛑 업로드 중단 요청');
    
    // 즉시 중단 상태 설정
    setIsUploadCancelled(true);
    
    // AbortController로 진행 중인 모든 요청 중단
    if (abortControllerRef.current) {
      console.log('🛑 AbortController로 진행 중인 요청들 중단');
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
    }
    
    // 업로드된 파일들 롤백
    if (uploadedFileIds.length > 0) {
      console.log('🛑 업로드된 파일들 롤백 시작:', uploadedFileIds);
      
      try {
        // 각 파일에 대해 삭제 요청
        for (const fileId of uploadedFileIds) {
          await deleteFile(fileId);
          console.log(`🛑 파일 삭제 완료: ${fileId}`);
        }
        
        // 업로드된 파일 ID 목록 초기화
        setUploadedFileIds([]);
        console.log('🛑 모든 업로드된 파일 롤백 완료');
      } catch (error) {
        console.error('🛑 파일 롤백 중 오류:', error);
      }
    }
    
    // 상태 초기화
    setIsUploading(false);
    setUploadProgress(null);
    
    // 파일 목록 새로고침
    await refreshFiles();
    
    console.log('🛑 업로드 중단 완료');
  };

  // 순차적 업로드 함수
  const uploadFilesSequentially = async (files: File[]) => {
    setIsUploadCancelled(false);
    setIsUploading(true);
    setUploadedFileIds([]); // 업로드된 파일 ID 목록 초기화
    
    // AbortController 생성
    abortControllerRef.current = new AbortController();
    
    setUploadProgress({
      current: 0,
      total: files.length,
      currentFile: files[0].name,
      progress: 0
    });

    let successCount = 0;
    let errorCount = 0;

    for (let i = 0; i < files.length; i++) {
      // 업로드 중단 체크 (여러 조건 확인)
      if (isUploadCancelled || !abortControllerRef.current || abortControllerRef.current.signal.aborted) {
        console.log('🛑 업로드 중단됨 - 루프 종료');
        break;
      }
      
      const file = files[i];
      
      setUploadProgress({
        current: i + 1,
        total: files.length,
        currentFile: file.name,
        progress: (i / files.length) * 100
      });

      try {
        // 업로드 전 중단 체크
        if (isUploadCancelled || !abortControllerRef.current || abortControllerRef.current.signal.aborted) {
          console.log('🛑 파일 업로드 전 중단 체크 - 업로드 건너뜀');
          break;
        }
        
        // 개별 파일 업로드 (AbortSignal 전달)
        const fileId = await uploadFile(file, abortControllerRef.current?.signal);
        
        if (fileId) {
          successCount++;
          // 업로드된 파일 ID를 목록에 추가
          setUploadedFileIds(prev => [...prev, fileId]);
          console.log(`📋 업로드된 파일 ID 추가: ${fileId}`);
        } else {
          errorCount++;
        }
        
        // 파일 완료 시 진행률 업데이트
        setUploadProgress(prev => prev ? {
          ...prev,
          progress: ((i + 1) / files.length) * 100
        } : null);

        // 파일 간 짧은 지연 (UI 업데이트를 위해) - 중단 체크 포함
        await new Promise<void>(resolve => {
          const timeout = setTimeout(() => resolve(), 500);
          // 중단 체크를 위한 짧은 간격으로 체크
          const checkInterval = setInterval(() => {
            if (isUploadCancelled || !abortControllerRef.current || abortControllerRef.current.signal.aborted) {
              clearTimeout(timeout);
              clearInterval(checkInterval);
              resolve();
            }
          }, 100);
          
          // 500ms 후 정리
          setTimeout(() => {
            clearInterval(checkInterval);
          }, 500);
        });
        
      } catch (error) {
        console.error(`파일 업로드 실패: ${file.name}`, error);
        errorCount++;
      }
    }

    // 업로드 완료 후 상태 정리
    setIsUploading(false);
    setUploadProgress(null);
    
    // AbortController 정리
    abortControllerRef.current = null;

    // 중단된 경우와 완료된 경우 구분
    if (isUploadCancelled) {
      setUploadStatus('error');
      setUploadMessage(`업로드가 중단되었습니다. (${successCount}개 완료)`);
      console.log('🛑 업로드 중단으로 인한 완료');
    } else {
      // 결과 메시지 표시
      if (successCount > 0 && errorCount === 0) {
        setUploadStatus('success');
        setUploadMessage(`${successCount}개 파일이 성공적으로 업로드되었습니다.`);
      } else if (successCount > 0 && errorCount > 0) {
        setUploadStatus('error');
        setUploadMessage(`${successCount}개 성공, ${errorCount}개 실패`);
      } else {
        setUploadStatus('error');
        setUploadMessage('모든 파일 업로드에 실패했습니다.');
      }
    }

    setTimeout(() => setUploadStatus('idle'), 3000);
    
    // 파일 목록 새로고침
    await refreshFiles();
  };

  // 검색 실행 함수
  const handleSearch = async () => {
    console.log('검색 실행:', searchTerm);
    setIsSearching(true);
    setLastSearchTerm(searchTerm);
    
    try {
      if (searchTerm.trim()) {
        await searchFiles(searchTerm);
      } else {
        await refreshFiles(); // 검색어가 비어있으면 전체 목록 조회
      }
    } catch (error) {
      console.error('검색 실패:', error);
    } finally {
      setIsSearching(false);
    }
  };

  // 키보드 이벤트 핸들러
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSearch();
    }
  };

  // 입력 필드 변경 핸들러 (백스페이스, Delete 키 처리)
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setSearchTerm(newValue);
    
    // 검색어가 비어있으면 즉시 전체 목록 조회
    if (newValue.trim() === '') {
      console.log('검색창이 비어있음 - 전체 파일 목록 조회');
      setLastSearchTerm(''); // 검색어 초기화
      setIsSearching(false); // 검색 상태 초기화
      refreshFiles(); // 전체 파일 목록 조회
    }
  };

  const handleDrag = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    // 업로드 중일 때는 드래그 앤 드롭 비활성화
    if (isUploading) {
      return;
    }
    
    if (e.type === 'dragenter' || e.type === 'dragover') {
      setDragActive(true);
    } else if (e.type === 'dragleave') {
      setDragActive(false);
    }
  };

  const handleDrop = async (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);
    
    // 업로드 중일 때는 드롭 비활성화
    if (isUploading) {
      return;
    }

    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      const files = Array.from(e.dataTransfer.files);
      const pdfFiles = files.filter(file => file.type === 'application/pdf');
      
      // PDF 파일만 허용
      if (pdfFiles.length === 0) {
        setUploadStatus('error');
        setUploadMessage('PDF 파일만 업로드 가능합니다.');
        setTimeout(() => setUploadStatus('idle'), 3000);
        return;
      }
      
      // 파일 개수 제한 (5개 이내)
      if (pdfFiles.length > 5) {
        setUploadStatus('error');
        setUploadMessage('최대 5개 파일까지만 업로드 가능합니다.');
        setTimeout(() => setUploadStatus('idle'), 3000);
        return;
      }
      
      if (pdfFiles.length !== files.length) {
        setUploadStatus('error');
        setUploadMessage(`${files.length - pdfFiles.length}개의 비PDF 파일이 제외되었습니다.`);
        setTimeout(() => setUploadStatus('idle'), 3000);
      }
      
      // 순차적 업로드 실행
      await uploadFilesSequentially(pdfFiles);
    }
    
    // 드래그 앤 드롭 후에도 input value 초기화
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    // 업로드 중일 때는 파일 선택 비활성화
    if (isUploading) {
      return;
    }
    
    if (e.target.files && e.target.files.length > 0) {
      const files = Array.from(e.target.files);
      const pdfFiles = files.filter(file => file.type === 'application/pdf');
      
      // PDF 파일만 허용
      if (pdfFiles.length === 0) {
        setUploadStatus('error');
        setUploadMessage('PDF 파일만 업로드 가능합니다.');
        setTimeout(() => setUploadStatus('idle'), 3000);
        return;
      }
      
      // 파일 개수 제한 (5개 이내)
      if (pdfFiles.length > 5) {
        setUploadStatus('error');
        setUploadMessage('최대 5개 파일까지만 업로드 가능합니다.');
        setTimeout(() => setUploadStatus('idle'), 3000);
        return;
      }
      
      if (pdfFiles.length !== files.length) {
        setUploadStatus('error');
        setUploadMessage(`${files.length - pdfFiles.length}개의 비PDF 파일이 제외되었습니다.`);
        setTimeout(() => setUploadStatus('idle'), 3000);
      }
      
      // 순차적 업로드 실행
      await uploadFilesSequentially(pdfFiles);
    }
    
    // 파일 선택 후 input value 초기화 (동일한 파일 재선택 가능하도록)
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const handleDeleteFile = async (fileId: string) => {
    if (window.confirm('정말로 이 파일을 삭제하시겠습니까?')) {
      await deleteFile(fileId);
    }
  };

  const handleDocumentDoubleClick = (fileId: string, filename: string) => {
    onPDFView(fileId, filename);
  };

  const showTooltip = (content: string, e: React.MouseEvent) => {
    setTooltip({
      show: true,
      content,
      x: e.clientX,
      y: e.clientY
    });
  };

  const hideTooltip = () => {
    setTooltip({
      show: false,
      content: '',
      x: 0,
      y: 0
    });
  };


  // 서버에서 이미 필터링된 파일 목록을 사용
  const filteredFiles = files;

  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
        onClick={() => {
          if (isUploading) {
            handleCancelUpload();
          }
          onClose();
        }}
      >
        <motion.div
          initial={{ opacity: 0, scale: 0.9, y: 20 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.9, y: 20 }}
          className="bg-white rounded-2xl shadow-2xl w-full max-w-6xl max-h-[95vh] overflow-hidden"
          onClick={(e) => e.stopPropagation()}
        >
          {/* 헤더 */}
          <div className="flex items-center justify-between p-6 border-b border-gray-200">
            <h2 className="text-xl font-semibold text-gray-800">PDF 업로드 및 관리</h2>
            <button
              onClick={() => {
                if (isUploading) {
                  handleCancelUpload();
                }
                onClose();
              }}
              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
            >
              <X className="w-5 h-5 text-gray-500" />
            </button>
          </div>

          <div className="p-6 space-y-6">
            {/* 업로드 진행 상태 */}
            {uploadProgress && (
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                 <div className="flex items-center justify-between mb-3">
                   <div className="flex items-center space-x-3">
                     <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"></div>
                     <span className="text-blue-700 font-medium">
                       파일 업로드 중입니다... ({uploadProgress.current}/{uploadProgress.total})
                     </span>
                   </div>
                   <div className="flex items-center space-x-3">
                     <div className="text-sm text-blue-600">
                       {Math.round(uploadProgress.progress)}% 완료
                     </div>
                   </div>
                 </div>
                 
                 {/* 전체 진행률 */}
                 <div className="mb-3">
                   <div className="flex justify-between items-center mb-1">
                     <span className="text-sm text-blue-600 font-medium">전체 진행률</span>
                     <span className="text-sm text-blue-600">{Math.round(uploadProgress.progress)}%</span>
                   </div>
                   <div className="w-full bg-blue-200 rounded-full h-3">
                     <div 
                       className="bg-blue-600 h-3 rounded-full transition-all duration-500 ease-out"
                       style={{ width: `${uploadProgress.progress}%` }}
                     ></div>
                   </div>
                 </div>
                 
                 {/* 현재 파일 정보 */}
                 <div className="text-sm text-blue-600 mb-2">
                   현재 파일: {uploadProgress.currentFile}
                 </div>
              </div>
            )}

            {/* 업로드 중일 때 전체 메시지 */}
            {isUploading && !uploadProgress && (
              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <div className="flex items-center space-x-3">
                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-yellow-500"></div>
                  <span className="text-yellow-700 font-medium">
                    파일 업로드 중입니다....
                  </span>
                </div>
              </div>
            )}

            {/* 업로드 상태 메시지 */}
            {uploadStatus !== 'idle' && !uploadProgress && (
              <div className={`p-4 rounded-lg ${
                uploadStatus === 'success' 
                  ? 'bg-green-50 border border-green-200 text-green-700'
                  : 'bg-red-50 border border-red-200 text-red-700'
              }`}>
                {uploadMessage}
              </div>
            )}

            {/* 파일 업로드 영역 */}
            <div
              className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
                isUploading
                  ? 'border-gray-200 bg-gray-50 cursor-not-allowed'
                  : dragActive
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-300 hover:border-gray-400'
              }`}
              onDragEnter={handleDrag}
              onDragLeave={handleDrag}
              onDragOver={handleDrag}
              onDrop={handleDrop}
            >
              <Upload className={`w-12 h-12 mx-auto mb-4 ${isUploading ? 'text-gray-300' : 'text-gray-400'}`} />
              <h3 className={`text-lg font-medium mb-2 ${isUploading ? 'text-gray-400' : 'text-gray-700'}`}>
                {isUploading ? '업로드 중입니다...' : 'PDF 파일을 드래그하거나 클릭하여 업로드'}
              </h3>
              <p className={`mb-4 ${isUploading ? 'text-gray-400' : 'text-gray-500'}`}>
                {isUploading ? '다른 파일 업로드는 현재 불가능합니다' : '최대 5개의 PDF 파일을 순차적으로 업로드할 수 있습니다'}
              </p>
              <button
                onClick={() => fileInputRef.current?.click()}
                disabled={isLoading || isUploading}
                className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-all btn-animate"
              >
                {isUploading ? '업로드 중...' : '파일 선택'}
              </button>
              <input
                ref={fileInputRef}
                type="file"
                accept=".pdf"
                multiple
                onChange={handleFileSelect}
                className="hidden"
              />
            </div>

            {/* 검색 및 새로고침 */}
            <div className="flex space-x-3">
              <div className="flex-1 relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
                <input
                  type="text"
                  value={searchTerm}
                  onChange={handleInputChange}
                  onKeyDown={handleKeyPress}
                  placeholder="문서명으로 검색... (엔터키 또는 검색어 삭제 시 자동 검색)"
                  className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
                />
              </div>
              
              {/* 검색/새로고침 버튼 (돋보기 아이콘) */}
              <button
                onClick={handleSearch}
                disabled={isSearching}
                className={`px-4 py-3 rounded-lg transition-colors ${
                  isSearching 
                    ? 'bg-blue-100 text-blue-600 cursor-not-allowed' 
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
                title={isSearching ? "검색 중..." : "검색 및 새로고침"}
              >
                <Search className={`w-5 h-5 ${isSearching ? 'animate-pulse' : ''}`} />
              </button>
            </div>

            {/* 검색 상태 및 결과 정보 */}
            <div className="text-sm text-gray-600 bg-blue-50 p-3 rounded-lg">
              {isSearching ? (
                <div className="flex items-center space-x-2">
                  <Search className="w-4 h-4 animate-pulse" />
                  <span>검색 중...</span>
                </div>
              ) : lastSearchTerm ? (
                <div>
                  <div className="font-medium">검색 결과: "{lastSearchTerm}"</div>
                  <div className="text-xs text-gray-500 mt-1">
                    {filteredFiles.length}개의 파일이 검색되었습니다.
                  </div>
                </div>
              ) : (
                <div>
                  <div className="font-medium">전체 파일 목록</div>
                  <div className="text-xs text-gray-500 mt-1">
                    {files.length}개의 파일이 등록되어 있습니다.
                  </div>
                </div>
              )}
            </div>

            {/* 파일 목록 */}
            <div className="border border-gray-200 rounded-xl overflow-hidden">
              <div className="bg-gray-50 px-6 py-3 border-b border-gray-200">
                <div className="grid grid-cols-12 gap-4 text-sm font-medium text-gray-700">
                  <div className="col-span-1">ID</div>
                  <div className="col-span-5">문서명</div>
                  <div className="col-span-3">업로드 날짜</div>
                  <div className="col-span-1">파일 타입</div>
                  <div className="col-span-1">상태</div>
                  <div className="col-span-1">작업</div>
                </div>
              </div>
              
              <div className="max-h-64 overflow-y-auto">
                {(() => {
                  console.log('📁 파일 목록 렌더링 상태:', { isLoading, isFileLoading, modalLoading, filteredFilesLength: filteredFiles.length, filesLength: files.length });
                  return null;
                })()}
                {(isFileLoading || modalLoading) ? (
                  <div className="text-center py-12 text-gray-500">
                    <div className="flex items-center justify-center space-x-3">
                      <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
                      <span className="text-lg font-medium">파일 목록을 불러오는 중...</span>
                    </div>
                  </div>
                ) : filteredFiles.length === 0 ? (
                  <div className="text-center py-12 text-gray-500">
                    {lastSearchTerm ? (
                      <div>
                        <div className="text-lg font-medium mb-2">검색 결과가 없습니다</div>
                        <div className="text-sm">"{lastSearchTerm}"에 해당하는 파일을 찾을 수 없습니다.</div>
                        <div className="text-xs mt-2 text-gray-400">다른 검색어를 시도해보세요.</div>
                      </div>
                    ) : (
                      <div>
                        <div className="text-lg font-medium mb-2">등록된 문서가 없습니다</div>
                        <div className="text-sm">PDF 파일을 업로드하여 시작하세요.</div>
                      </div>
                    )}
                  </div>
                ) : (
                  filteredFiles.map((file) => (
                    <motion.div
                      key={file.id}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      className="grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-100 hover:bg-gray-50 transition-colors"
                    >
                      <div 
                        className="col-span-1 text-sm text-gray-600 cursor-help"
                        onMouseEnter={(e) => showTooltip(file.id, e)}
                        onMouseLeave={hideTooltip}
                        onMouseMove={(e) => showTooltip(file.id, e)}
                      >
                        {file.id}
                      </div>
                      <div 
                        className="col-span-5 text-sm text-gray-800 truncate cursor-pointer hover:text-blue-600 hover:underline transition-colors"
                        onMouseEnter={(e) => showTooltip(file.filename, e)}
                        onMouseLeave={hideTooltip}
                        onMouseMove={(e) => showTooltip(file.filename, e)}
                        onDoubleClick={() => handleDocumentDoubleClick(file.id, file.filename)}
                        title="더블클릭하여 PDF 뷰어로 열기"
                      >
                        {file.filename}
                      </div>
                      <div className="col-span-3 text-sm text-gray-600">
                        {file.upload_date}
                      </div>
                      <div className="col-span-1 text-sm text-gray-600">
                        {file.file_type}
                      </div>
                      <div className="col-span-1 text-sm">
                        <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
                          {file.status}
                        </span>
                      </div>
                      <div className="col-span-1">
                        <button
                          onClick={() => handleDeleteFile(file.id)}
                          className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    </motion.div>
                  ))
                )}
              </div>
            </div>
          </div>
        </motion.div>
        
        {/* 툴팁 */}
        {tooltip.show && (
          <div
            className="fixed z-[60] bg-gray-900 text-white text-sm px-3 py-2 rounded-lg shadow-lg pointer-events-none max-w-xs break-words"
            style={{
              left: tooltip.x + 10,
              top: tooltip.y - 10,
            }}
          >
            {tooltip.content}
          </div>
        )}
      </motion.div>
    </AnimatePresence>
  );
};

export default FileUploadModal;
