{% extends 'exams/base.html' %}
{% load static %}

{% block page_title %}ExamScore Standardization - {{ project.name }}{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row mb-3">
        <div class="col">
            <h4 class="fw-bold text-primary">
                <i class="fas fa-balance-scale"></i>
                ExamScore Standardization – {{ project.name }} ({{ project.year }})
            </h4>
            <p class="text-muted">Click "Standardize" to add marks to all scores of a paper</p>
        </div>
        <div class="col-auto">
            <a href="{% url 'exams:dashboard' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-list"></i> Subjects & Papers List</h5>
        </div>
        <div class="card-body">
            <div class="accordion" id="subjectsAccordion">
                {% for subject in subjects %}
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading{{ subject.id }}">
                        <button class="accordion-button {% if not forloop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ subject.id }}" aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}" aria-controls="collapse{{ subject.id }}">
                            <strong>{{ subject.code }}</strong> - {{ subject.name }}
                        </button>
                    </h2>
                    <div id="collapse{{ subject.id }}" class="accordion-collapse collapse {% if forloop.first %}show{% endif %}" aria-labelledby="heading{{ subject.id }}" data-bs-parent="#subjectsAccordion">
                        <div class="accordion-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-hover">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>#</th>
                                            <th>Paper Code</th>
                                            <th>Paper Name</th>
                                            <th>Total Students</th>
                                            <th>Valid Scores</th>
                                            <th>X (Absent)</th>
                                            <th>Null</th>
                                            <th>Min</th>
                                            <th>Max</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for paper in subject.papers %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td><strong>{{ paper.code }}</strong></td>
                                            <td>{{ paper.name }}</td>
                                            <td>{{ paper.total }}</td>
                                            <td class="text-success fw-bold">{{ paper.valid_count }}</td>
                                            <td class="text-warning fw-bold">{{ paper.x_count }}</td>
                                            <td class="text-secondary">{{ paper.null_count }}</td>
                                            <td>{{ paper.min_score|default:"-" }}</td>
                                            <td>{{ paper.max_score|default:"-" }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-success standardize-btn" 
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#standardizeModal"
                                                        data-paper-id="{{ paper.id }}"
                                                        data-paper-code="{{ paper.code }}"
                                                        data-paper-name="{{ paper.name }}"
                                                        data-subject-code="{{ subject.code }}"
                                                        data-subject-name="{{ subject.name }}"
                                                        data-min-score="{{ paper.min_score|default:'0' }}"
                                                        data-max-score="{{ paper.max_score|default:'0' }}">
                                                    <i class="fas fa-balance-scale"></i> Standardize
                                                </button>
                                            </td>
                                        </tr>
                                        {% empty %}
                                        <tr>
                                            <td colspan="10" class="text-center py-3">
                                                <i class="fas fa-info-circle"></i> No papers found for this subject
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> No subjects found with exam scores
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Standardization Modal -->
<div class="modal fade" id="standardizeModal" tabindex="-1" aria-labelledby="standardizeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="standardizeModalLabel">
                    <i class="fas fa-balance-scale"></i> 
                    Standardize Paper Scores
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {% csrf_token %}
                <input type="hidden" id="paperId" value="">
                <input type="hidden" id="projectId" value="{{ project.id }}">
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="fw-bold">Subject:</label>
                        <div id="modalSubject" class="form-control-plaintext h5"></div>
                    </div>
                    <div class="col-md-6">
                        <label class="fw-bold">Paper:</label>
                        <div id="modalPaper" class="form-control-plaintext h5"></div>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body p-3 text-center">
                                <small class="text-muted d-block">Current Minimum Score</small>
                                <span class="h2 mb-0 text-primary" id="modalMinScore">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body p-3 text-center">
                                <small class="text-muted d-block">Current Maximum Score</small>
                                <span class="h2 mb-0 text-danger" id="modalMaxScore">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="addValue" class="form-label fw-bold">Marks to Add to All Scores:</label>
                    <div class="input-group">
                        <input type="number" class="form-control form-control-lg" id="addValue" min="0.1" max="20" step="0.1" value="1.0">
                        <span class="input-group-text">points</span>
                    </div>
                    <div class="form-text">Enter value to add to all scores (maximum total after addition cannot exceed 99)</div>
                </div>
                
                <!-- New max warning -->
                <div class="alert alert-warning" id="newMaxWarning" style="display: none;">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <span id="warningMessage">Adding this value will exceed the maximum allowed score of 99</span>
                </div>
                
                <!-- Progress Bar (hidden initially) -->
                <div id="progressContainer" class="mt-4" style="display: none;">
                    <label class="form-label fw-bold">Processing Standardization...</label>
                    <div class="progress mb-2" style="height: 30px;">
                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                             role="progressbar" style="width: 0%">0%</div>
                    </div>
                    <p class="text-center" id="progressText">0/0 scores processed</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cancel
                </button>
                <button type="button" class="btn btn-success" id="startStandardizeBtn">
                    <i class="fas fa-play"></i> Start Standardization
                </button>
                <button type="button" class="btn btn-primary" id="processingBtn" style="display: none;" disabled>
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    Processing...
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Success Toast -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                <i class="fas fa-check-circle me-2"></i>
                <span id="toastMessage">Standardization completed successfully!</span>
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>

<!-- Error Toast -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="errorToast" class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                <i class="fas fa-exclamation-circle me-2"></i>
                <span id="errorMessage">An error occurred</span>
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>

<style>
.modal-lg {
    max-width: 700px;
}
.progress {
    border-radius: 15px;
}
.progress-bar {
    border-radius: 15px;
    transition: width 0.3s ease;
}
.toast {
    min-width: 300px;
}
.accordion-button:not(.collapsed) {
    background-color: #e7f1ff;
    color: #0c63e4;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
console.log('ExamScore Standardization JS loaded - ' + new Date().toISOString());

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded');
    
    // Get CSRF token
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
    console.log('CSRF Token found:', csrfToken ? 'YES' : 'NO');
    
    const projectId = document.getElementById('projectId').value;
    console.log('Project ID:', projectId);
    
    // Get all standardize buttons
    const standardizeBtns = document.querySelectorAll('.standardize-btn');
    console.log('Found standardize buttons:', standardizeBtns.length);
    
    // Add click handlers to each button
    standardizeBtns.forEach(function(btn, index) {
        btn.addEventListener('click', function(event) {
            event.preventDefault();
            console.log('===================================');
            console.log('Button ' + (index + 1) + ' clicked');
            
            // Get ALL data attributes from button
            const paperId = this.getAttribute('data-paper-id');
            const paperCode = this.getAttribute('data-paper-code');
            const paperName = this.getAttribute('data-paper-name');
            const subjectCode = this.getAttribute('data-subject-code');
            const subjectName = this.getAttribute('data-subject-name');
            const minScore = this.getAttribute('data-min-score');
            const maxScore = this.getAttribute('data-max-score');
            
            // Log all data to console
            console.log('DATA FROM BUTTON:');
            console.log('  paper-id:', paperId);
            console.log('  paper-code:', paperCode);
            console.log('  paper-name:', paperName);
            console.log('  subject-code:', subjectCode);
            console.log('  subject-name:', subjectName);
            console.log('  min-score:', minScore);
            console.log('  max-score:', maxScore);
            
            // Set values in modal
            document.getElementById('paperId').value = paperId || '';
            document.getElementById('modalSubject').textContent = 
                `${subjectCode || 'N/A'} - ${subjectName || 'N/A'}`;
            document.getElementById('modalPaper').textContent = 
                `${paperCode || 'N/A'} - ${paperName || 'N/A'}`;
            document.getElementById('modalMinScore').textContent = 
                parseFloat(minScore || '0').toFixed(2);
            document.getElementById('modalMaxScore').textContent = 
                parseFloat(maxScore || '0').toFixed(2);
            
            // Reset modal state
            document.getElementById('addValue').value = '1.0';
            document.getElementById('newMaxWarning').style.display = 'none';
            document.getElementById('progressContainer').style.display = 'none';
            document.getElementById('startStandardizeBtn').style.display = 'inline-block';
            document.getElementById('processingBtn').style.display = 'none';
            
            // Show modal
            try {
                const modalElement = document.getElementById('standardizeModal');
                if (modalElement) {
                    const modal = new bootstrap.Modal(modalElement);
                    modal.show();
                    console.log('✅ Modal shown successfully');
                }
            } catch (error) {
                console.error('❌ Error showing modal:', error);
                alert('Error showing modal: ' + error.message);
            }
        });
    });
    
    // Input validation
    const addValueInput = document.getElementById('addValue');
    if (addValueInput) {
        addValueInput.addEventListener('input', function() {
            const addValue = parseFloat(this.value) || 0;
            const maxScoreText = document.getElementById('modalMaxScore').textContent;
            const maxScore = parseFloat(maxScoreText) || 0;
            const newMax = maxScore + addValue;
            
            const warningEl = document.getElementById('newMaxWarning');
            const warningMsg = document.getElementById('warningMessage');
            
            if (newMax > 99) {
                warningMsg.textContent = `Adding ${addValue.toFixed(1)} will raise max score to ${newMax.toFixed(2)} (exceeds 99)`;
                warningEl.style.display = 'block';
                console.log('⚠️ Warning: New max would exceed 99');
            } else {
                warningEl.style.display = 'none';
            }
        });
    }
    
    // Start button
    const startBtn = document.getElementById('startStandardizeBtn');
    if (startBtn) {
        startBtn.addEventListener('click', function() {
            const paperId = document.getElementById('paperId').value;
            const addValue = parseFloat(document.getElementById('addValue').value) || 1.0;
            const maxScoreText = document.getElementById('modalMaxScore').textContent;
            const maxScore = parseFloat(maxScoreText) || 0;
            const newMax = maxScore + addValue;
            
            console.log('===================================');
            console.log('START BUTTON CLICKED');
            console.log('  paperId from modal:', paperId);
            console.log('  addValue:', addValue);
            console.log('  current max:', maxScore);
            console.log('  new max:', newMax);
            
            if (!paperId) {
                console.error('❌ No paper ID in modal!');
                alert('Paper ID not found in modal');
                return;
            }
            
            if (newMax > 99) {
                console.error('❌ Would exceed maximum allowed score');
                alert(`Adding ${addValue.toFixed(1)} would raise max score to ${newMax.toFixed(2)} (exceeds 99)`);
                return;
            }
            
            // Show progress UI
            this.style.display = 'none';
            document.getElementById('processingBtn').style.display = 'inline-block';
            document.getElementById('progressContainer').style.display = 'block';
            
            // Show immediate feedback
            document.getElementById('progressBar').style.width = '10%';
            document.getElementById('progressBar').textContent = '10%';
            document.getElementById('progressText').textContent = 'Starting...';
            
            // Call API
            console.log('🔵 Calling API...');
            
            const url = `/projects/${projectId}/examscore/${paperId}/standardize/`;
            console.log('Fetch URL:', url);
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify({
                    add_value: addValue
                })
            })
            .then(response => {
                console.log('Response status:', response.status);
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.error || `HTTP error! status: ${response.status}`);
                    });
                }
                return response.json();
            })
            .then(data => {
                console.log('Response data:', data);
                if (data.success) {
                    startProgressPolling(data.task_id, data.total);
                } else {
                    throw new Error(data.error || 'Unknown error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                
                document.getElementById('errorMessage').textContent = 'Error: ' + error.message;
                const toastElement = document.getElementById('errorToast');
                if (toastElement && typeof bootstrap !== 'undefined') {
                    const toast = new bootstrap.Toast(toastElement);
                    toast.show();
                } else {
                    alert('Error: ' + error.message);
                }
                
                // Reset UI
                startBtn.style.display = 'inline-block';
                document.getElementById('processingBtn').style.display = 'none';
                document.getElementById('progressContainer').style.display = 'none';
            });
        });
    }
    
    // Progress polling function
    function startProgressPolling(taskId, total) {
        console.log('Starting progress polling for task:', taskId);
        
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        
        const interval = setInterval(function() {
            const url = `/projects/${projectId}/examscore-standardization-progress/${taskId}/`;
            
            fetch(url)
            .then(response => response.json())
            .then(data => {
                console.log('Progress:', data);
                
                const percent = data.percent || 0;
                progressBar.style.width = percent + '%';
                progressBar.textContent = percent + '%';
                progressText.textContent = `${data.processed || 0}/${data.total || 0} scores processed`;
                
                if (data.status === 'completed' || percent >= 100) {
                    clearInterval(interval);
                    
                    document.getElementById('toastMessage').textContent = 
                        `${data.processed || total} scores standardized successfully!`;
                    const toastElement = document.getElementById('successToast');
                    if (toastElement && typeof bootstrap !== 'undefined') {
                        const toast = new bootstrap.Toast(toastElement);
                        toast.show();
                    }
                    
                    setTimeout(function() {
                        location.reload();
                    }, 2000);
                }
            })
            .catch(error => {
                console.error('Progress polling error:', error);
            });
        }, 1000);
        
        window.currentInterval = interval;
    }
    
    // Reset on modal hide
    const modalElement = document.getElementById('standardizeModal');
    if (modalElement) {
        modalElement.addEventListener('hidden.bs.modal', function() {
            console.log('📝 Modal hidden - cleaning up');
            if (window.currentInterval) {
                clearInterval(window.currentInterval);
                window.currentInterval = null;
            }
            
            const startBtn = document.getElementById('startStandardizeBtn');
            if (startBtn) startBtn.style.display = 'inline-block';
            
            const processingBtn = document.getElementById('processingBtn');
            if (processingBtn) processingBtn.style.display = 'none';
            
            const progressContainer = document.getElementById('progressContainer');
            if (progressContainer) progressContainer.style.display = 'none';
        });
    }
    
    console.log('Initialization complete');
});
</script>
{% endblock %}