{% extends "base.html" %}

{% block title %}AI Tutor - AI Study Tool{% endblock %}

{% block content %}
<div class="container">
    <h1>AI-Powered Study Assistant</h1>
    
    <!-- AI Status Check -->
    <div id="ai-status" class="status-card">
        <h3>AI Services Status</h3>
        <div class="loading">Checking AI availability...</div>
    </div>

    <!-- Document Selection -->
    <div class="document-selection-section">
        <h2>Select a Document to Study</h2>
        
        <!-- Search/Filter Bar -->
        <div class="search-container">
            <input type="text" id="document-search" placeholder="🔍 Search documents by name..." class="search-input">
            <span class="search-hint">Type to filter documents</span>
        </div>
        
        <!-- Selected Document Display -->
        <div id="selected-document" class="selected-document" style="display: none;">
            <h3>Currently Selected:</h3>
            <div class="selected-doc-info">
                <span id="selected-doc-name"></span>
                <button onclick="clearSelection()" class="btn btn-secondary btn-sm">Change Document</button>
            </div>
        </div>
        
        <!-- Documents Grid -->
        <div id="documents-grid" class="documents-grid">
            <div class="loading">Loading documents...</div>
        </div>
        
        
        <!-- No Documents Message -->
        <div id="no-documents" class="no-documents" style="display: none;">
            <p>No documents found. <a href="/upload">Upload a document</a> to get started!</p>
        </div>
    </div>

    <!-- AI Analysis Section -->
    <div id="ai-analysis" class="ai-analysis-section" style="display: none;">
        <h2>🤖 AI Analysis & Recommendations</h2>
        <div id="analysis-content" class="analysis-content">
            <div class="loading">Analyzing document...</div>
        </div>
    </div>

    <!-- AI Features Tabs -->
    <div id="ai-features" class="tabs" style="display: none;">
        <div class="tab-buttons">
            <button class="tab-button active" onclick="showTab('explain')">Explain Concepts</button>
            <button class="tab-button" onclick="showTab('practice')">Practice Problems</button>
            <button class="tab-button" onclick="showTab('chat')">Study Chat</button>
            <button class="tab-button" onclick="showTab('plan')">Study Plan</button>
            <button class="tab-button" onclick="showTab('enhanced')">Enhanced Questions</button>
        </div>

        <!-- Explain Concepts Tab -->
        <div id="explain-tab" class="tab-content active">
            <h3>Get Concept Explanations</h3>
            <div class="input-group">
                <input type="text" id="concept-input" placeholder="Enter a concept to explain..." class="form-control">
                <select id="difficulty-level" class="form-control">
                    <option value="beginner">Beginner</option>
                    <option value="intermediate" selected>Intermediate</option>
                    <option value="advanced">Advanced</option>
                </select>
                <button onclick="explainConcept()" class="btn btn-primary">Explain</button>
            </div>
            <div id="explanation-result" class="result-box"></div>
        </div>

        <!-- Practice Problems Tab -->
        <div id="practice-tab" class="tab-content">
            <h3>Generate Practice Problems</h3>
            <div class="input-group">
                <input type="text" id="topic-input" placeholder="Topic for practice problems..." class="form-control">
                <input type="number" id="num-problems" min="1" max="10" value="5" class="form-control" style="width: 100px;">
                <select id="problem-type" class="form-control">
                    <option value="mixed">Mixed</option>
                    <option value="conceptual">Conceptual</option>
                    <option value="calculation">Calculation</option>
                    <option value="application">Application</option>
                </select>
                <button onclick="generatePractice()" class="btn btn-primary">Generate</button>
            </div>
            <div id="practice-result" class="result-box"></div>
        </div>

        <!-- Study Chat Tab -->
        <div id="chat-tab" class="tab-content">
            <h3>Interactive Study Chat</h3>
            
            <!-- Conversation History Section -->
            <div class="conversation-section">
                <div class="conversation-header">
                    <h4>Conversation History</h4>
                    <button onclick="toggleConversationHistory()" class="btn btn-secondary btn-sm">Show/Hide History</button>
                </div>
                <div id="conversation-history" class="conversation-history" style="display: none;">
                    <div class="history-controls">
                        <button onclick="loadConversationHistory()" class="btn btn-info btn-sm">Refresh</button>
                        <input type="text" id="history-search" placeholder="Search conversations..." class="form-control" style="width: 200px; display: inline-block;">
                        <button onclick="searchConversations()" class="btn btn-info btn-sm">Search</button>
                    </div>
                    <div id="conversation-list" class="conversation-list"></div>
                </div>
            </div>
            
            <!-- Current Chat -->
            <div class="current-chat-info">
                <span id="current-conversation-id" style="display: none;"></span>
                <span id="conversation-title"></span>
            </div>
            
            <div id="chat-messages" class="chat-container"></div>
            <div class="input-group">
                <input type="text" id="chat-input" placeholder="Ask a question about your document..." class="form-control">
                <button onclick="sendChatMessage()" class="btn btn-primary">Send</button>
            </div>
        </div>

        <!-- Study Plan Tab -->
        <div id="plan-tab" class="tab-content">
            <h3>Create Personalized Study Plan</h3>
            <div class="form-group">
                <textarea id="study-goals" placeholder="What are your study goals? (e.g., understand key concepts, prepare for exam, etc.)" class="form-control" rows="3"></textarea>
                <input type="text" id="available-time" placeholder="Available time (e.g., 1 week, 3 days)" class="form-control">
                <button onclick="createStudyPlan()" class="btn btn-primary">Create Plan</button>
            </div>
            <div id="plan-result" class="result-box"></div>
        </div>

        <!-- Enhanced Questions Tab -->
        <div id="enhanced-tab" class="tab-content">
            <h3>Generate Enhanced Questions</h3>
            <div class="form-group">
                <h4>Question Distribution:</h4>
                <label>Conceptual: <input type="number" id="q-conceptual" min="0" max="10" value="5" style="width: 50px;"></label>
                <label>Application: <input type="number" id="q-application" min="0" max="10" value="4" style="width: 50px;"></label>
                <label>Critical Thinking: <input type="number" id="q-critical" min="0" max="10" value="3" style="width: 50px;"></label>
                <label>Synthesis: <input type="number" id="q-synthesis" min="0" max="10" value="2" style="width: 50px;"></label>
                <button onclick="generateEnhancedQuestions()" class="btn btn-primary">Generate Questions</button>
            </div>
            <div id="enhanced-result" class="result-box"></div>
        </div>
    </div>
