{% extends "base.html" %}

{% block title %}AI 챗봇 - AI 문서 처리 서버{% endblock %}

{% block content %}
<div class="grid grid-2">
    <!-- 채팅 영역 -->
    <div class="card chat-card">
        <div class="card-header">
            <h2 class="card-title">
                <i class="fas fa-robot"></i> AI 문서 챗봇
            </h2>
            <div class="chat-status">
                <span class="status status-success">
                    <i class="fas fa-circle"></i> 온라인
                </span>
            </div>
        </div>
        
        <div class="chat-container">
            <div class="chat-messages" id="chatMessages">
                <div class="message assistant">
                    <div class="message-content">
                        <i class="fas fa-robot message-icon"></i>
                        <div class="message-text">
                            안녕하세요! 저는 문서 기반 AI 어시스턴트입니다. 
                            업로드된 문서들에 대해 질문하시면 답변해드리겠습니다.
                        </div>
                    </div>
                    <div class="message-time">{{ current_time }}</div>
                </div>
            </div>
            
            <div class="chat-input-area">
                <div class="input-group">
                    <input type="text" class="form-control chat-input" id="messageInput" 
                           placeholder="메시지를 입력하세요..." maxlength="1000">
                    <button type="button" class="btn btn-primary" id="sendBtn" onclick="sendMessage()">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
                <div class="input-options">
                    <label class="checkbox-label">
                        <input type="checkbox" id="useRAG" checked>
                        <i class="fas fa-search"></i> 문서 검색 사용
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" id="forceBoost">
                        <i class="fas fa-rocket"></i> 고성능 모델 사용
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- 설정 및 정보 패널 -->
    <div class="settings-panel">
        <!-- 빠른 질문 -->
        <div class="card">
            <h3><i class="fas fa-lightning-bolt"></i> 빠른 질문</h3>
            <div class="quick-questions">
                <button onclick="askQuickQuestion('전체 문서를 요약해주세요')" class="btn btn-sm btn-outline">
                    문서 요약
                </button>
                <button onclick="askQuickQuestion('주요 키워드를 추출해주세요')" class="btn btn-sm btn-outline">
                    키워드 추출
                </button>
                <button onclick="askQuickQuestion('이 문서의 핵심 내용은 무엇인가요?')" class="btn btn-sm btn-outline">
                    핵심 내용
                </button>
                <button onclick="askQuickQuestion('관련된 다른 문서가 있나요?')" class="btn btn-sm btn-outline">
                    관련 문서
                </button>
            </div>
        </div>

        <!-- 검색 결과 -->
        <div class="card">
            <h3><i class="fas fa-search"></i> 관련 문서 검색</h3>
            <input type="text" class="form-control mb-2" id="searchInput" 
                   placeholder="문서 내용 검색..." onkeyup="searchDocuments(event)">
            <div class="search-results" id="searchResults">
                <p class="text-muted">검색어를 입력하세요</p>
            </div>
        </div>

        <!-- 모델 정보 -->
        <div class="card">
            <h3><i class="fas fa-cog"></i> 모델 설정</h3>
            <div class="model-info">
                <div class="info-item">
                    <strong>기본 모델:</strong> {{ status.base_model }}
                </div>
                <div class="info-item">
                    <strong>부스트 모델:</strong> {{ status.boost_model }}
                </div>
                <div class="info-item">
                    <strong>임베딩 모델:</strong> {{ status.embedding_model }}
                </div>
                <div class="info-item">
                    <strong>인덱스 문서:</strong> {{ status.index_loaded }}개
                </div>
            </div>
        </div>

        <!-- 채팅 기록 관리 -->
        <div class="card">
            <h3><i class="fas fa-history"></i> 대화 관리</h3>
            <div class="chat-controls">
                <button onclick="clearChat()" class="btn btn-sm btn-secondary w-100 mb-2">
                    <i class="fas fa-trash"></i> 대화 기록 삭제
                </button>
                <button onclick="exportChat()" class="btn btn-sm btn-outline w-100">
                    <i class="fas fa-download"></i> 대화 내용 내보내기
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.chat-card {
    height: 600px;
    display: flex;
    flex-direction: column;
}

