{% extends "base.html" %}

{% block title %}AI Research Director - Active Learning System{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- AI Research Director Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0" style="background: linear-gradient(135deg, #6f42c1 0%, #007bff 50%, #28a745 100%);">
                <div class="card-body text-white p-4">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <h1 class="display-4 mb-3">🤖 AI Research Director</h1>
                            <p class="lead mb-3">
                                Autonomous learning system continuously analyzing platform data, generating testable hypotheses, 
                                and directing active research investigations into CAM photosynthesis and mycorrhizal carbon capture.
                            </p>
                            <div class="alert alert-warning bg-warning text-dark mb-3">
                                <strong>🧠 AI Status:</strong> Actively learning from literature, climate, and fungal monitoring data. 
                                <strong id="learningStatus">Analyzing patterns...</strong>
                            </div>
                        </div>
                        <div class="col-lg-4 text-center">
                            <div style="font-size: 100px;">🧠🔬</div>
                            <p class="h5">Autonomous Research Intelligence</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Learning Status Overview -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-primary">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">🧠 AI Learning Status</h5>
                </div>
                <div class="card-body" id="learningOverview">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-2">Initializing AI Research Director...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Active Hypotheses -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-success">
                <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">💡 Active Research Hypotheses</h5>
                    <button class="btn btn-light btn-sm" onclick="generateNewHypotheses()">
                        <i data-feather="plus" class="me-1"></i>
                        Generate New
                    </button>
                </div>
                <div class="card-body" id="activeHypotheses">
                    <div class="text-center">
                        <div class="spinner-border text-success" role="status"></div>
                        <p class="mt-2">Loading active hypotheses...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Research Projects -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card border-info">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">🔬 Active Research Projects</h5>
                </div>
                <div class="card-body" id="activeProjects">
                    <div class="text-center">
                        <div class="spinner-border text-info" role="status"></div>
                        <p class="mt-2">Loading research projects...</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-warning">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">🔍 Recent AI Observations</h5>
                </div>
                <div class="card-body" id="recentObservations">
                    <div class="text-center">
                        <div class="spinner-border text-warning" role="status"></div>
                        <p class="mt-2">Loading observations...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Research Priorities & Breakthroughs -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card border-secondary">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">🎯 Current Research Priorities</h5>
                </div>
                <div class="card-body" id="researchPriorities">
                    <div class="text-center">
                        <div class="spinner-border text-secondary" role="status"></div>
                        <p class="mt-2">Analyzing priorities...</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-danger">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">🚀 Predicted Breakthroughs</h5>
                </div>
                <div class="card-body" id="predictedBreakthroughs">
                    <div class="text-center">
                        <div class="spinner-border text-danger" role="status"></div>
                        <p class="mt-2">Predicting breakthroughs...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Analysis Interface -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-dark">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0">📊 Submit Data for AI Analysis</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Data Source</h6>
                            <select class="form-select mb-3" id="dataSource">
                                <option value="literature_search">Literature Search Results</option>
                                <option value="climate_monitoring">Climate Monitoring Data</option>
                                <option value="fungal_monitoring">Fungal Network Monitoring</option>
                                <option value="orchid_database">Orchid Database Analysis</option>
                                <option value="field_observations">Field Observations</option>
                            </select>
                            
                            <h6>Data Content (JSON format)</h6>
                            <textarea class="form-control" id="dataContent" rows="6" placeholder='{"papers": [{"title": "Mycorrhizal Networks...", "abstract": "..."}], "total_results": 50}'></textarea>
                            
                            <button class="btn btn-primary mt-3" onclick="submitDataForAnalysis()">
                                <i data-feather="cpu" class="me-2"></i>
                                Analyze with AI
                            </button>
                        </div>
                        <div class="col-md-6">
                            <h6>AI Analysis Results</h6>
                            <div id="analysisResults" class="border rounded p-3 bg-light" style="min-height: 200px;">
                                <p class="text-muted">AI analysis results will appear here...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hypothesis Details Modal -->
    <div class="modal fade" id="hypothesisModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Hypothesis Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="hypothesisDetails">
                    <!-- Hypothesis details will be loaded here -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let currentStatus = null;

// Load initial research status
function loadResearchStatus() {
    fetch('/research-director/status')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            currentStatus = data.status;
            displayLearningStatus(data.status);
            displayActiveHypotheses(data.status.current_hypotheses);
            displayActiveProjects(data.status.active_projects);
            displayRecentObservations(data.status.recent_observations);
            displayResearchPriorities(data.status.research_priorities);
            displayPredictedBreakthroughs(data.status.next_breakthroughs);
            updateLearningStatusText(data.status.ai_learning_status);
        } else {
            showError('Failed to load research status: ' + data.error);
        }
    })
    .catch(error => {
        showError('Error loading research status: ' + error.message);
    });
}