</div>

<style>
.status-card {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.tabs {
    margin-top: 30px;
}

.tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tab-button {
    padding: 10px 20px;
    background-color: #e9ecef;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.tab-button.active {
    background-color: #007bff;
    color: white;
}

.tab-button:hover {
    background-color: #6c757d;
    color: white;
}

.tab-content {
    display: none;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.tab-content.active {
    display: block;
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.result-box {
    margin-top: 20px;
    padding: 15px;
    background-color: white;
    border-radius: 5px;
    min-height: 100px;
}

.chat-container {
    height: 400px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
}

.chat-message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
}

.chat-message.user {
    background-color: #e3f2fd;
    text-align: right;
}

.chat-message.assistant {
    background-color: #f5f5f5;
}

.visual-container {
    background-color: #ffffff;
    border: 2px solid #e3f2fd;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.visual-header {
    background-color: #2196f3;
    color: white;
    padding: 8px 12px;
    border-radius: 4px 4px 0 0;
    margin: -15px -15px 15px -15px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
}

.visual-content {
    font-size: 12px;
    line-height: 1.2;
    color: #2c3e50;
}

.visual-flowchart {
    border-color: #4caf50;
}

.visual-concept_map {
    border-color: #ff9800;
}

.visual-comparison_table {
    border-color: #9c27b0;
}

.visual-diagram {
    border-color: #f44336;
}

.chat-message.has-visual {
    background-color: #f8f9fa;
    border-left: 4px solid #2196f3;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: inline-block;
    margin-right: 15px;
}

.loading {
    color: #666;
    font-style: italic;
}

.success {
    color: #28a745;
}

.error {
    color: #dc3545;
}

.warning {
    color: #ffc107;
}

/* Conversation History Styles */
.conversation-section {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
}

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.conversation-history {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
}

.history-controls {
    margin-bottom: 10px;
}

.conversation-list {
    max-height: 200px;
    overflow-y: auto;
}

.conversation-item {
    padding: 8px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.conversation-item:hover {
    background-color: #e9ecef;
}

.conversation-item.active {
    background-color: #007bff;
    color: white;
}

.current-chat-info {
    margin-bottom: 10px;
    font-style: italic;
    color: #666;
}

/* Document Selection Styles */
.document-selection-section {
    margin: 20px 0;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.search-container {
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    transition: border-color 0.3s;
}

.search-input:focus {
    outline: none;
    border-color: #007bff;
}

.search-hint {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #6c757d;
}

.selected-document {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #e3f2fd;
    border-radius: 8px;
    border: 2px solid #2196f3;
}

.selected-doc-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-doc-info span {
    font-weight: bold;
    color: #1976d2;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.document-card {
    background-color: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.document-card:hover {
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,123,255,0.15);
}

.document-card.selected {
    border-color: #28a745;
    background-color: #f8fff9;
}

.document-card h4 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 18px;
}

.document-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
    color: #6c757d;
}

.document-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.no-documents {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

.no-documents a {
    color: #007bff;
    text-decoration: none;
}

.no-documents a:hover {
    text-decoration: underline;
}

/* AI Analysis Section Styles */
.ai-analysis-section {
    margin: 20px 0;
    padding: 25px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.ai-analysis-section h2 {
    margin-bottom: 20px;
    color: #2c3e50;
}

.analysis-content {
    background: white;
    border-radius: 8px;
    padding: 20px;
}

.analysis-overview {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #e8f4f8;
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.key-topics {
    margin-bottom: 25px;
}

.key-topics h3 {
    margin-bottom: 15px;
    color: #34495e;
}

.topic-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.topic-pill {
    background-color: #3498db;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
}

.ai-suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.suggestion-card {
    background-color: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s;
    cursor: pointer;
}

.suggestion-card:hover {
    border-color: #3498db;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52,152,219,0.15);
}

.suggestion-card h4 {
    margin-bottom: 10px;
    color: #2c3e50;
}

.suggestion-card .description {
    margin-bottom: 15px;
    color: #7f8c8d;
    font-size: 14px;
}

.suggestion-examples {
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggestion-examples li {
    padding: 5px 0;
    color: #34495e;
    font-size: 13px;
}

.suggestion-examples li:before {
    content: "✓ ";
    color: #27ae60;
    font-weight: bold;
}
</style>

<script>
let currentDocumentId = null;
let chatHistory = [];
let currentConversationId = null;
let currentSessionId = null;

// Initialize debug immediately
console.log('AI Tutor script loaded');

// Test if basic elements exist
setTimeout(() => {
    const debugOutput = document.getElementById('debug-output');
    if (debugOutput) {
        debugOutput.innerHTML = 'Script loaded at ' + new Date().toLocaleTimeString();
    }
}, 100);

// Also try loading on window.load as a fallback (like documents.html)
window.addEventListener('load', function() {
    console.log('Window load event fired');
    const gridElement = document.getElementById('documents-grid');
    if (gridElement && gridElement.innerHTML.includes('Loading documents...')) {
        console.log('Documents still not loaded, trying again...');
        loadAITutorDocuments();
    }
});

// Check AI status on load
document.addEventListener('DOMContentLoaded', async () => {
    debugLog('DOMContentLoaded event fired');
    try {
        debugLog('Checking AI status...');
        await checkAIStatus();
        debugLog('AI status check completed');
        
        debugLog('Starting document loading...');
        await loadAITutorDocuments();
        debugLog('Document loading completed');
        
        // Enter key support for chat
        const chatInput = document.getElementById('chat-input');
        if (chatInput) {
            chatInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') sendChatMessage();
            });
        }
    } catch (error) {
        debugLog('ERROR in DOMContentLoaded: ' + error.message);
        console.error('Error in DOMContentLoaded:', error);
    }
});

async function checkAIStatus() {
    console.log('Fetching AI status from /api/ai/ai-status...');
    try {
        const response = await fetch('/api/ai/ai-status');
        console.log('Response status:', response.status);
        const data = await response.json();
        console.log('AI status data:', data);
        
        const statusDiv = document.getElementById('ai-status');
        let statusHTML = '<h3>AI Services Status</h3>';
        
        if (data.claude_ai.available) {
            statusHTML += '<p class="success">✅ Claude AI: Available (Advanced features enabled)</p>';
        } else {
            statusHTML += '<p class="warning">⚠️ Claude AI: Not configured (Add ANTHROPIC_API_KEY for advanced features)</p>';
        }
        
        if (data.enhanced_questions.available) {
            statusHTML += '<p class="success">✅ Enhanced Questions: Available (Using ' + data.enhanced_questions.model + ')</p>';
        } else {
            statusHTML += '<p class="warning">⚠️ Enhanced Questions: Using basic mode</p>';
        }
        
        statusHTML += '<p class="success">✅ Basic Features: Available</p>';
        
        statusDiv.innerHTML = statusHTML;
    } catch (error) {
        console.error('Error checking AI status:', error);
        document.getElementById('ai-status').innerHTML = '<p class="error">Error checking AI status: ' + error.message + '</p>';
    }
}

function debugLog(message) {
    console.log(message);
    const debugOutput = document.getElementById('debug-output');
    if (debugOutput) {
        debugOutput.innerHTML += '<br>' + new Date().toLocaleTimeString() + ': ' + message;
    }
}

async function testAPI() {
    debugLog('Testing API directly...');
    try {
        const response = await fetch('/api/documents/list');
        debugLog('API Response status: ' + response.status);
        const text = await response.text();
        debugLog('API Response text: ' + text.substring(0, 200) + '...');
    } catch (error) {
        debugLog('API Test ERROR: ' + error.message);
    }
}

// Renamed to avoid conflict with main.js loadDocuments function
async function loadAITutorDocuments() {
    debugLog('Starting loadAITutorDocuments function');
    const gridElement = document.getElementById('documents-grid');
    const noDocsElement = document.getElementById('no-documents');
    
    debugLog('Grid element found: ' + !!gridElement);
    debugLog('No docs element found: ' + !!noDocsElement);
    
    // Check if elements exist before proceeding
    if (!gridElement || !noDocsElement) {
        debugLog('ERROR: Required elements not found!');
        console.error('Grid element:', gridElement, 'No docs element:', noDocsElement);
        return;
    }
    
    try {
        debugLog('Fetching from /api/documents/list');
        debugLog('Current URL: ' + window.location.href);
        const response = await fetch('/api/documents/list');
        debugLog('Response status: ' + response.status);
        
        const data = await response.json();
        debugLog('Data received: ' + JSON.stringify(data).substring(0, 100) + '...');
        
        const documents = data.documents || [];
        debugLog('Documents array length: ' + documents.length);
        
        if (documents.length === 0) {
            gridElement.style.display = 'none';
            noDocsElement.style.display = 'block';
            return;
        }
        
        // Store documents globally for search
        window.allDocuments = documents;
        
        // Display documents as cards
        displayDocuments(documents);
        
        // Set up search functionality
        const searchInput = document.getElementById('document-search');
        searchInput.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            const filtered = documents.filter(doc => 
                doc.filename.toLowerCase().includes(searchTerm)
            );
            displayDocuments(filtered);
        });
        
    } catch (error) {
        console.error('Error loading documents:', error);
        debugLog('ERROR: ' + error.message);
        debugLog('Full error: ' + JSON.stringify(error));
        gridElement.innerHTML = '<div class="error">Error loading documents: ' + error.message + '</div>';
    }
}

function displayDocuments(documents) {
    debugLog('displayDocuments called with ' + documents.length + ' documents');
    const gridElement = document.getElementById('documents-grid');
    const noDocsElement = document.getElementById('no-documents');
    
    if (documents.length === 0) {
        debugLog('No documents to display');
        gridElement.innerHTML = '<div class="no-results">No documents match your search.</div>';
        return;
    }
    
    debugLog('Setting grid display and generating cards');
    gridElement.style.display = 'grid';
    noDocsElement.style.display = 'none';
    
    gridElement.innerHTML = documents.map(doc => `
        <div class="document-card ${doc.id === currentDocumentId ? 'selected' : ''}" 
             data-doc-id="${doc.id}" 
             onclick="selectDocument(${doc.id}, '${doc.filename.replace(/'/g, "\\'")}')">
            <h4>📄 ${doc.filename}</h4>
            <div class="document-meta">
                <span>📅 ${new Date(doc.upload_date).toLocaleDateString()}</span>
                <span>📊 ${doc.word_count || 0} words</span>
            </div>
        </div>
    `).join('');
}

async function selectDocument(docId, docName) {
    currentDocumentId = docId;
    
    // Update UI to show selected document
    document.getElementById('selected-document').style.display = 'block';
    document.getElementById('selected-doc-name').textContent = docName;
    
    // Update card styles
    document.querySelectorAll('.document-card').forEach(card => {
        if (parseInt(card.dataset.docId) === docId) {
            card.classList.add('selected');
        } else {
            card.classList.remove('selected');
        }
    });
    
    // Show AI analysis section
    const analysisSection = document.getElementById('ai-analysis');
    analysisSection.style.display = 'block';
    analysisSection.scrollIntoView({ behavior: 'smooth' });
    
    // Call AI to analyze document
    await analyzeDocument(docId);
    
    // Show AI features
    document.getElementById('ai-features').style.display = 'block';
    resetConversation(); // Reset conversation state
}

async function analyzeDocument(docId) {
    const analysisContent = document.getElementById('analysis-content');
    analysisContent.innerHTML = '<div class="loading">🤖 Analyzing document content...</div>';
    
    try {
        const response = await fetch('/api/ai/analyze-document', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ document_id: docId })
        });
        
        const data = await response.json();
        
        if (data.status === 'success') {
            displayAnalysis(data.analysis);
        } else {
            analysisContent.innerHTML = '<div class="error">Error analyzing document</div>';
        }
    } catch (error) {
        console.error('Error analyzing document:', error);
        analysisContent.innerHTML = '<div class="error">Error analyzing document</div>';
    }
}

