import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import ChatInterface from './components/ChatInterface';
import LoginModal from './components/LoginModal';
import FileUploadModal from './components/FileUploadModal';
import PDFViewer from './components/PDFViewer';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import { ChatProvider } from './contexts/ChatContext';
import { FileProvider } from './contexts/FileContext';
import { Upload } from 'lucide-react';

function AppContent() {
  const { isAuthenticated } = useAuth();
  const [showLogin, setShowLogin] = useState(false);
  const [showFileUpload, setShowFileUpload] = useState(false);
  const [showPDFViewer, setShowPDFViewer] = useState(false);
  const [pdfViewerData, setPdfViewerData] = useState<{
    fileId: string;
    filename: string;
    pageNumber: number;
  } | null>(null);


  const handleFileUploadClick = () => {
    // 로그인 상태 확인
    if (isAuthenticated) {
      // 이미 로그인되어 있으면 파일 업로드 모달 열기
      setShowFileUpload(true);
    } else {
      // 로그인되지 않았으면 로그인 모달 열기
      setShowLogin(true);
    }
  };

  const handlePDFView = (fileId: string, filename: string) => {
    setPdfViewerData({
      fileId,
      filename,
      pageNumber: 1
    });
    setShowPDFViewer(true);
    setShowFileUpload(false); // 파일 업로드 모달 닫기
  };

  const handlePDFViewerClose = () => {
    setShowPDFViewer(false);
    setPdfViewerData(null);
    setShowFileUpload(true); // 파일 업로드 모달 다시 열기
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex flex-col">
      {/* 헤더 */}
      <header className="bg-white/80 backdrop-blur-md border-b border-gray-200/50 flex-shrink-0">
        <div className="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-4">
              <img 
                src="/images/dw_icon.png" 
                alt="연구QA 아이콘" 
                className="w-8 h-8"
              />
              <h1 className="text-2xl font-bold gradient-text">
                연구QA Chatbot
              </h1>
            </div>
            
            <div className="flex items-center">
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={handleFileUploadClick}
                className="p-2 rounded-lg bg-blue-100 hover:bg-blue-200 transition-colors"
                title="파일 업로드"
              >
                <Upload className="w-6 h-6 text-blue-600" />
              </motion.button>
            </div>
          </div>
        </div>
      </header>

      {/* 메인 컨텐츠 - 전체 화면 챗봇 */}
      <main className="flex-1 flex flex-col">
        <ChatInterface 
          showLogin={showLogin}
          showFileUpload={showFileUpload}
          showPDFViewer={showPDFViewer}
        />
      </main>

      {/* 모달들 */}
      <AnimatePresence>
        {showLogin && (
          <LoginModal
            onClose={() => setShowLogin(false)}
            onSuccess={() => {
              setShowLogin(false);
              setShowFileUpload(true);
            }}
          />
        )}
        
        {showFileUpload && (
          <FileUploadModal
            onClose={() => setShowFileUpload(false)}
            onPDFView={handlePDFView}
          />
        )}
        
        {showPDFViewer && pdfViewerData && (
          <PDFViewer
            fileId={pdfViewerData.fileId}
            filename={pdfViewerData.filename}
            pageNumber={pdfViewerData.pageNumber}
            onClose={handlePDFViewerClose}
          />
        )}
      </AnimatePresence>
    </div>
  );
}

function App() {
  return (
    <AuthProvider>
      <ChatProvider>
        <FileProvider>
          <AppContent />
        </FileProvider>
      </ChatProvider>
    </AuthProvider>
  );
}

export default App;