function displayLearningStatus(status) {
    const learningStatus = status.ai_learning_status;
    let html = `
        <div class="row text-center mb-3">
            <div class="col-md-2">
                <h3 class="text-primary">${learningStatus.total_observations}</h3>
                <small>Total Observations</small>
            </div>
            <div class="col-md-2">
                <h3 class="text-success">${learningStatus.high_confidence_observations}</h3>
                <small>High Confidence</small>
            </div>
            <div class="col-md-2">
                <h3 class="text-warning">${learningStatus.active_hypotheses}</h3>
                <small>Active Hypotheses</small>
            </div>
            <div class="col-md-2">
                <h3 class="text-info">${learningStatus.active_projects}</h3>
                <small>Active Projects</small>
            </div>
            <div class="col-md-2">
                <h3 class="text-secondary">${learningStatus.data_sources_monitored}</h3>
                <small>Data Sources</small>
            </div>
            <div class="col-md-2">
                <h3 class="text-danger">${(learningStatus.learning_confidence * 100).toFixed(1)}%</h3>
                <small>Learning Confidence</small>
            </div>
        </div>
        
        <div class="progress mb-3" style="height: 30px;">
            <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" 
                 style="width: ${learningStatus.learning_confidence * 100}%">
                AI Learning Progress: ${(learningStatus.learning_confidence * 100).toFixed(1)}%
            </div>
        </div>
        
        <div class="alert alert-info">
            <strong>🤖 AI Status:</strong> Continuously monitoring ${learningStatus.data_sources_monitored} data sources, 
            with ${learningStatus.high_confidence_observations} high-confidence observations driving research direction.
        </div>
    `;
    
    document.getElementById('learningOverview').innerHTML = html;
}

function displayActiveHypotheses(hypotheses) {
    let html = '';
    
    hypotheses.forEach(hyp => {
        const priorityColor = hyp.priority === 'high' ? 'danger' : hyp.priority === 'medium' ? 'warning' : 'secondary';
        const statusColor = hyp.status === 'testing' ? 'info' : hyp.status === 'confirmed' ? 'success' : 'secondary';
        
        html += `
            <div class="card mb-3">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="card-title">${hyp.title}</h6>
                            <p class="small text-muted mb-2">Domain: ${hyp.domain} | ID: ${hyp.id}</p>
                            <div class="mb-2">
                                <span class="badge bg-${priorityColor}">${hyp.priority.toUpperCase()} PRIORITY</span>
                                <span class="badge bg-${statusColor}">${hyp.status.toUpperCase()}</span>
                            </div>
                        </div>
                        <div class="text-end">
                            <div class="h5 text-primary">${(hyp.confidence * 100).toFixed(1)}%</div>
                            <small>Confidence</small>
                        </div>
                    </div>
                    <button class="btn btn-sm btn-outline-primary" onclick="viewHypothesisDetails('${hyp.id}')">
                        <i data-feather="eye" class="me-1"></i>
                        View Details
                    </button>
                </div>
            </div>
        `;
    });
    
    if (hypotheses.length === 0) {
        html = '<div class="alert alert-info">No active hypotheses. Generate new hypotheses based on accumulated observations.</div>';
    }
    
    document.getElementById('activeHypotheses').innerHTML = html;
    feather.replace();
}