function displayAnalysis(analysis) {
    const analysisContent = document.getElementById('analysis-content');
    
    let html = `
        <div class="analysis-overview">
            <p>${analysis.document_overview}</p>
        </div>
    `;
    
    // Display key topics if available
    if (analysis.key_topics && analysis.key_topics.length > 0) {
        html += `
            <div class="key-topics">
                <h3>🎯 Key Topics Identified</h3>
                <div class="topic-pills">
                    ${analysis.key_topics.map(topic => `<span class="topic-pill">${topic}</span>`).join('')}
                </div>
            </div>
        `;
    }
    
    // Display AI suggestions
    html += '<h3>📚 How I Can Help You Study</h3><div class="ai-suggestions">';
    
    for (const [key, suggestion] of Object.entries(analysis.suggestions)) {
        html += `
            <div class="suggestion-card" onclick="showTab('${key.replace('_', '')}')">
                <h4>${suggestion.title}</h4>
                <p class="description">${suggestion.description}</p>
                <ul class="suggestion-examples">
                    ${suggestion.examples.map(ex => `<li>${ex}</li>`).join('')}
                </ul>
                ${suggestion.sample_concepts ? `
                    <div style="margin-top: 10px; font-size: 12px; color: #7f8c8d;">
                        <strong>Sample topics:</strong> ${suggestion.sample_concepts.join(', ')}
                    </div>
                ` : ''}
            </div>
        `;
    }
    
    html += '</div>';
    analysisContent.innerHTML = html;
}

