import React, { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useChat } from '../contexts/ChatContext';
import MessageBubble from './MessageBubble';
import TypingIndicator from './TypingIndicator';
import { Send } from 'lucide-react';

interface ChatInterfaceProps {
  showLogin?: boolean;
  showFileUpload?: boolean;
  showPDFViewer?: boolean;
}

const ChatInterface: React.FC<ChatInterfaceProps> = ({ 
  showLogin = false, 
  showFileUpload = false, 
  showPDFViewer = false 
}) => {
  const { messages, addMessage, isLoading, setIsLoading } = useChat();
  const [inputMessage, setInputMessage] = useState('');
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  // 컴포넌트가 마운트되거나 활성화될 때 입력창에 포커스
  useEffect(() => {
    const focusInput = () => {
      if (inputRef.current && !isLoading) {
        inputRef.current.focus();
      }
    };

    // 컴포넌트 마운트 시 포커스
    focusInput();

    // 다른 모달이 닫힌 후 포커스 (약간의 지연을 두어 모달 애니메이션 완료 후)
    const timer = setTimeout(focusInput, 300);

    return () => clearTimeout(timer);
  }, [isLoading]);

  // 모달 상태 변화 감지하여 입력창에 포커스
  useEffect(() => {
    const focusInput = () => {
      if (inputRef.current && !isLoading) {
        inputRef.current.focus();
      }
    };

    // 모든 모달이 닫혔을 때 입력창에 포커스
    if (!showLogin && !showFileUpload && !showPDFViewer) {
      // 모달 애니메이션 완료 후 포커스
      const timer = setTimeout(focusInput, 500);
      return () => clearTimeout(timer);
    }
  }, [showLogin, showFileUpload, showPDFViewer, isLoading]);

  const handleSendMessage = async () => {
    if (!inputMessage.trim() || isLoading) return;

    console.log('💬 챗봇 메시지 전송 시작:', inputMessage.trim());

    const userMessage = inputMessage.trim();
    setInputMessage('');
    addMessage({ content: userMessage, isUser: true });

    setIsLoading(true);

    try {
      console.log('📤 챗봇 API 요청 전송 중...');
      console.log('📋 요청 URL: http://localhost:8000/chat');
      console.log('📋 요청 메시지:', userMessage);
      
      // 인증 없이 요청 (챗봇은 누구나 사용 가능)
      const headers: Record<string, string> = {
        'Content-Type': 'application/json',
      };
      
      console.log('📋 인증 없이 챗봇 요청합니다.');
      
      const response = await fetch('http://localhost:8000/chat', {
        method: 'POST',
        headers,
        body: JSON.stringify({ message: userMessage }),
      });
      
      console.log('📥 챗봇 API 응답 받음');
      console.log('📋 응답 상태:', response.status, response.statusText);

      if (response.ok) {
        console.log('✅ 챗봇 API 응답 성공');
        const data = await response.json();
        console.log('📋 응답 데이터:', data);
        console.log('📋 응답 내용:', data.response);
        console.log('📋 참조 문서:', data.sources);
        
        console.log('🔍 API 응답 전체:', data);
        console.log('🔍 detailed_references:', data.detailed_references);
        console.log('🔍 detailed_references 길이:', data.detailed_references?.length);
        
        addMessage({
          content: data.response,
          isUser: false,
          sources: data.sources,
          detailedReferences: data.detailed_references,
        });
        
        console.log('💬 챗봇 메시지 추가 완료');
      } else {
        console.log('❌ 챗봇 API 오류:', response.status, response.statusText);
        addMessage({
          content: '죄송합니다. 응답을 생성하는 중 오류가 발생했습니다.',
          isUser: false,
        });
      }
    } catch (error) {
      console.error('❌ 챗봇 응답 실패');
      console.error('📋 오류 타입:', error instanceof Error ? error.name : typeof error);
      console.error('📋 오류 메시지:', error instanceof Error ? error.message : String(error));
      console.error('📋 전체 오류:', error);
      
      addMessage({
        content: '네트워크 오류가 발생했습니다. 다시 시도해주세요.',
        isUser: false,
      });
    } finally {
      console.log('🏁 챗봇 요청 완료');
      setIsLoading(false);
      
      // 응답 완료 후 입력창에 포커스
      setTimeout(() => {
        if (inputRef.current) {
          inputRef.current.focus();
        }
      }, 100);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  return (
    <div className="flex-1 flex flex-col min-h-0">
      {/* 메시지 영역 */}
      <div className="flex-1 overflow-y-auto p-4 space-y-16 bg-white">
        {messages.length === 0 ? (
          <div className="flex items-center justify-center h-full">
            <div className="text-center">
              <div className="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 overflow-hidden">
                <img 
                  src="/images/woongtalk_bgremove.png" 
                  alt="연구QA Chatbot" 
                  className="w-full h-full object-contain"
                />
              </div>
              <h3 className="text-2xl font-semibold text-gray-700 mb-3">
                안녕하세요! 연구QA Chatbot입니다
              </h3>
              <p className="text-gray-500 text-lg">
                업로드된 문서에 대해 질문해보세요. AI가 답변을 도와드립니다.
              </p>
            </div>
          </div>
        ) : (
          <div className="w-full max-w-none mx-auto px-4" style={{ maxWidth: '80vw' }}>
            <AnimatePresence>
              {messages.map((message) => (
                <motion.div
                  key={message.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -20 }}
                  transition={{ duration: 0.3 }}
                >
                  <MessageBubble message={message} />
                </motion.div>
              ))}
            </AnimatePresence>
            
            {isLoading && <TypingIndicator />}
            <div ref={messagesEndRef} />
          </div>
        )}
      </div>

      {/* 입력 영역 */}
      <div 
        className="bg-white p-4 input-area"
        style={{
          position: 'relative',
          zIndex: 1000,
          display: 'block',
          visibility: 'visible',
          opacity: 1,
          minHeight: '80px',
          backgroundColor: 'white',
          borderTop: 'none'
        }}
      >
        <div className="w-full max-w-none mx-auto px-4" style={{ maxWidth: '80vw' }}>
          <div className="flex space-x-3">
            <div className="flex-1 relative">
              <input
                ref={inputRef}
                type="text"
                value={inputMessage}
                onChange={(e) => setInputMessage(e.target.value)}
                onKeyPress={handleKeyPress}
                placeholder="질문을 입력하세요..."
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
                disabled={isLoading}
                style={{ 
                  border: '1px solid #d1d5db',
                  backgroundColor: 'white',
                  color: '#374151',
                  display: 'block',
                  visibility: 'visible',
                  opacity: 1,
                  width: '100%',
                  minHeight: '48px',
                  paddingLeft: '20px',
                  paddingRight: '16px'
                }}
              />
            </div>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={handleSendMessage}
              disabled={!inputMessage.trim() || isLoading}
              className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-all btn-animate"
              style={{
                display: 'block',
                visibility: 'visible',
                opacity: 1,
                backgroundColor: 'linear-gradient(to right, #2563eb, #9333ea)',
                color: 'white'
              }}
            >
              <Send className="w-5 h-5" />
            </motion.button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChatInterface;