function displayActiveProjects(projects) {
    let html = '';
    
    projects.forEach(proj => {
        const progressPercentage = (proj.progress * 100).toFixed(1);
        
        html += `
            <div class="card mb-3">
                <div class="card-body">
                    <h6 class="card-title">${proj.title}</h6>
                    <p class="small text-muted mb-2">Phase: ${proj.phase} | ID: ${proj.id}</p>
                    
                    <div class="progress mb-2" style="height: 20px;">
                        <div class="progress-bar bg-info" style="width: ${progressPercentage}%">
                            ${progressPercentage}% Complete
                        </div>
                    </div>
                    
                    <div class="badge bg-info">${proj.phase.replace('_', ' ').toUpperCase()}</div>
                </div>
            </div>
        `;
    });
    
    if (projects.length === 0) {
        html = '<div class="alert alert-info">No active research projects. Projects will be generated based on high-priority hypotheses.</div>';
    }
    
    document.getElementById('activeProjects').innerHTML = html;
}

function displayRecentObservations(observations) {
    let html = '';
    
    observations.forEach(obs => {
        const confidenceColor = obs.confidence > 0.8 ? 'success' : obs.confidence > 0.6 ? 'warning' : 'secondary';
        
        html += `
            <div class="card mb-3">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <small class="text-muted">${obs.source} | ${obs.timestamp}</small>
                        <span class="badge bg-${confidenceColor}">${(obs.confidence * 100).toFixed(1)}%</span>
                    </div>
                    <p class="small mb-2">${obs.observation}</p>
                    <div class="small text-muted">
                        <strong>Implications:</strong>
                        <ul class="mb-0">
                            ${obs.implications.map(imp => `<li>${imp}</li>`).join('')}
                        </ul>
                    </div>
                </div>
            </div>
        `;
    });
    
    if (observations.length === 0) {
        html = '<div class="alert alert-info">No recent observations. Submit data for AI analysis to generate new insights.</div>';
    }
    
    document.getElementById('recentObservations').innerHTML = html;
}

function displayResearchPriorities(priorities) {
    let html = '<ol class="list-group list-group-numbered">';
    
    priorities.forEach(priority => {
        html += `<li class="list-group-item">${priority}</li>`;
    });
    
    html += '</ol>';
    
    if (priorities.length === 0) {
        html = '<div class="alert alert-info">Research priorities are being determined based on AI analysis.</div>';
    }
    
    document.getElementById('researchPriorities').innerHTML = html;
}

function displayPredictedBreakthroughs(breakthroughs) {
    let html = '<ul class="list-group">';
    
    breakthroughs.forEach(breakthrough => {
        html += `<li class="list-group-item"><i data-feather="zap" class="me-2 text-warning"></i>${breakthrough}</li>`;
    });
    
    html += '</ul>';
    
    if (breakthroughs.length === 0) {
        html = '<div class="alert alert-info">Breakthrough predictions will be generated as research progresses.</div>';
    }
    
    document.getElementById('predictedBreakthroughs').innerHTML = html;
    feather.replace();
}

function updateLearningStatusText(learningStatus) {
    const statusElement = document.getElementById('learningStatus');
    if (statusElement) {
        if (learningStatus.learning_confidence > 0.8) {
            statusElement.textContent = 'High confidence learning mode - generating reliable insights';
        } else if (learningStatus.learning_confidence > 0.6) {
            statusElement.textContent = 'Active learning mode - building pattern recognition';
        } else {
            statusElement.textContent = 'Initial learning phase - collecting baseline data';
        }
    }
}

function submitDataForAnalysis() {
    const dataSource = document.getElementById('dataSource').value;
    const dataContent = document.getElementById('dataContent').value;
    
    if (!dataContent.trim()) {
        alert('Please enter data content for analysis');
        return;
    }
    
    let parsedData;
    try {
        parsedData = JSON.parse(dataContent);
    } catch (e) {
        alert('Invalid JSON format. Please check your data content.');
        return;
    }
    
    const resultsDiv = document.getElementById('analysisResults');
    resultsDiv.innerHTML = '<div class="spinner-border text-primary" role="status"></div> <span>AI analyzing data...</span>';
    
    fetch('/research-director/analyze-data', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            source: dataSource,
            data: parsedData
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            let html = `
                <h6 class="text-success">Analysis Complete</h6>
                <p><strong>Observations Generated:</strong> ${data.observations_generated}</p>
            `;
            
            if (data.observations.length > 0) {
                html += '<h6>New Observations:</h6>';
                data.observations.forEach(obs => {
                    html += `
                        <div class="card mb-2">
                            <div class="card-body p-2">
                                <p class="small mb-1">${obs.text}</p>
                                <div class="d-flex justify-content-between">
                                    <span class="badge bg-primary">${(obs.confidence * 100).toFixed(1)}% confidence</span>
                                    <small class="text-muted">ID: ${obs.id}</small>
                                </div>
                            </div>
                        </div>
                    `;
                });
            }
            
            resultsDiv.innerHTML = html;
            
            // Refresh the main dashboard
            setTimeout(() => {
                loadResearchStatus();
            }, 1000);
            
        } else {
            resultsDiv.innerHTML = `<div class="alert alert-danger">Analysis failed: ${data.error}</div>`;
        }
    })
    .catch(error => {
        resultsDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
    });
}