function clearSelection() {
    currentDocumentId = null;
    document.getElementById('selected-document').style.display = 'none';
    document.getElementById('ai-features').style.display = 'none';
    document.querySelectorAll('.document-card').forEach(card => {
        card.classList.remove('selected');
    });
    
    // Clear search
    document.getElementById('document-search').value = '';
    displayDocuments(window.allDocuments || []);
}

function showTab(tabName) {
    // Hide all tabs
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });
    document.querySelectorAll('.tab-button').forEach(btn => {
        btn.classList.remove('active');
    });
    
    // Show selected tab
    document.getElementById(tabName + '-tab').classList.add('active');
    event.target.classList.add('active');
}

async function explainConcept() {
    const concept = document.getElementById('concept-input').value;
    const difficulty = document.getElementById('difficulty-level').value;
    
    if (!concept || !currentDocumentId) return;
    
    const resultDiv = document.getElementById('explanation-result');
    resultDiv.innerHTML = '<div class="loading">Generating explanation...</div>';
    
    try {
        const response = await fetch('/api/ai/explain-concept', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                document_id: currentDocumentId,
                concept: concept,
                difficulty_level: difficulty
            })
        });
        
        const data = await response.json();
        
        if (data.status === 'success') {
            resultDiv.innerHTML = `
                <h4>Explanation of "${concept}"</h4>
                <div style="white-space: pre-wrap;">${data.result.explanation}</div>
            `;
        } else {
            resultDiv.innerHTML = `<div class="warning">${data.message || 'Could not generate explanation'}</div>`;
        }
    } catch (error) {
        resultDiv.innerHTML = '<div class="error">Error: ' + error.message + '</div>';
    }
}

