{% extends "base.html" %}

{% block title %}Admin - Algorithm Submissions{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row mb-4">
        <div class="col">
            <h2><i class="fas fa-cog"></i> Algorithm Submissions</h2>
            <p class="text-muted">Review and approve custom algorithm submissions</p>
        </div>
    </div>

    <!-- Pending Algorithms -->
    <div class="card shadow mb-4">
        <div class="card-header bg-warning text-dark">
            <h5 class="mb-0"><i class="fas fa-clock"></i> Pending Review ({{ pending|length }})</h5>
        </div>
        <div class="card-body">
            {% if pending %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Algorithm</th>
                            <th>Author</th>
                            <th>Submitted</th>
                            <th>GitHub PR</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for algo in pending %}
                        <tr id="algo-row-{{ algo.id }}">
                            <td>
                                <strong>{{ algo.algorithm_name }}</strong>
                                <br><small class="text-muted">{{ algo.description[:50] }}{% if algo.description|length > 50 %}...{% endif %}</small>
                            </td>
                            <td>{{ algo.user.username if algo.user else 'Unknown' }}</td>
                            <td>{{ algo.upload_date.strftime('%Y-%m-%d %H:%M') if algo.upload_date else 'N/A' }}</td>
                            <td>
                                {% if algo.pr_url %}
                                <a href="{{ algo.pr_url }}" target="_blank" class="btn btn-sm btn-outline-dark">
                                    <i class="fab fa-github"></i> PR #{{ algo.github_pr_number }}
                                </a>
                                {% else %}
                                <span class="text-muted">Local only</span>
                                {% endif %}
                            </td>
                            <td>
                                <button class="btn btn-sm btn-success me-1" onclick="reviewAlgorithm({{ algo.id }}, 'view')">
                                    <i class="fas fa-eye"></i> View
                                </button>
                                <button class="btn btn-sm btn-primary me-1" onclick="reviewAlgorithm({{ algo.id }}, 'approve')">
                                    <i class="fas fa-check"></i> Approve
                                </button>
                                <button class="btn btn-sm btn-danger" onclick="reviewAlgorithm({{ algo.id }}, 'reject')">
                                    <i class="fas fa-times"></i> Reject
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center text-muted py-4">
                <i class="fas fa-check-circle fa-3x mb-3 text-success"></i>
                <p>No pending submissions!</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Approved Algorithms -->
    <div class="card shadow">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="fas fa-check-circle"></i> Approved Algorithms ({{ approved|length }})</h5>
        </div>
        <div class="card-body">
            {% if approved %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Algorithm</th>
                            <th>Author</th>
                            <th>Approved</th>
                            <th>Usage</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for algo in approved %}
                        <tr>
                            <td>
                                <strong>{{ algo.algorithm_name }}</strong>
                                <br><small class="text-muted">{{ algo.description[:50] }}{% if algo.description|length > 50 %}...{% endif %}</small>
                            </td>
                            <td>{{ algo.user.username if algo.user else 'Unknown' }}</td>
                            <td>{{ algo.reviewed_at.strftime('%Y-%m-%d') if algo.reviewed_at else 'N/A' }}</td>
                            <td><span class="badge bg-primary">{{ algo.usage_count }} runs</span></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center text-muted py-4">
                <i class="fas fa-inbox fa-3x mb-3"></i>
                <p>No approved algorithms yet.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- View Algorithm Modal -->
<div class="modal fade" id="viewAlgorithmModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Algorithm Code</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <pre><code id="algorithmCode" class="language-python"></code></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Algorithm</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Rejection Reason</label>
                    <textarea id="rejectNotes" class="form-control" rows="3" 
                              placeholder="Provide reason for rejection..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" onclick="confirmReject()">Reject</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
let currentAlgoId = null;

function reviewAlgorithm(algoId, action) {
    currentAlgoId = algoId;
    
    if (action === 'view') {
        // Fetch and display code
        fetch(`/api/admin/algorithm/${algoId}/code`)
            .then(res => res.json())
            .then(data => {
                document.getElementById('algorithmCode').textContent = data.code;
                new bootstrap.Modal(document.getElementById('viewAlgorithmModal')).show();
            });
    } else if (action === 'approve') {
        if (confirm('Approve this algorithm? It will be added to the algorithm library.')) {
            fetch(`/api/admin/algorithm/${algoId}/approve`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'}
            })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'approved') {
                    document.getElementById(`algo-row-${algoId}`).remove();
                    alert(data.message);
                    location.reload();
                }
            });
        }
    } else if (action === 'reject') {
        new bootstrap.Modal(document.getElementById('rejectModal')).show();
    }
}

function confirmReject() {
    const notes = document.getElementById('rejectNotes').value;
    
    fetch(`/api/admin/algorithm/${currentAlgoId}/reject`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({notes: notes})
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'rejected') {
            document.getElementById(`algo-row-${currentAlgoId}`).remove();
            bootstrap.Modal.getInstance(document.getElementById('rejectModal')).hide();
            alert(data.message);
            location.reload();
        }
    });
}
</script>
{% endblock %}