function generateNewHypotheses() {
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Generating...';
    button.disabled = true;
    
    fetch('/research-director/generate-hypotheses', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({})
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (data.new_hypotheses > 0) {
                alert(`Successfully generated ${data.new_hypotheses} new research hypotheses!`);
                loadResearchStatus(); // Refresh the dashboard
            } else {
                alert('No new hypotheses generated. More data observations may be needed.');
            }
        } else {
            alert('Failed to generate hypotheses: ' + data.error);
        }
    })
    .catch(error => {
        alert('Error generating hypotheses: ' + error.message);
    })
    .finally(() => {
        button.innerHTML = originalText;
        button.disabled = false;
    });
}

function viewHypothesisDetails(hypothesisId) {
    fetch(`/research-director/hypothesis/${hypothesisId}`)
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            displayHypothesisDetailsModal(data.details);
        } else {
            alert('Failed to load hypothesis details: ' + data.error);
        }
    })
    .catch(error => {
        alert('Error loading hypothesis details: ' + error.message);
    });
}

function displayHypothesisDetailsModal(details) {
    const hypothesis = details.hypothesis;
    
    let html = `
        <h6>${hypothesis.title}</h6>
        <p><strong>Hypothesis Statement:</strong> ${hypothesis.hypothesis_statement}</p>
        
        <p><strong>Background Rationale:</strong> ${hypothesis.background_rationale}</p>
        
        <h6>Testable Predictions:</h6>
        <ul>
            ${hypothesis.testable_predictions.map(pred => `<li>${pred}</li>`).join('')}
        </ul>
        
        <div class="row">
            <div class="col-md-6">
                <p><strong>Domain:</strong> ${hypothesis.domain}</p>
                <p><strong>Priority:</strong> ${hypothesis.priority_level}</p>
                <p><strong>Status:</strong> ${hypothesis.status}</p>
            </div>
            <div class="col-md-6">
                <p><strong>Confidence:</strong> ${(hypothesis.confidence_score * 100).toFixed(1)}%</p>
                <p><strong>Generated:</strong> ${new Date(hypothesis.generated_timestamp).toLocaleDateString()}</p>
            </div>
        </div>
        
        <h6>Required Data:</h6>
        <div class="d-flex flex-wrap gap-2">
            ${hypothesis.required_data.map(data => `<span class="badge bg-secondary">${data}</span>`).join('')}
        </div>
        
        <p class="mt-3"><strong>Experimental Design:</strong> ${hypothesis.experimental_design}</p>
    `;
    
    document.getElementById('hypothesisDetails').innerHTML = html;
    new bootstrap.Modal(document.getElementById('hypothesisModal')).show();
}

function showError(message) {
    const errorHtml = `<div class="alert alert-danger">${message}</div>`;
    document.getElementById('learningOverview').innerHTML = errorHtml;
    document.getElementById('activeHypotheses').innerHTML = errorHtml;
    document.getElementById('activeProjects').innerHTML = errorHtml;
    document.getElementById('recentObservations').innerHTML = errorHtml;
}

// Auto-refresh every 30 seconds
function startAutoRefresh() {
    setInterval(() => {
        loadResearchStatus();
    }, 30000);
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    loadResearchStatus();
    startAutoRefresh();
    feather.replace();
});
</script>

{% endblock %}