async function generatePractice() {
    const topic = document.getElementById('topic-input').value;
    const numProblems = document.getElementById('num-problems').value;
    const problemType = document.getElementById('problem-type').value;
    
    if (!topic || !currentDocumentId) return;
    
    const resultDiv = document.getElementById('practice-result');
    resultDiv.innerHTML = '<div class="loading">Generating practice problems...</div>';
    
    try {
        const response = await fetch('/api/ai/practice-problems', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                document_id: currentDocumentId,
                topic: topic,
                num_problems: parseInt(numProblems),
                problem_type: problemType
            })
        });
        
        const data = await response.json();
        
        if (data.status === 'success' || data.status === 'fallback') {
            let html = '<h4>Practice Problems</h4>';
            
            if (data.result.problems) {
                data.result.problems.forEach((problem, index) => {
                    html += `
                        <div class="problem-card">
                            <h5>Problem ${index + 1}</h5>
                            <p><strong>Question:</strong> ${problem.problem}</p>
                            ${problem.options ? '<p><strong>Options:</strong><br>' + problem.options.join('<br>') + '</p>' : ''}
                            <details>
                                <summary>Show Answer</summary>
                                <p><strong>Answer:</strong> ${problem.answer}</p>
                                ${problem.explanation ? '<p><strong>Explanation:</strong> ' + problem.explanation + '</p>' : ''}
                            </details>
                        </div>
                    `;
                });
            } else {
                html += '<p>Generated questions using enhanced generator</p>';
                html += '<pre>' + JSON.stringify(data.result, null, 2) + '</pre>';
            }
            
            resultDiv.innerHTML = html;
        } else {
            resultDiv.innerHTML = `<div class="warning">${data.message || 'Could not generate problems'}</div>`;
        }
    } catch (error) {
        resultDiv.innerHTML = '<div class="error">Error: ' + error.message + '</div>';
    }
}

