import React, { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, ChevronLeft, ChevronRight, ZoomIn, ZoomOut, RotateCw } from 'lucide-react';
import { Document, Page, pdfjs } from 'react-pdf';

// PDF.js 워커 설정
pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js';

interface PDFViewerProps {
  fileId: string;
  filename: string;
  pageNumber: number;
  onClose: () => void;
}

const PDFViewer: React.FC<PDFViewerProps> = ({ fileId, filename, pageNumber, onClose }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
  const [numPages, setNumPages] = useState<number | null>(null);
  const [currentPage, setCurrentPage] = useState(pageNumber);
  const [scale, setScale] = useState(1.0);
  const [rotation, setRotation] = useState(0);
  const [showContinuousPages, setShowContinuousPages] = useState(true);

  useEffect(() => {
    const loadPDF = async () => {
      try {
        setIsLoading(true);
        setError(null);

        // PDF URL 생성
        const url = `http://localhost:8000/pdf/${fileId}/view`;
        console.log('📄 PDF 로드 시작:', { fileId, filename, pageNumber, url });
        setPdfUrl(url);
        
        // PDF 로드 완료를 위해 약간의 지연
        setTimeout(() => {
          setIsLoading(false);
          console.log('📄 PDF 로드 완료:', { fileId, filename, pageNumber });
        }, 100);
      } catch (err) {
        console.error('PDF 로드 오류:', err);
        setError('PDF를 불러올 수 없습니다.');
        setIsLoading(false);
      }
    };

    loadPDF();
  }, [fileId, filename, pageNumber]);

  useEffect(() => {
    setCurrentPage(pageNumber);
  }, [pageNumber]);

  // ESC 키로 PDF 뷰어 닫기
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [onClose]);

  const onDocumentLoadSuccess = useCallback(({ numPages }: { numPages: number }) => {
    setNumPages(numPages);
    setIsLoading(false);
  }, []);

  const onDocumentLoadError = useCallback((error: Error) => {
    console.error('PDF 로드 오류:', error);
    setError('PDF를 불러올 수 없습니다.');
    setIsLoading(false);
  }, []);

  const goToPrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  const goToNextPage = () => {
    if (numPages && currentPage < numPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  const zoomIn = () => {
    setScale(prev => Math.min(prev + 0.25, 3.0));
  };

  const zoomOut = () => {
    setScale(prev => Math.max(prev - 0.25, 0.5));
  };

  const rotate = () => {
    setRotation(prev => (prev + 90) % 360);
  };

  // 스크롤 이벤트 핸들러 제거 - 마우스 스크롤로 페이지 이동하지 않음

  // 키보드 이벤트 핸들러 (연속 페이지 모드에서도 동일하게 작동)
  const handleKeyDown = useCallback((e: Event) => {
    const keyEvent = e as KeyboardEvent;
    if (keyEvent.key === 'ArrowUp' || keyEvent.key === 'ArrowLeft') {
      keyEvent.preventDefault();
      setCurrentPage((prevPage) => Math.max(1, prevPage - 1));
    } else if (keyEvent.key === 'ArrowDown' || keyEvent.key === 'ArrowRight') {
      keyEvent.preventDefault();
      setCurrentPage((prevPage) => Math.min(numPages || 1, prevPage + 1));
    } else if (keyEvent.key === 'Home') {
      keyEvent.preventDefault();
      setCurrentPage(1);
    } else if (keyEvent.key === 'End') {
      keyEvent.preventDefault();
      setCurrentPage(numPages || 1);
    }
  }, [numPages]);

  // 키보드 이벤트 리스너만 등록 (마우스 스크롤 이벤트 제거)
  useEffect(() => {
    document.addEventListener('keydown', handleKeyDown);

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [handleKeyDown]);


  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
      >
        <motion.div
          initial={{ scale: 0.9, y: 20 }}
          animate={{ scale: 1, y: 0 }}
          exit={{ scale: 0.9, y: 20 }}
          className="relative bg-white rounded-lg shadow-xl w-[95vw] h-[95vh] flex flex-col"
        >
          {/* Adobe Reader 스타일 툴바 */}
          <div className="flex items-center justify-between p-3 border-b border-gray-200 bg-gray-50 flex-shrink-0">
            <div className="flex items-center space-x-2">
              {/* 페이지 네비게이션 */}
              <button
                onClick={goToPrevPage}
                disabled={currentPage <= 1}
                className="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded disabled:opacity-50 disabled:cursor-not-allowed"
                title="이전 페이지"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              
              <span className="text-sm text-gray-700 px-2">
                {currentPage} / {numPages || '?'}
              </span>
              
              <button
                onClick={goToNextPage}
                disabled={!numPages || currentPage >= numPages}
                className="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded disabled:opacity-50 disabled:cursor-not-allowed"
                title="다음 페이지"
              >
                <ChevronRight className="w-4 h-4" />
              </button>

              <div className="w-px h-6 bg-gray-300 mx-2"></div>

              {/* 줌 컨트롤 */}
              <button
                onClick={zoomOut}
                className="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded"
                title="축소"
              >
                <ZoomOut className="w-4 h-4" />
              </button>
              
              <span className="text-sm text-gray-700 px-2">
                {Math.round(scale * 100)}%
              </span>
              
              <button
                onClick={zoomIn}
                className="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded"
                title="확대"
              >
                <ZoomIn className="w-4 h-4" />
              </button>

              <div className="w-px h-6 bg-gray-300 mx-2"></div>

              {/* 회전 */}
              <button
                onClick={rotate}
                className="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded"
                title="회전"
              >
                <RotateCw className="w-4 h-4" />
              </button>

              <div className="w-px h-6 bg-gray-300 mx-2"></div>

              {/* 연속 페이지 모드 토글 */}
              <button
                onClick={() => setShowContinuousPages(!showContinuousPages)}
                className={`p-2 rounded transition-colors ${
                  showContinuousPages 
                    ? 'text-blue-600 bg-blue-50' 
                    : 'text-gray-600 hover:text-blue-600 hover:bg-blue-50'
                }`}
                title={showContinuousPages ? "단일 페이지 모드" : "연속 페이지 모드"}
              >
                <div className="w-4 h-4 flex flex-col space-y-0.5">
                  <div className="w-full h-0.5 bg-current"></div>
                  <div className="w-full h-0.5 bg-current"></div>
                  <div className="w-full h-0.5 bg-current"></div>
                </div>
              </button>
            </div>

            <div className="flex items-center space-x-2">
              {/* 파일명 */}
              <span className="text-sm text-gray-700 truncate max-w-[300px]">
                {filename}
              </span>

              <div className="w-px h-6 bg-gray-300 mx-2"></div>

              {/* 사용법 안내 */}
              <div className="text-xs text-gray-500 px-2">
                {showContinuousPages 
                  ? "연속 페이지 모드 - 화살표키로 페이지 이동" 
                  : "단일 페이지 모드 - 화살표키로 페이지 이동"
                }
              </div>

              <div className="w-px h-6 bg-gray-300 mx-2"></div>

              {/* 액션 버튼들 제거됨 */}

              <button
                onClick={onClose}
                className="p-2 text-gray-600 hover:text-red-600 hover:bg-red-50 rounded"
                title="닫기"
              >
                <X className="w-4 h-4" />
              </button>
            </div>
          </div>

          {/* PDF 컨텐츠 */}
          <div className="pdf-viewer-container flex-1 relative bg-gray-100 overflow-auto">
            {isLoading && (
              <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
                <div className="text-center">
                  <div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent mx-auto mb-4"></div>
                  <p className="text-lg font-medium text-gray-700">PDF를 불러오는 중...</p>
                  <p className="text-sm text-gray-500 mt-2">잠시만 기다려주세요...</p>
                </div>
              </div>
            )}

            {error && (
              <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
                <div className="text-center">
                  <div className="text-red-500 text-6xl mb-4">⚠️</div>
                  <p className="text-red-600 text-lg font-medium">{error}</p>
                  <p className="text-gray-500 mt-2">파일을 다시 확인해주세요.</p>
                </div>
              </div>
            )}

            {pdfUrl && !isLoading && !error && (
              <div className="flex justify-center p-4">
                <Document
                  file={pdfUrl}
                  onLoadSuccess={onDocumentLoadSuccess}
                  onLoadError={onDocumentLoadError}
                  loading={
                    <div className="text-center">
                      <div className="animate-spin rounded-full h-8 w-8 border-4 border-blue-500 border-t-transparent mx-auto mb-2"></div>
                      <p className="text-sm text-gray-600">페이지 로딩 중...</p>
                    </div>
                  }
                >
           {showContinuousPages ? (
             // 연속 페이지 모드: 현재 페이지가 위쪽에 크게, 다음 페이지가 아래쪽에 작게 표시
             <div className="space-y-4">
               {/* 현재 페이지 (위쪽에 크게) */}
               <div className="flex justify-center">
                 <div className="text-center">
                   <div className="text-xs text-gray-500 mb-2">페이지 {currentPage}</div>
                   <Page
                     pageNumber={currentPage}
                     scale={scale}
                     rotate={rotation}
                     className="shadow-lg"
                   />
                 </div>
               </div>
               
               {/* 다음 페이지 (아래쪽에 작게) */}
               {numPages && currentPage < numPages && (
                 <div className="flex justify-center">
                   <div className="text-center">
                     <div className="text-xs text-gray-500 mb-2">페이지 {currentPage + 1}</div>
                     <Page
                       pageNumber={currentPage + 1}
                       scale={scale * 0.7}
                       rotate={rotation}
                       className="shadow-md opacity-60"
                     />
                   </div>
                 </div>
               )}
             </div>
                  ) : (
                    // 단일 페이지 모드
                    <Page
                      pageNumber={currentPage}
                      scale={scale}
                      rotate={rotation}
                      className="shadow-lg"
                    />
                  )}
                </Document>
              </div>
            )}
          </div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
};

export default PDFViewer;