{% extends "base.html" %}

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

{% block content %}
<div class="documents-section">
    <div class="section-header">
        <h2>📚 Your Documents</h2>
        <p>Manage your uploaded documents and generate study materials.</p>
        <a href="/upload" class="btn btn-primary">📤 Upload New Document</a>
    </div>
    
    <div class="documents-container">
        <div class="documents-list" id="documentsList">
            <!-- Documents will be loaded dynamically -->
            <div class="loading-state">
                <p>Loading documents...</p>
            </div>
        </div>
        
        <div class="no-documents" id="noDocuments" style="display: none;">
            <div class="empty-state">
                <h3>📁 No Documents Yet</h3>
                <p>Upload your first document to start generating study materials!</p>
                <a href="/upload" class="btn btn-primary btn-large">
                    📤 Upload Your First Document
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Load documents when page loads
window.addEventListener('load', function() {
    loadDocuments();
});

async function loadDocuments() {
    const documentsList = document.getElementById('documentsList');
    const noDocuments = document.getElementById('noDocuments');
    
    try {
        // Fetch documents from API
        const response = await fetch('/api/documents/list');
        const data = await response.json();
        
        if (data.documents && data.documents.length > 0) {
            // Show documents
            documentsList.innerHTML = data.documents.map(doc => `
                <div class="document-card" data-doc-id="${doc.id}">
                    <div class="document-info">
                        <h3>📄 ${doc.filename}</h3>
                        <div class="document-meta">
                            <span>📅 Uploaded: ${new Date(doc.upload_date).toLocaleDateString()}</span>
                            <span>📊 ${doc.word_count || 0} words</span>
                        </div>
                    </div>
                    
                    <div class="document-actions">
                        <div class="action-group">
                            <h4>📝 Summaries</h4>
                            <button onclick="generateSummary(${doc.id}, 'extractive')" class="btn-action">
                                Extractive
                            </button>
                            <button onclick="generateSummary(${doc.id}, 'abstractive')" class="btn-action ai-enhanced">
                                🤖 AI Enhanced
                            </button>
                            <button onclick="generateSummary(${doc.id}, 'hybrid')" class="btn-action">
                                Hybrid
                            </button>
                        </div>
                        
                        <div class="action-group">
                            <h4>❓ Questions</h4>
                            <button onclick="generateQuestions(${doc.id}, 'fill_in_blank')" class="btn-action">
                                Fill-in-Blank
                            </button>
                            <button onclick="generateQuestions(${doc.id}, 'multiple_choice')" class="btn-action">
                                Multiple Choice
                            </button>
                            <button onclick="generateQuestions(${doc.id}, 'true_false')" class="btn-action">
                                True/False
                            </button>
                        </div>
                        
                        <div class="action-group">
                            <h4>🃏 Flashcards</h4>
                            <button onclick="generateFlashcards(${doc.id})" class="btn btn-primary">
                                Generate Cards
                            </button>
                            <button onclick="viewFlashcards(${doc.id})" class="btn-action">
                                View Cards
                            </button>
                            <button onclick="window.location.href='/study?doc=${doc.id}'" class="btn btn-success">
                                Study Now
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        } else {
            // No documents
            documentsList.style.display = 'none';
            noDocuments.style.display = 'block';
        }
    } catch (error) {
        console.error('Error loading documents:', error);
        documentsList.innerHTML = '<p style="color: red;">Error loading documents. Please refresh the page.</p>';
    }
}

// Summary generation
async function generateSummary(docId, method) {
    try {
        const button = event.target;
        button.disabled = true;
        button.textContent = 'Generating...';
        
        const response = await fetch(`/summarize/${docId}?method=${method}`, {
            method: 'POST'
        });
        
        if (response.ok) {
            const result = await response.json();
            // Create a better display for the summary
            const summaryWindow = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
            // Enhanced display for Claude AI summaries
            let summaryContent = result.summary;
            
            // Format the summary content for better readability
            if (method === 'abstractive' && summaryContent.includes('Overview')) {
                // Claude's structured format - enhance display
                summaryContent = summaryContent
                    .replace(/Overview:?/gi, '<h3 style="color: #2c3e50; margin-top: 20px;">📋 Overview</h3>')
                    .replace(/Key Topics:?/gi, '<h3 style="color: #2c3e50; margin-top: 20px;">🔑 Key Topics</h3>')
                    .replace(/Conclusion:?/gi, '<h3 style="color: #2c3e50; margin-top: 20px;">💡 Conclusion</h3>')
                    .replace(/(\d+\.)\s+/g, '<br><strong>$1</strong> ')  // Format numbered lists
                    .replace(/•\s+/g, '<br>• ')  // Format bullet points
                    .replace(/\n\n/g, '</p><p>')  // Convert paragraphs
                    .replace(/\n/g, '<br>');  // Convert line breaks
                
                summaryContent = '<p>' + summaryContent + '</p>';
            }
            
            summaryWindow.document.write(`
                <html>
                <head>
                    <title>Summary - ${method}</title>
                    <style>
                        body {
                            font-family: Arial, sans-serif;
                            padding: 20px;
                            line-height: 1.6;
                            max-width: 800px;
                            margin: 0 auto;
                        }
                        h2 {
                            color: #2c3e50;
                            border-bottom: 2px solid #3498db;
                            padding-bottom: 10px;
                        }
                        h3 {
                            color: #34495e;
                            margin-top: 25px;
                            margin-bottom: 15px;
                        }
                        .summary-container {
                            background: #f8f9fa;
                            padding: 20px;
                            border-radius: 8px;
                            margin: 20px 0;
                            border: 1px solid #e9ecef;
                        }
                        .metadata {
                            background: #e3f2fd;
                            padding: 10px;
                            border-radius: 5px;
                            margin-bottom: 20px;
                        }
                        strong {
                            color: #2c3e50;
                        }
                        p {
                            margin-bottom: 12px;
                        }
                        .close-btn {
                            padding: 10px 20px;
                            background: #3498db;
                            color: white;
                            border: none;
                            border-radius: 5px;
                            cursor: pointer;
                            font-size: 16px;
                            margin-top: 20px;
                        }
                        .close-btn:hover {
                            background: #2980b9;
                        }
                        .ai-badge {
                            background: #9c27b0;
                            color: white;
                            padding: 3px 8px;
                            border-radius: 3px;
                            font-size: 12px;
                            margin-left: 10px;
                        }
                    </style>
                </head>
                <body>
                    <h2>
                        📝 ${method.charAt(0).toUpperCase() + method.slice(1)} Summary
                        ${method === 'abstractive' ? '<span class="ai-badge">AI Enhanced</span>' : ''}
                    </h2>
                    <div class="metadata">
                        <strong>Summary Type:</strong> ${method.charAt(0).toUpperCase() + method.slice(1)}<br>
                        <strong>Word count:</strong> ${result.word_count} words
                        ${method === 'abstractive' ? '<br><strong>Powered by:</strong> Claude AI with topic expansion' : ''}
                    </div>
                    <div class="summary-container">
                        ${summaryContent}
                    </div>
                    <button class="close-btn" onclick="window.close()">Close</button>
                </body>
                </html>
            `);
        } else {
            alert('Failed to generate summary. Please try again.');
        }
    } catch (error) {
        console.error('Error generating summary:', error);
        alert('Error generating summary. Please try again.');
    } finally {
        const button = event.target;
        button.disabled = false;
        button.textContent = button.textContent.replace('Generating...', method.charAt(0).toUpperCase() + method.slice(1));
    }
}

// Question generation
async function generateQuestions(docId, type) {
    try {
        const button = event.target;
        button.disabled = true;
        button.textContent = 'Generating...';
        
        const response = await fetch(`/api/questions/generate/document/${docId}?question_type=${type}`, {
            method: 'POST'
        });
        
        if (response.ok) {
            const result = await response.json();
            alert(`Questions generated successfully!\n\nType: ${type}\n\nCheck the console for details.`);
            console.log('Generated questions:', result);
        } else {
            alert('Failed to generate questions. Please try again.');
        }
    } catch (error) {
        console.error('Error generating questions:', error);
        alert('Error generating questions. Please try again.');
    } finally {
        const button = event.target;
        button.disabled = false;
        button.textContent = button.textContent.replace('Generating...', type.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()));
    }
}

// Flashcard generation
async function generateFlashcards(docId) {
    try {
        const button = event.target;
        button.disabled = true;
        button.textContent = 'Generating...';
        
        const response = await fetch(`/api/flashcards/generate/document/${docId}`, {
            method: 'POST'
        });
        
        if (response.ok) {
            const result = await response.json();
            const cardsCreated = result.cards_created || result.total_cards || 0;
            
            // Fetch and display the generated flashcards
            await displayFlashcards(docId, cardsCreated);
        } else {
            alert('Failed to generate flashcards. Please try again.');
        }
    } catch (error) {
        console.error('Error generating flashcards:', error);
        alert('Error generating flashcards. Please try again.');
    } finally {
        const button = event.target;
        button.disabled = false;
        button.textContent = 'Generate Cards';
    }
}

// View existing flashcards
async function viewFlashcards(docId) {
    try {
        const button = event.target;
        button.disabled = true;
        button.textContent = 'Loading...';
        
        await displayFlashcards(docId, null);
    } catch (error) {
        console.error('Error viewing flashcards:', error);
        alert('Error viewing flashcards. Please try again.');
    } finally {
        const button = event.target;
        button.disabled = false;
        button.textContent = 'View Cards';
    }
}

// Display flashcards in a modal
async function displayFlashcards(docId, totalGenerated) {
    try {
        // Fetch the flashcards
        const response = await fetch(`/api/flashcards/document/${docId}`);
        
        if (response.ok) {
            const data = await response.json();
            const flashcards = data.flashcards || [];
            
            // Create modal window
            const modal = window.open('', '_blank', 'width=800,height=600,scrollbars=yes');
            modal.document.write(`
                <html>
                <head>
                    <title>${totalGenerated ? 'Generated' : 'Your'} Flashcards</title>
                    <style>
                        body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
                        h1 { color: #2c3e50; }
                        .success-message { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
                        .flashcard { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
                        .flashcard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
                        .card-type { background: #3498db; color: white; padding: 5px 10px; border-radius: 3px; font-size: 12px; }
                        .difficulty-easy { background: #2ecc71; }
                        .difficulty-medium { background: #f39c12; }
                        .difficulty-hard { background: #e74c3c; }
                        .card-front, .card-back { padding: 10px; }
                        .card-front { font-weight: bold; color: #2c3e50; }
                        .card-back { background: #ecf0f1; border-radius: 5px; margin-top: 10px; }
                        .action-buttons { margin-top: 20px; text-align: center; }
                        button { padding: 10px 20px; margin: 0 10px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
                        .btn-primary { background: #3498db; color: white; }
                        .btn-primary:hover { background: #2980b9; }
                    </style>
                </head>
                <body>
                    <h1>${totalGenerated ? '🎉 Flashcards Generated Successfully!' : '🃏 Your Flashcards'}</h1>
                    ${totalGenerated ? `
                        <div class="success-message">
                            <strong>✅ ${totalGenerated} flashcards created!</strong> Your flashcards are ready for study.
                        </div>
                    ` : ''}
                    
                    <h2>${flashcards.length > 0 ? 'Preview of Flashcards:' : 'No flashcards found'}</h2>
                    <div id="flashcardsContainer">
                        ${flashcards.map((card, index) => `
                            <div class="flashcard">
                                <div class="flashcard-header">
                                    <span>Card ${index + 1} of ${flashcards.length}</span>
                                    <div>
                                        <span class="card-type">${card.type.toUpperCase()}</span>
                                        <span class="card-type difficulty-${card.difficulty}">${card.difficulty.toUpperCase()}</span>
                                    </div>
                                </div>
                                <div class="card-front">Q: ${card.front}</div>
                                <div class="card-back">A: ${card.back}</div>
                            </div>
                        `).join('')}
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn-primary" onclick="window.opener.location.href='/study?doc=${docId}'; window.close();">🚀 Start Studying Now</button>
                        <button onclick="window.close()">Close</button>
                    </div>
                </body>
                </html>
            `);
        } else {
            // If we can't fetch the flashcards, at least show the success message
            alert(`✅ Flashcards generated successfully!\n\n${totalGenerated} cards created and ready for study!\n\nClick "Study Now" to begin studying.`);
        }
    } catch (error) {
        console.error('Error fetching flashcards:', error);
        // Fallback to simple alert
        alert(`✅ Flashcards generated successfully!\n\n${totalGenerated} cards created and ready for study!\n\nClick "Study Now" to begin studying.`);
    }
}
</script>

<style>
.documents-section {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.document-card {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 2px solid #ecf0f1;
}

.document-card:hover {
    border-color: #3498db;
}

.document-info h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.document-meta {
    display: flex;
    gap: 2rem;
    color: #7f8c8d;
    margin-bottom: 1.5rem;
}

.document-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.action-group h4 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.btn-action {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid #bdc3c7;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-action:hover {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn-action.ai-enhanced {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: 1px solid #667eea;
    font-weight: 500;
}

.btn-action.ai-enhanced:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    border-color: #5a6fd8;
    color: white;
}
</style>
{% endblock %}