async function sendChatMessage() {
    const input = document.getElementById('chat-input');
    const question = input.value.trim();
    
    if (!question || !currentDocumentId) return;
    
    const chatDiv = document.getElementById('chat-messages');
    
    // Add user message
    chatDiv.innerHTML += `<div class="chat-message user">${question}</div>`;
    input.value = '';
    
    // Add loading message
    chatDiv.innerHTML += '<div class="chat-message assistant loading">Thinking...</div>';
    chatDiv.scrollTop = chatDiv.scrollHeight;
    
    try {
        const requestBody = {
            document_id: currentDocumentId,
            question: question,
            chat_history: chatHistory
        };
        
        // Include conversation tracking
        if (currentConversationId) {
            requestBody.conversation_id = currentConversationId;
        }
        if (currentSessionId) {
            requestBody.session_id = currentSessionId;
        }
        
        const response = await fetch('/api/ai/study-chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(requestBody)
        });
        
        const data = await response.json();
        
        // Remove loading message
        chatDiv.removeChild(chatDiv.lastChild);
        
        if (data.status === 'success') {
            chatDiv.innerHTML += `<div class="chat-message assistant">${data.result.answer}</div>`;
            
            // Update conversation tracking
            if (data.conversation_id) {
                currentConversationId = data.conversation_id;
                currentSessionId = data.session_id;
                
                // Update conversation title display
                const titleElement = document.getElementById('conversation-title');
                if (titleElement) {
                    titleElement.textContent = `Active conversation with AI tutor`;
                }
            }
            
            // Update chat history
            chatHistory.push({ role: 'user', content: question });
            chatHistory.push({ role: 'assistant', content: data.result.answer });
            
            // Refresh conversation list if visible
            if (document.getElementById('conversation-history').style.display !== 'none') {
                loadConversationHistory();
            }
        } else {
            chatDiv.innerHTML += `<div class="chat-message assistant error">${data.message || 'Chat not available'}</div>`;
        }
    } catch (error) {
        chatDiv.removeChild(chatDiv.lastChild);
        chatDiv.innerHTML += '<div class="chat-message assistant error">Error: ' + error.message + '</div>';
    }
    
    chatDiv.scrollTop = chatDiv.scrollHeight;
}