.chat-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.chat-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.message {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.message.user {
    align-items: flex-end;
}

.message.assistant {
    align-items: flex-start;
}

.message-content {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 80%;
}

.message.user .message-content {
    flex-direction: row-reverse;
}

.message-icon {
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message.user .message-icon {
    background-color: #667eea;
    color: white;
}

.message.assistant .message-icon {
    background-color: #28a745;
    color: white;
}

.message-text {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    line-height: 1.5;
}

.message.user .message-text {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.message-time {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    margin-left: 3rem;
}

.message.user .message-time {
    margin-left: 0;
    margin-right: 3rem;
    text-align: right;
}

.chat-input-area {
    flex-shrink: 0;
}

.input-group {
    display: flex;
    gap: 0.5rem;
}

.input-group .form-control {
    flex: 1;
}

.input-options {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    color: #6c757d;
}

.settings-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quick-questions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-outline {
    background: transparent;
    border: 1px solid #667eea;
    color: #667eea;
    text-align: left;
    padding: 0.5rem;
}

.btn-outline:hover {
    background: #667eea;
    color: white;
}

.search-results {
    max-height: 200px;
    overflow-y: auto;
}

.search-result-item {
    padding: 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: #f8f9fa;
}

.search-result-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.search-result-snippet {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.4;
}

.info-item {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f8f9fa;
}

.info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.chat-controls .btn {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.w-100 { width: 100%; }
.mb-2 { margin-bottom: 0.5rem; }
.text-muted { color: #6c757d; }

/* 로딩 애니메이션 */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.typing-dot {
    width: 8px;
    height: 8px;
    background-color: #6c757d;
    border-radius: 50%;
    animation: typing 1.5s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}
</style>
{% endblock %}

{% block scripts %}
<script>
let chatHistory = [];
let isWaitingForResponse = false;

// DOM 요소들
const chatMessages = document.getElementById('chatMessages');
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');
const useRAGCheckbox = document.getElementById('useRAG');
const forceBoostCheckbox = document.getElementById('forceBoost');

// 페이지 로드 시 초기화
document.addEventListener('DOMContentLoaded', function() {
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });
    
    // URL 파라미터 확인 (특정 문서로 대화하기)
    const urlParams = new URLSearchParams(window.location.search);
    const doc = urlParams.get('doc');
    if (doc) {
        addMessage('assistant', `"${doc}" 문서에 대해 질문해주세요. 어떤 내용이 궁금하신가요?`);
    }
});

// 메시지 전송
async function sendMessage() {
    const message = messageInput.value.trim();
    if (!message || isWaitingForResponse) return;
    
    // 사용자 메시지 추가
    addMessage('user', message);
    messageInput.value = '';
    isWaitingForResponse = true;
    sendBtn.disabled = true;
    
    // 타이핑 인디케이터 표시
    const typingId = addTypingIndicator();
    
    try {
        const response = await fetch('/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-API-Key': '{{ api_key }}'
            },
            body: JSON.stringify({
                messages: chatHistory,
                use_rag: useRAGCheckbox.checked,
                force_boost: forceBoostCheckbox.checked,
                top_k: 5
            })
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        
        // 타이핑 인디케이터 제거
        removeTypingIndicator(typingId);
        
        // AI 응답 추가
        addMessage('assistant', data.response.message?.content || data.response.response || '응답을 받지 못했습니다.');
        
    } catch (error) {
        console.error('Chat error:', error);
        removeTypingIndicator(typingId);
        addMessage('assistant', '죄송합니다. 응답 중 오류가 발생했습니다. 다시 시도해주세요.');
    } finally {
        isWaitingForResponse = false;
        sendBtn.disabled = false;
    }
}

// 메시지 추가
function addMessage(sender, content) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${sender}`;
    
    const now = new Date().toLocaleTimeString('ko-KR', { 
        hour: '2-digit', 
        minute: '2-digit' 
    });
    
    const icon = sender === 'user' ? 'fas fa-user' : 'fas fa-robot';
    
    messageDiv.innerHTML = `
        <div class="message-content">
            <i class="${icon} message-icon"></i>
            <div class="message-text">${content}</div>
        </div>
        <div class="message-time">${now}</div>
    `;
    
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    
    // 채팅 히스토리에 추가
    chatHistory.push({
        role: sender === 'user' ? 'user' : 'assistant',
        content: content
    });
}

// 타이핑 인디케이터 추가
function addTypingIndicator() {
    const typingDiv = document.createElement('div');
    typingDiv.className = 'message assistant';
    typingDiv.id = 'typing-' + Date.now();
    
    typingDiv.innerHTML = `
        <div class="message-content">
            <i class="fas fa-robot message-icon"></i>
            <div class="typing-indicator">
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            </div>
        </div>
    `;
    
    chatMessages.appendChild(typingDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    
    return typingDiv.id;
}

// 타이핑 인디케이터 제거
function removeTypingIndicator(typingId) {
    const typingDiv = document.getElementById(typingId);
    if (typingDiv) {
        typingDiv.remove();
    }
}

// 빠른 질문
function askQuickQuestion(question) {
    messageInput.value = question;
    sendMessage();
}

// 문서 검색
async function searchDocuments(event) {
    if (event.key !== 'Enter') return;
    
    const query = searchInput.value.trim();
    if (!query) {
        searchResults.innerHTML = '<p class="text-muted">검색어를 입력하세요</p>';
        return;
    }
    
    try {
        const response = await fetch('/search', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                query: query,
                top_k: 5
            })
        });
        
        const data = await response.json();
        displaySearchResults(data.results);
        
    } catch (error) {
        console.error('Search error:', error);
        searchResults.innerHTML = '<p class="text-muted">검색 중 오류가 발생했습니다</p>';
    }
}

// 검색 결과 표시
function displaySearchResults(results) {
    if (!results || results.length === 0) {
        searchResults.innerHTML = '<p class="text-muted">검색 결과가 없습니다</p>';
        return;
    }
    
    const resultsHtml = results.map(result => `
        <div class="search-result-item" onclick="useSearchResult('${result.text.replace(/'/g, "\\'")}')">
            <div class="search-result-title">문서 ID: ${result.id}</div>
            <div class="search-result-snippet">${result.text.substring(0, 100)}...</div>
            <small class="text-muted">유사도: ${(result.score * 100).toFixed(1)}%</small>
        </div>
    `).join('');
    
    searchResults.innerHTML = resultsHtml;
}

// 검색 결과 활용
function useSearchResult(text) {
    messageInput.value = `다음 내용에 대해 설명해주세요: "${text.substring(0, 50)}..."`;
}

// 대화 기록 삭제
function clearChat() {
    if (!confirm('정말로 대화 기록을 모두 삭제하시겠습니까?')) return;
    
    chatHistory = [];
    chatMessages.innerHTML = `
        <div class="message assistant">
            <div class="message-content">
                <i class="fas fa-robot message-icon"></i>
                <div class="message-text">
                    안녕하세요! 저는 문서 기반 AI 어시스턴트입니다. 
                    업로드된 문서들에 대해 질문하시면 답변해드리겠습니다.
                </div>
            </div>
            <div class="message-time">${new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}</div>
        </div>
    `;
}

// 대화 내용 내보내기
function exportChat() {
    if (chatHistory.length === 0) {
        showToast('내보낼 대화 내용이 없습니다.', 'info');
        return;
    }
    
    const chatText = chatHistory.map(msg => 
        `${msg.role === 'user' ? '사용자' : 'AI'}: ${msg.content}`
    ).join('\n\n');
    
    const blob = new Blob([chatText], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `chat-export-${new Date().toISOString().slice(0, 10)}.txt`;
    a.click();
    URL.revokeObjectURL(url);
}

// 토스트 알림
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `alert alert-${type}`;
    toast.textContent = message;
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1001;
        min-width: 300px;
        animation: slideIn 0.3s ease;
    `;
    
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => {
            if (document.body.contains(toast)) {
                document.body.removeChild(toast);
            }
        }, 300);
    }, 3000);
}
</script>
{% endblock %}