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

{% block page_title %}Subject 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>
                Subject Standardization – {{ project.name }} ({{ project.year }})
            </h4>
            <p class="text-muted">Standardize (add marks) or Destandardize (subtract marks) for all scores of a subject</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 List</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Subject</th>
                            <th>Sat</th>
                            <th>A</th>
                            <th>B</th>
                            <th>C</th>
                            <th>D</th>
                            <th>E</th>
                            <th>S</th>
                            <th>F</th>
                            <th>#A-E</th>
                            <th>%A-E</th>
                            <th>GPA</th>
                            <th>Min</th>
                            <th>Max</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for subject in subjects %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>
                                <strong>{{ subject.code }}</strong> - {{ subject.name }}
                            </td>
                            <td>{{ subject.total }}</td>
                            <td class="text-success fw-bold">{{ subject.A }}</td>
                            <td class="text-primary fw-bold">{{ subject.B }}</td>
                            <td class="text-info fw-bold">{{ subject.C }}</td>
                            <td class="text-warning fw-bold">{{ subject.D }}</td>
                            <td class="text-secondary fw-bold">{{ subject.E }}</td>
                            <td class="text-danger fw-bold">{{ subject.S }}</td>
                            <td class="text-danger fw-bold">{{ subject.F }}</td>
                            <td class="fw-bold">{{ subject.a_e_total }}</td>
                            <td>{{ subject.a_e_percent }}%</td>
                            <td class="fw-bold bg-light">{{ subject.gpa }}</td>
                            <td>{{ subject.min_score|default:"-" }}</td>
                            <td>{{ subject.max_score|default:"-" }}</td>
                            <td>
                                <button class="btn btn-sm btn-success standardize-btn" 
                                        data-bs-toggle="modal"
                                        data-bs-target="#standardizeModal"
                                        data-subject-id="{{ subject.id }}"
                                        data-subject-code="{{ subject.code }}"
                                        data-subject-name="{{ subject.name }}"
                                        data-min-score="{{ subject.min_score|default:'0' }}"
                                        data-max-score="{{ subject.max_score|default:'0' }}"
                                        data-action="standardize">
                                    <i class="fas fa-plus-circle"></i> +Add
                                </button>

                                <button class="btn btn-sm btn-danger destandardize-btn" 
                                        data-bs-toggle="modal"
                                        data-bs-target="#standardizeModal"
                                        data-subject-id="{{ subject.id }}"
                                        data-subject-code="{{ subject.code }}"
                                        data-subject-name="{{ subject.name }}"
                                        data-min-score="{{ subject.min_score|default:'0' }}"
                                        data-max-score="{{ subject.max_score|default:'0' }}"
                                        data-action="destandardize">
                                    <i class="fas fa-minus-circle"></i> -Sub
                                </button>

                                <a href="{% url 'exams:subject_schools_list' project.id subject.id %}" 
                                   class="btn btn-sm btn-info">
                                    <i class="fas fa-school"></i> Schools
                                </a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="16" class="text-center py-4">
                                <i class="fas fa-info-circle"></i> No subjects found
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Standardization/Destandardization 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" id="modalHeader">
                <h5 class="modal-title" id="standardizeModalLabel">
                    <i class="fas fa-balance-scale"></i> 
                    <span id="modalActionTitle">Standardize</span> Subject
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {% csrf_token %}
                <input type="hidden" id="subjectId" value="">
                <input type="hidden" id="projectId" value="{{ project.id }}">
                <input type="hidden" id="actionType" value="standardize">
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="fw-bold">Subject Code:</label>
                        <div id="modalSubjectCode" class="form-control-plaintext h5"></div>
                    </div>
                    <div class="col-md-6">
                        <label class="fw-bold">Subject Name:</label>
                        <div id="modalSubjectName" class="form-control-plaintext h5"></div>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="card bg-light">
                            <div class="card-body p-3 text-center">
                                <small class="text-muted d-block">Current Minimum</small>
                                <span class="h2 mb-0 text-primary" id="modalMinScore">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-light">
                            <div class="card-body p-3 text-center">
                                <small class="text-muted d-block">Current Maximum</small>
                                <span class="h2 mb-0 text-danger" id="modalMaxScore">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-light">
                            <div class="card-body p-3 text-center">
                                <small class="text-muted d-block">Total Students</small>
                                <span class="h2 mb-0 text-info" id="modalTotalStudents">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="adjustValue" class="form-label fw-bold">
                        <span id="adjustLabel">Marks to Add</span> to All Scores:
                    </label>
                    <div class="input-group">
                        <input type="number" class="form-control form-control-lg" id="adjustValue" min="0.1" max="20" step="0.1" value="1.0">
                        <span class="input-group-text">points</span>
                    </div>
                    <div class="form-text" id="adjustHelpText">
                        <span id="actionHelp">Enter value to add to all scores.</span>
                        <span id="capHelp" style="display: none;">Scores will be capped at 99 automatically.</span>
                        <span id="floorHelp" style="display: none;">Scores will be floored at 0 automatically.</span>
                        <span class="badge bg-info text-white" id="actionBadge">Capping enabled</span>
                    </div>
                </div>
                
                <!-- Warning messages -->
                <div class="alert alert-warning" id="adjustWarning" style="display: none;">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <span id="warningMessage">Some scores will be adjusted</span>
                </div>
                
                <!-- Progress Bar (hidden initially) -->
                <div id="progressContainer" class="mt-4" style="display: none;">
                    <label class="form-label fw-bold">Processing...</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="startAdjustBtn">
                    <i class="fas fa-play"></i> <span id="startBtnText">Start</span>
                </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">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;
}
.btn-sm {
    margin: 2px;
}
.modal-header.bg-success {
    background-color: #28a745 !important;
}
.modal-header.bg-danger {
    background-color: #dc3545 !important;
}
</style>

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

    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM fully loaded');
        
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
        const projectId = '{{ project.id }}';
        
        // Get all standardize buttons
        const standardizeBtns = document.querySelectorAll('.standardize-btn');
        const destandardizeBtns = document.querySelectorAll('.destandardize-btn');
        
        // Function to open modal with action type
        function openModal(btn, action) {
            console.log('===================================');
            console.log(`${action} button clicked`);
            
            const subjectId = btn.getAttribute('data-subject-id');
            const subjectCode = btn.getAttribute('data-subject-code');
            const subjectName = btn.getAttribute('data-subject-name');
            const minScore = btn.getAttribute('data-min-score');
            const maxScore = btn.getAttribute('data-max-score');
            
            if (!subjectId) {
                console.error('❌ ERROR: subject-id is MISSING!');
                showError('Subject ID is missing!');
                return;
            }
            
            // Set hidden fields
            document.getElementById('subjectId').value = subjectId;
            document.getElementById('actionType').value = action;
            
            // Set display fields
            document.getElementById('modalSubjectCode').textContent = subjectCode || 'N/A';
            document.getElementById('modalSubjectName').textContent = subjectName || 'N/A';
            document.getElementById('modalMinScore').textContent = parseFloat(minScore || '0').toFixed(2);
            document.getElementById('modalMaxScore').textContent = parseFloat(maxScore || '0').toFixed(2);
            
            // Get total students from the row
            const row = btn.closest('tr');
            const satCell = row.querySelector('td:nth-child(3)');
            const totalStudents = satCell ? satCell.textContent.trim() : '0';
            document.getElementById('modalTotalStudents').textContent = totalStudents;
            
            // Update modal based on action
            const modalHeader = document.getElementById('modalHeader');
            const modalTitle = document.getElementById('modalActionTitle');
            const adjustLabel = document.getElementById('adjustLabel');
            const actionHelp = document.getElementById('actionHelp');
            const capHelp = document.getElementById('capHelp');
            const floorHelp = document.getElementById('floorHelp');
            const actionBadge = document.getElementById('actionBadge');
            const startBtnText = document.getElementById('startBtnText');
            const adjustWarning = document.getElementById('adjustWarning');
            const warningMessage = document.getElementById('warningMessage');
            const adjustValue = document.getElementById('adjustValue');
            
            if (action === 'destandardize') {
                modalHeader.className = 'modal-header bg-danger text-white';
                modalTitle.textContent = 'Destandardize';
                adjustLabel.textContent = 'Marks to Subtract';
                actionHelp.textContent = 'Enter value to subtract from all scores.';
                capHelp.style.display = 'none';
                floorHelp.style.display = 'inline';
                actionBadge.textContent = 'Floor at 0 enabled';
                actionBadge.className = 'badge bg-warning text-dark';
                startBtnText.textContent = 'Start Destandardization';
                adjustValue.placeholder = 'e.g. 1.0';
                adjustValue.min = '0.1';
                adjustValue.max = '20';
                adjustValue.step = '0.1';
                adjustValue.value = '1.0';
                
                // Update warning
                const currentMin = parseFloat(minScore || '0');
                if (currentMin - 1.0 < 0) {
                    warningMessage.textContent = `⚠️ Some scores will be floored at 0 (current min: ${currentMin})`;
                    adjustWarning.style.display = 'block';
                } else {
                    adjustWarning.style.display = 'none';
                }
                
            } else {
                modalHeader.className = 'modal-header bg-success text-white';
                modalTitle.textContent = 'Standardize';
                adjustLabel.textContent = 'Marks to Add';
                actionHelp.textContent = 'Enter value to add to all scores.';
                capHelp.style.display = 'inline';
                floorHelp.style.display = 'none';
                actionBadge.textContent = 'Capping at 99 enabled';
                actionBadge.className = 'badge bg-info text-white';
                startBtnText.textContent = 'Start Standardization';
                adjustValue.placeholder = 'e.g. 1.0';
                adjustValue.min = '0.1';
                adjustValue.max = '20';
                adjustValue.step = '0.1';
                adjustValue.value = '1.0';
                
                // Update warning
                const currentMax = parseFloat(maxScore || '0');
                if (currentMax + 1.0 > 99) {
                    warningMessage.textContent = `⚠️ Some scores will be capped at 99 (current max: ${currentMax})`;
                    adjustWarning.style.display = 'block';
                } else {
                    adjustWarning.style.display = 'none';
                }
            }
            
            // Reset modal state
            document.getElementById('progressContainer').style.display = 'none';
            document.getElementById('startAdjustBtn').style.display = 'inline-block';
            document.getElementById('processingBtn').style.display = 'none';
            document.getElementById('progressBar').style.width = '0%';
            document.getElementById('progressBar').textContent = '0%';
            document.getElementById('progressText').textContent = '0/0 scores processed';
            
            console.log('===================================');
        }

        // Add click handlers to standardize buttons
        standardizeBtns.forEach(function(btn) {
            btn.addEventListener('click', function(event) {
                event.preventDefault();
                openModal(this, 'standardize');
            });
        });

        // Add click handlers to destandardize buttons
        destandardizeBtns.forEach(function(btn) {
            btn.addEventListener('click', function(event) {
                event.preventDefault();
                openModal(this, 'destandardize');
            });
        });
        
        // Input validation
        document.getElementById('adjustValue').addEventListener('input', function() {
            const adjustValue = parseFloat(this.value) || 0;
            const action = document.getElementById('actionType').value;
            const minScoreText = document.getElementById('modalMinScore').textContent;
            const maxScoreText = document.getElementById('modalMaxScore').textContent;
            const minScore = parseFloat(minScoreText) || 0;
            const maxScore = parseFloat(maxScoreText) || 0;
            
            const warningEl = document.getElementById('adjustWarning');
            const warningMsg = document.getElementById('warningMessage');
            
            if (action === 'destandardize') {
                const newMin = minScore - adjustValue;
                if (newMin < 0) {
                    warningMsg.textContent = `⚠️ Subtracting ${adjustValue.toFixed(1)} will floor ${Math.abs(newMin)} scores at 0 (current min: ${minScore})`;
                    warningEl.style.display = 'block';
                } else {
                    warningEl.style.display = 'none';
                }
            } else {
                const newMax = maxScore + adjustValue;
                if (newMax > 99) {
                    warningMsg.textContent = `⚠️ Adding ${adjustValue.toFixed(1)} will cap scores at 99 (current max: ${maxScore})`;
                    warningEl.style.display = 'block';
                } else {
                    warningEl.style.display = 'none';
                }
            }
        });

        // Start button
        document.getElementById('startAdjustBtn').addEventListener('click', function() {
            const subjectId = document.getElementById('subjectId').value;
            const action = document.getElementById('actionType').value;
            const adjustValue = parseFloat(document.getElementById('adjustValue').value) || 1.0;
            
            console.log('===================================');
            console.log('START BUTTON CLICKED');
            console.log('  subjectId:', subjectId);
            console.log('  action:', action);
            console.log('  adjustValue:', adjustValue);
            
            if (!subjectId) {
                console.error('❌ No subject ID in modal!');
                showError('Subject ID not found in modal');
                return;
            }
            
            // Show progress UI
            this.style.display = 'none';
            document.getElementById('processingBtn').style.display = 'inline-block';
            document.getElementById('progressContainer').style.display = 'block';
            
            document.getElementById('progressBar').style.width = '10%';
            document.getElementById('progressBar').textContent = '10%';
            document.getElementById('progressText').textContent = 'Starting...';
            
            const projectId = document.getElementById('projectId').value;
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
            
            // Determine URL based on action
            let url;
            if (action === 'destandardize') {
                url = `/projects/${projectId}/subject/${subjectId}/destandardize/`;
            } else {
                url = `/projects/${projectId}/subject/${subjectId}/standardize/`;
            }
            
            console.log('Fetch URL:', url);
            
            // Build request body
            const bodyData = action === 'destandardize' 
                ? { subtract_value: adjustValue }
                : { add_value: adjustValue };
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify(bodyData)
            })
            .then(response => {
                console.log('Response status:', response.status);
                
                if (!response.ok) {
                    return response.text().then(text => {
                        try {
                            const json = JSON.parse(text);
                            throw new Error(json.error || `HTTP error! status: ${response.status}`);
                        } catch (e) {
                            throw new Error(`HTTP error! status: ${response.status}. Response: ${text.substring(0, 100)}`);
                        }
                    });
                }
                return response.json();
            })
            .then(data => {
                console.log('Response data:', data);
                if (data.success) {
                    // Start polling for progress
                    const taskPrefix = action === 'destandardize' ? 'destd' : 'std';
                    startProgressPolling(data.task_id, data.total, projectId, taskPrefix, action);
                } else {
                    throw new Error(data.error || 'Unknown error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showError(error.message);
                
                document.getElementById('startAdjustBtn').style.display = 'inline-block';
                document.getElementById('processingBtn').style.display = 'none';
                document.getElementById('progressContainer').style.display = 'none';
            });
        });

        // Progress polling function
        function startProgressPolling(taskId, total, projectId, taskPrefix, action) {
            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}/standardization-progress/${taskId}/`;
                
                fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return 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);
                        
                        let message = '';
                        const actionName = action === 'destandardize' ? 'destandardized' : 'standardized';
                        
                        if (data.capped_count > 0 || data.floored_count > 0) {
                            const capped = data.capped_count || 0;
                            const floored = data.floored_count || 0;
                            let parts = [];
                            if (capped > 0) parts.push(`${capped} capped at 99`);
                            if (floored > 0) parts.push(`${floored} floored at 0`);
                            message = `✅ ${data.processed || total} scores ${actionName}! (${parts.join(', ')})`;
                            
                            if (data.capped_details) {
                                console.log('📊 Adjustment Details:');
                                data.capped_details.forEach(function(detail) {
                                    console.log(`  Student ${detail.student}: ${detail.current} → ${detail.new} (${detail.action})`);
                                });
                            }
                        } else {
                            message = `✅ ${data.processed || total} scores ${actionName} successfully!`;
                        }
                        showSuccess(message);
                        
                        setTimeout(function() {
                            location.reload();
                        }, 2000);
                    }
                })
                .catch(error => {
                    console.error('Progress polling error:', error);
                });
            }, 1000);
            
            window.currentInterval = interval;
        }

        // Toast functions
        function showSuccess(message) {
            document.getElementById('toastMessage').textContent = message;
            const toastElement = document.getElementById('successToast');
            if (typeof bootstrap !== 'undefined') {
                const toast = new bootstrap.Toast(toastElement);
                toast.show();
            }
        }

        function showError(message) {
            document.getElementById('errorMessage').textContent = message;
            const toastElement = document.getElementById('errorToast');
            if (typeof bootstrap !== 'undefined') {
                const toast = new bootstrap.Toast(toastElement);
                toast.show();
            } else {
                alert('Error: ' + message);
            }
        }
        
        // Reset on modal hide
        const modalElement = document.getElementById('standardizeModal');
        modalElement.addEventListener('hidden.bs.modal', function() {
            console.log('📝 Modal hidden - cleaning up');
            if (window.currentInterval) {
                clearInterval(window.currentInterval);
                window.currentInterval = null;
            }
            
            document.getElementById('startAdjustBtn').style.display = 'inline-block';
            document.getElementById('processingBtn').style.display = 'none';
            document.getElementById('progressContainer').style.display = 'none';
        });
        
        console.log('Initialization complete - ready for testing');
    });
})();
</script>
{% endblock %}
{% endblock %}