// Enter key support for chat - moved inside main DOMContentLoaded handler

async function createStudyPlan() {
    const goals = document.getElementById('study-goals').value;
    const time = document.getElementById('available-time').value || '1 week';
    
    if (!goals || !currentDocumentId) return;
    
    const resultDiv = document.getElementById('plan-result');
    resultDiv.innerHTML = '<div class="loading">Creating your personalized study plan...</div>';
    
    try {
        const response = await fetch('/api/ai/study-plan', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                document_id: currentDocumentId,
                study_goals: goals,
                available_time: time
            })
        });
        
        const data = await response.json();
        
        if (data.status === 'success') {
            resultDiv.innerHTML = `
                <h4>Your Personalized Study Plan</h4>
                <div style="white-space: pre-wrap;">${data.result.plan}</div>
            `;
        } else if (data.status === 'fallback') {
            resultDiv.innerHTML = `
                <h4>Basic Study Plan</h4>
                <div>${Object.entries(data.basic_plan).map(([day, task]) => 
                    `<p><strong>${day}:</strong> ${task}</p>`
                ).join('')}</div>
            `;
        }
    } catch (error) {
        resultDiv.innerHTML = '<div class="error">Error: ' + error.message + '</div>';
    }
}

async function generateEnhancedQuestions() {
    const distribution = {
        conceptual: parseInt(document.getElementById('q-conceptual').value),
        application: parseInt(document.getElementById('q-application').value),
        critical_thinking: parseInt(document.getElementById('q-critical').value),
        synthesis: parseInt(document.getElementById('q-synthesis').value)
    };
    
    if (!currentDocumentId) return;
    
    const resultDiv = document.getElementById('enhanced-result');
    resultDiv.innerHTML = '<div class="loading">Generating enhanced questions...</div>';
    
    try {
        const response = await fetch('/api/ai/enhanced-questions', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                document_id: currentDocumentId,
                question_distribution: distribution
            })
        });
        
        const data = await response.json();
        
        if (data.status === 'success') {
            let html = '<h4>Enhanced Questions</h4>';
            
            Object.entries(data.result.questions).forEach(([type, questions]) => {
                if (questions.length > 0) {
                    html += `<h5>${type.charAt(0).toUpperCase() + type.slice(1)} Questions (${questions.length})</h5>`;
                    questions.forEach((q, i) => {
                        html += `
                            <div class="question-card">
                                <p><strong>Q${i+1}:</strong> ${q.question}</p>
                                <p><em>Difficulty: ${q.difficulty}</em></p>
                                ${q.context ? '<details><summary>Context</summary><p>' + q.context + '</p></details>' : ''}
                            </div>
                        `;
                    });
                }
            });
            
            html += `<p><strong>Total Questions:</strong> ${data.result.total_count}</p>`;
            html += `<p><strong>Model Used:</strong> ${data.result.model_used}</p>`;
            
            resultDiv.innerHTML = html;
        }
    } catch (error) {
        resultDiv.innerHTML = '<div class="error">Error: ' + error.message + '</div>';
    }
}
</script>

