src/templates/projects.html

{% extends "base.html" %}

{% block title %}ResearchMate - Projects{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- Projects Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h2 text-primary-custom">
                <i class="fas fa-project-diagram me-2 text-success"></i>Research Projects
            </h1>
            <button class="btn btn-success shadow-sm" data-bs-toggle="modal" data-bs-target="#createProjectModal">
                <i class="fas fa-plus me-2"></i>Create New Project
            </button>
        </div>

        <!-- Projects List -->
        <div id="projects-container">
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading projects...</span>
                </div>
                <p class="mt-3 text-muted">Loading projects...</p>
            </div>
        </div>
    </div>
</div>

<!-- Create Project Modal -->
<div class="modal fade" id="createProjectModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content shadow-lg" style="color: #222;">
            <div class="modal-header" style="background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: #222;">
                <h5 class="modal-title">
                    <i class="fas fa-plus me-2"></i>Create New Project
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="create-project-form">
                    <div class="mb-3">
                        <label for="project-name" class="form-label fw-bold">Project Name</label>
                        <input type="text" class="form-control" id="project-name" name="name" 
                               placeholder="e.g., Transformer Models in NLP" required>
                        <div class="form-text">
                            <i class="fas fa-info-circle me-1 text-info"></i>
                            Choose a descriptive name for your research project
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="research-question" class="form-label fw-bold">Research Question</label>
                        <textarea class="form-control" id="research-question" name="research_question" rows="3"
                                  placeholder="e.g., How do transformer models improve performance in natural language processing tasks?"
                                  required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="keywords" class="form-label">Keywords (comma-separated)</label>
                        <input type="text" class="form-control" id="keywords" name="keywords" 
                               placeholder="e.g., transformer, attention, NLP, neural networks" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" form="create-project-form" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Create Project
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Project Details Modal -->
<div class="modal fade" id="projectDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-project-diagram me-2"></i>Project Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="project-details-content">
                    <!-- Project details will be loaded here -->
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const createProjectForm = document.getElementById('create-project-form');
    const projectsContainer = document.getElementById('projects-container');
    
    // Load projects on page load
    loadProjects();

    // Create project form handler
    createProjectForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const name = document.getElementById('project-name').value;
        const researchQuestion = document.getElementById('research-question').value;
        const keywords = document.getElementById('keywords').value.split(',').map(k => k.trim());
        
        createProject(name, researchQuestion, keywords);
    });

    function loadProjects() {
        apiRequest('/api/projects', { credentials: 'include' })
            .then(data => {
                console.log('Projects API response:', data); // Debug log
                if (data.success) {
                    displayProjects(data.projects);
                } else {
                    displayError(data.error || 'Failed to load projects');
                }
            })
            .catch(error => {
                console.error('Projects loading error:', error); // Debug log
                displayError('Network error: ' + error.message);
            });
    }

    function createProject(name, researchQuestion, keywords) {
        const submitBtn = document.querySelector('button[form="create-project-form"]') || 
                          document.querySelector('#create-project-form button[type="submit"]') ||
                          document.querySelector('.modal-footer button[type="submit"]');
        const originalText = submitBtn ? submitBtn.innerHTML : '';
        
        if (submitBtn) {
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Creating...';
            submitBtn.disabled = true;
        }

        apiRequest('/api/projects', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include',
            body: JSON.stringify({
                name: name,
                research_question: researchQuestion,
                keywords: keywords
            })
        })
        .then(data => {
            if (data.success) {
                // Close modal and reset form
                const modal = bootstrap.Modal.getInstance(document.getElementById('createProjectModal'));
                modal.hide();
                createProjectForm.reset();
                
                // Reload projects
                loadProjects();
                
                // Show success message
                showAlert('success', 'Project created successfully!');
            } else {
                showAlert('danger', data.error || 'Failed to create project');
            }
        })
        .catch(error => {
            showAlert('danger', 'Network error: ' + error.message);
        })
        .finally(() => {
            if (submitBtn) {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }
        });
    }

    function displayProjects(projects) {
        console.log('Displaying projects:', projects); // Debug log
        
        if (!projects || projects.length === 0) {
            projectsContainer.innerHTML = `
                <div class="text-center py-5">
                    <i class="fas fa-project-diagram fa-3x text-muted mb-3"></i>
                    <h4 class="text-muted">No projects yet</h4>
                    <p class="text-muted">Create your first research project to get started!</p>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createProjectModal">
                        <i class="fas fa-plus me-2"></i>Create Project
                    </button>
                </div>
            `;
            return;
        }

        const html = `
    <div class="row">
        ${projects.map(project => `
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">${escapeHtml(project.name || 'Untitled Project')}</h5>
                        <p class="card-text">
                            <small class="text-muted">${escapeHtml(project.research_question || 'No research question')}</small>
                        </p>
                        <div class="mb-2">
                            <span class="badge bg-${project.status === 'active' ? 'success' : 'secondary'} me-2">
                                ${project.status || 'unknown'}
                            </span>
                            <span class="badge bg-info">${(project.papers || []).length} papers</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted">
                                Created: ${new Date(project.created_at).toLocaleDateString()}
                            </small>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-primary" onclick="viewProject('${project.id}')">
                                    <i class="fas fa-eye me-1"></i>View
                                </button>
                                <button class="btn btn-sm btn-outline-success" onclick="searchLiterature('${project.id}')">
                                    <i class="fas fa-search me-1"></i>Search
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `).join('')}
    </div>
`;

projectsContainer.innerHTML = html;
    }

    function displayError(message) {
        projectsContainer.innerHTML = `
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Error:</strong> ${message}
            </div>
        `;
    }

    function showAlert(type, message, duration = 10000) {
        const alert = document.createElement('div');
        alert.className = `alert alert-${type} alert-dismissible fade show`;
        alert.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check' : 'exclamation-triangle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.querySelector('.container').insertBefore(alert, document.querySelector('.container').firstChild);
        
        // Store reference to current alert
        window.currentActiveAlert = alert;
        // Only auto-dismiss if duration > 0
        if (duration > 0) {
            setTimeout(() => {
                if (alert.parentNode) {
                    alert.remove();
                    if (window.currentActiveAlert === alert) {
                        window.currentActiveAlert = null;
                    }
                }
            }, duration);
        }
    }

    // Global functions for project actions
    window.viewProject = function(projectId) {
        apiRequest(`/api/projects/${projectId}`, { credentials: 'include' })
            .then(data => {
                if (data.success) {
                    displayProjectDetails(data.project);
                } else {
                    showAlert('danger', data.error || 'Failed to load project');
                }
            })
            .catch(error => {
                showAlert('danger', 'Network error: ' + error.message);
            });
    };

    window.searchLiterature = function(projectId) {
        // Find the button that was clicked and show loading state
        const button = event.target.closest('button');
        const originalText = button ? button.innerHTML : '';
        
        if (button) {
            button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Searching...';
            button.disabled = true;
            button.classList.add('btn-warning');
            button.classList.remove('btn-success', 'btn-outline-success');
        }
        
        // Show persistent loading message (no auto-dismiss)
        showAlert('info', 'Literature search in progress... This may take a few minutes.', 0); // 0 = no auto-dismiss
        
        apiRequest(`/api/projects/${projectId}/search`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include'
        })
        .then(data => {
            // Remove loading alert if present
            if (window.currentActiveAlert && window.currentActiveAlert.parentNode) {
                window.currentActiveAlert.remove();
                window.currentActiveAlert = null;
            }
            if (data.success) {
                showAlert('success', `Found ${data.papers_found || 0} papers for the project!`);
                loadProjects(); // Reload to show updated paper count
                // Display search results if available
                if (data.papers && data.papers.length > 0) {
                    displaySearchResults(data.papers, projectId);
                }
            } else {
                showAlert('danger', data.error || 'Literature search failed');
            }
        })
        .catch(error => {
            showAlert('danger', 'Network error: ' + error.message);
        })
        .finally(() => {
            // Restore button state
            if (button) {
                button.innerHTML = originalText;
                button.disabled = false;
                button.classList.remove('btn-warning');
                button.classList.add('btn-success');
            }
        });
    };

    function displayProjectDetails(project) {
        const detailsContent = document.getElementById('project-details-content');
        
        detailsContent.innerHTML = `
            <div class="mb-3">
                <h6 class="text-primary">Project Name:</h6>
                <p>${project.name}</p>
            </div>
            <div class="mb-3">
                <h6 class="text-primary">Research Question:</h6>
                <p>${project.research_question}</p>
            </div>
            <div class="mb-3">
                <h6 class="text-primary">Keywords:</h6>
                <div>
                    ${project.keywords.map(keyword => `<span class="badge bg-secondary me-1">${keyword}</span>`).join('')}
                </div>
            </div>
            <div class="mb-3">
                <h6 class="text-primary">Status:</h6>
                <span class="badge bg-${project.status === 'active' ? 'success' : 'secondary'}">${project.status}</span>
            </div>
            <div class="mb-3">
                <h6 class="text-primary">Papers:</h6>
                <p>${project.papers ? project.papers.length : 0} papers collected</p>
            </div>
            <div class="mb-3">
                <h6 class="text-primary">Created:</h6>
                <p>${new Date(project.created_at).toLocaleString()}</p>
            </div>
            <div class="d-flex gap-2">
                <button class="btn btn-success" onclick="searchLiterature('${project.id}')">
                    <i class="fas fa-search me-2"></i>Search Literature
                </button>
                <button class="btn btn-info" onclick="analyzeProject('${project.id}')">
                    <i class="fas fa-chart-bar me-2"></i>Analyze
                </button>
                <button class="btn btn-warning" onclick="generateReview('${project.id}')">
                    <i class="fas fa-file-alt me-2"></i>Generate Review
                </button>
            </div>
        `;
        
        const modal = new bootstrap.Modal(document.getElementById('projectDetailsModal'));
        modal.show();
    }

    window.analyzeProject = function(projectId) {
        // Find the button that was clicked and show loading state
        const button = event.target.closest('button');
        const originalText = button ? button.innerHTML : '';
        
        if (button) {
            button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Analyzing...';
            button.disabled = true;
            button.classList.add('btn-warning');
            button.classList.remove('btn-info', 'btn-outline-info');
        }
        
        showAlert('info', 'Analyzing project data... This may take a few minutes.', 0);
        
        apiRequest(`/api/projects/${projectId}/analyze`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include'
        })
        .then(data => {
            // Remove loading alert if present
            if (window.currentActiveAlert && window.currentActiveAlert.parentNode) {
                window.currentActiveAlert.remove();
                window.currentActiveAlert = null;
            }
            if (data.success) {
                showAlert('success', 'Project analysis completed!');
                // Display analysis results
                if (data.analysis) {
                    displayAnalysisResults(data.analysis, projectId);
                }
            } else {
                showAlert('danger', data.error || 'Analysis failed');
            }
        })
        .catch(error => {
            showAlert('danger', 'Network error: ' + error.message);
        })
        .finally(() => {
            // Restore button state
            if (button) {
                button.innerHTML = originalText;
                button.disabled = false;
                button.classList.remove('btn-warning');
                button.classList.add('btn-info');
            }
        });
    };

    window.generateReview = function(projectId) {
        // Find the button that was clicked and show loading state
        const button = event.target.closest('button');
        const originalText = button ? button.innerHTML : '';
        
        if (button) {
            button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Generating...';
            button.disabled = true;
            button.classList.add('btn-info');
            button.classList.remove('btn-warning', 'btn-outline-warning');
        }
        
        showAlert('info', 'Generating literature review... This may take several minutes.', 0); // 0 = no auto-dismiss
        
        apiRequest(`/api/projects/${projectId}/review`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include'
        })
        .then(data => {
            console.log('Review response:', data); // Debug log
            // Remove loading alert if present
            if (window.currentActiveAlert && window.currentActiveAlert.parentNode) {
                window.currentActiveAlert.remove();
                window.currentActiveAlert = null;
            }
            if (data.success) {
                showAlert('success', 'Literature review generated!');
                // Display the generated review
                if (data.review) {
                    console.log('Review data:', data.review); // Debug log
                    displayLiteratureReview(data.review, projectId);
                } else {
                    showAlert('warning', 'Review generated but no content received');
                }
            } else {
                showAlert('danger', data.error || 'Review generation failed');
            }
        })
        .catch(error => {
            showAlert('danger', 'Network error: ' + error.message);
        })
        .finally(() => {
            // Restore button state
            if (button) {
                button.innerHTML = originalText;
                button.disabled = false;
                button.classList.remove('btn-info');
                button.classList.add('btn-warning');
            }
        });
    };

    // Functions to display results
    function displaySearchResults(papers, projectId) {
        // Defensive: avoid nested template literals and ensure all dynamic content is escaped
        const papersHtml = papers.map(function(paper) {
            const title = escapeHtml(paper.title || 'Untitled');
            const authors = escapeHtml(paper.authors || 'Unknown authors');
            const year = escapeHtml(paper.year || 'Unknown year');
            const abstract = escapeHtml((paper.abstract || 'No abstract available').substring(0, 150));
            let urlLink = '';
            if (paper.url) {
                urlLink = '<a href="' + escapeHtml(paper.url) + '" target="_blank" class="btn btn-sm btn-outline-primary">' +
                    '<i class="fas fa-external-link-alt me-1"></i>View Paper' +
                    '</a>';
            }
            return [
                '<div class="col-md-6 mb-3">',
                '  <div class="card h-100">',
                '    <div class="card-body">',
                '      <h6 class="card-title">' + title + '</h6>',
                '      <p class="text-muted small mb-2">',
                '        <i class="fas fa-users me-1"></i>' + authors,
                '      </p>',
                '      <p class="text-muted small mb-2">',
                '        <i class="fas fa-calendar me-1"></i>' + year,
                '      </p>',
                '      <p class="card-text small">' + abstract + '...</p>',
                '      ' + urlLink,
                '    </div>',
                '  </div>',
                '</div>'
            ].join('');
        }).join('');

        const modalContent = [
            '<div class="mb-3">',
            '  <h6 class="text-primary">Found ' + papers.length + ' papers:</h6>',
            '</div>',
            '<div class="row">',
            papersHtml,
            '</div>'
        ].join('');
        const modal = createResultModal('Literature Search Results', modalContent);
        modal.show();
    }

    function displayAnalysisResults(analysis, projectId) {
        // Store analysis data globally for download
        window.currentAnalysis = analysis;
        
        const modal = createResultModal('Project Analysis Results', `
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="card border-primary">
                        <div class="card-header bg-primary text-white">
                            <h6 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Overview</h6>
                        </div>
                        <div class="card-body">
                            <p><strong>Total Papers:</strong> ${analysis.total_papers || 'N/A'}</p>
                            <p><strong>Key Topics:</strong> ${analysis.key_topics ? analysis.key_topics.join(', ') : 'N/A'}</p>
                            <p><strong>Research Trends:</strong> ${analysis.trends || 'N/A'}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card border-success">
                        <div class="card-header bg-success text-white">
                            <h6 class="mb-0"><i class="fas fa-lightbulb me-2"></i>Key Insights</h6>
                        </div>
                        <div class="card-body">
                            <div style="max-height: 200px; overflow-y: auto;">
                                ${analysis.insights ? marked.parse(analysis.insights) : 'No insights available'}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mb-3">
                    <div class="card border-info">
                        <div class="card-header bg-info text-white">
                            <h6 class="mb-0"><i class="fas fa-brain me-2"></i>Summary</h6>
                        </div>
                        <div class="card-body">
                            <div style="max-height: 300px; overflow-y: auto;">
                                ${analysis.summary ? marked.parse(analysis.summary) : 'No summary available'}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end">
                <button class="btn btn-primary me-2" onclick="downloadAnalysis('${projectId}')">
                    <i class="fas fa-download me-1"></i>Download Analysis
                </button>
            </div>
        `);
        modal.show();
    }

    function displayLiteratureReview(review, projectId) {
        // Store review data globally for download
        window.currentReview = review;
        
        const modal = createResultModal('Literature Review', `
            <div class="card">
                <div class="card-body">
                    <div style="max-height: 600px; overflow-y: auto;">
                        ${review.content ? marked.parse(review.content) : 'No review content available'}
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end mt-3">
                <button class="btn btn-success me-2" onclick="downloadReview('${projectId}')">
                    <i class="fas fa-download me-1"></i>Download Review
                </button>
                <button class="btn btn-info" onclick="copyReview('${projectId}')">
                    <i class="fas fa-copy me-1"></i>Copy to Clipboard
                </button>
            </div>
        `);
        modal.show();
    }

    function createResultModal(title, content) {
        // Remove existing result modal if it exists
        const existingModal = document.getElementById('resultModal');
        if (existingModal) {
            existingModal.remove();
        }

        // Create new modal
        const modalHtml = `
            <div class="modal fade" id="resultModal" tabindex="-1">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">${title}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            ${content}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        `;

        document.body.insertAdjacentHTML('beforeend', modalHtml);
        return new bootstrap.Modal(document.getElementById('resultModal'));
    }

    // Global storage for results
    window.currentAnalysis = null;
    window.currentReview = null;

    // Utility function to escape HTML
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Analysis-specific functions (global scope)
    window.downloadAnalysis = function(projectId) {
        if (window.currentAnalysis) {
            const analysisText = JSON.stringify(window.currentAnalysis, null, 2);
            window.downloadText(analysisText, `analysis_${projectId}.json`);
        } else {
            showAlert('danger', 'No analysis data available to download', 3000);
        }
    };

    // Review-specific functions (global scope)
    window.downloadReview = function(projectId) {
        if (window.currentReview && window.currentReview.content) {
            window.downloadText(window.currentReview.content, `review_${projectId}.md`);
        } else {
            showAlert('danger', 'No review content available to download', 3000);
        }
    };

    window.copyReview = function(projectId) {
        if (window.currentReview && window.currentReview.content) {
            window.copyToClipboard(window.currentReview.content);
        } else {
            showAlert('danger', 'No review content available to copy', 3000);
        }
    };
});
</script>
{% endblock %}