<style>
.problem-card, .question-card {
    background-color: #f8f9fa;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

details {
    margin-top: 10px;
}

summary {
    cursor: pointer;
    color: #007bff;
}
</style>

<script>
// Conversation History Functions
function toggleConversationHistory() {
    const historyDiv = document.getElementById('conversation-history');
    if (historyDiv.style.display === 'none') {
        historyDiv.style.display = 'block';
        loadConversationHistory();
    } else {
        historyDiv.style.display = 'none';
    }
}

async function loadConversationHistory() {
    const listDiv = document.getElementById('conversation-list');
    listDiv.innerHTML = '<p class="loading">Loading conversations...</p>';
    
    try {
        const url = currentDocumentId ? 
            `/api/ai/conversations?document_id=${currentDocumentId}&limit=20` : 
            '/api/ai/conversations?limit=20';
            
        const response = await fetch(url);
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const data = await response.json();
        
        if (data.status === 'success' && data.conversations && data.conversations.length > 0) {
            listDiv.innerHTML = data.conversations.map(conv => `
                <div class="conversation-item ${conv.id === currentConversationId ? 'active' : ''}" 
                     onclick="loadConversation(${conv.id})">
                    <strong>${conv.title || 'Untitled Conversation'}</strong><br>
                    <small>${new Date(conv.last_message_date).toLocaleString()}</small><br>
                    <small>${conv.message_count} messages</small>
                </div>
            `).join('');
        } else if (data.status === 'error') {
            listDiv.innerHTML = `<p class="warning">${data.message || 'Error loading conversations'}</p>`;
        } else {
            listDiv.innerHTML = '<p>No conversation history found. Start chatting to create your first conversation!</p>';
        }
    } catch (error) {
        console.error('Error loading conversation history:', error);
        listDiv.innerHTML = '<p class="error">Unable to load conversation history. Please try again.</p>';
    }
}

async function loadConversation(conversationId) {
    try {
        const response = await fetch(`/api/ai/conversations/${conversationId}`);
        const data = await response.json();
        
        if (data.status === 'success') {
            const chatDiv = document.getElementById('chat-messages');
            chatDiv.innerHTML = '';
            
            // Load all messages
            data.messages.forEach(msg => {
                chatDiv.innerHTML += `<div class="chat-message ${msg.role}">${msg.content}</div>`;
            });
            
            // Update current conversation tracking
            currentConversationId = conversationId;
            currentSessionId = data.conversation.session_id;
            
            // Update title display
            const titleElement = document.getElementById('conversation-title');
            if (titleElement) {
                titleElement.textContent = `Current conversation: ${data.conversation.title}`;
            }
            
            // Update chat history for context
            chatHistory = data.messages.map(msg => ({
                role: msg.role,
                content: msg.content
            }));
            
            // Scroll to bottom
            chatDiv.scrollTop = chatDiv.scrollHeight;
            
            // Update active conversation in list
            document.querySelectorAll('.conversation-item').forEach(item => {
                item.classList.remove('active');
            });
            event.target.closest('.conversation-item').classList.add('active');
        }
    } catch (error) {
        console.error('Error loading conversation:', error);
    }
}

async function searchConversations() {
    const searchTerm = document.getElementById('history-search').value.trim();
    if (!searchTerm) return;
    
    try {
        const response = await fetch('/api/ai/conversations/search', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `search_term=${encodeURIComponent(searchTerm)}&limit=20`
        });
        
        const data = await response.json();
        const listDiv = document.getElementById('conversation-list');
        
        if (data.status === 'success' && data.results.length > 0) {
            listDiv.innerHTML = data.results.map(conv => `
                <div class="conversation-item" onclick="loadConversation(${conv.id})">
                    <strong>${conv.title}</strong><br>
                    <small>${new Date(conv.last_message_date).toLocaleString()}</small><br>
                    <small>${conv.message_count} messages</small>
                </div>
            `).join('');
        } else {
            listDiv.innerHTML = '<p>No conversations found matching your search</p>';
        }
    } catch (error) {
        console.error('Error searching conversations:', error);
        document.getElementById('conversation-list').innerHTML = '<p class="error">Error searching conversations</p>';
    }
}

// Reset conversation when switching documents
function resetConversation() {
    currentConversationId = null;
    currentSessionId = null;
    chatHistory = [];
    document.getElementById('chat-messages').innerHTML = '';
    document.getElementById('conversation-title').textContent = '';
    
    // Hide conversation history
    document.getElementById('conversation-history').style.display = 'none';
}
</script>
{% endblock %}