{% extends "base.html" %}

{% block title %}Grading in Progress - Anzar{% endblock %}

{% block extra_css %}
<style>
    .grading-progress-page {
        max-width: 1000px;
        margin: 0 auto;
    }

    .progress-header {
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
        color: white;
        padding: 2rem;
        border-radius: var(--radius-lg);
        margin-bottom: 2rem;
        text-align: center;
    }

    .progress-header h1 {
        color: white;
        margin: 0;
        font-size: 1.75rem;
    }

    .progress-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: var(--bg-secondary);
        padding: 1.5rem;
        border-radius: var(--radius-md);
        text-align: center;
    }

    .stat-value {
        font-size: 2.5rem;
        font-weight: bold;
        color: var(--color-primary);
        margin-bottom: 0.5rem;
    }

    .stat-label {
        font-size: 0.875rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .progress-bar-container {
        background: var(--bg-secondary);
        padding: 1.5rem;
        border-radius: var(--radius-md);
        margin-bottom: 2rem;
    }

    .current-student-display {
        background: var(--bg-secondary);
        padding: 1.5rem;
        border-radius: var(--radius-md);
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .current-student-display i {
        font-size: 1.5rem;
        color: var(--color-primary);
    }

    .results-feed {
        background: white;
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .results-feed-header {
        background: var(--bg-secondary);
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .results-feed-body {
        max-height: 400px;
        overflow-y: auto;
        padding: 1rem;
    }

    .result-item {
        background: var(--bg-secondary);
        padding: 1rem;
        border-radius: var(--radius-sm);
        margin-bottom: 0.75rem;
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .result-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .student-name {
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .result-grade {
        font-weight: bold;
        padding: 0.25rem 0.75rem;
        border-radius: var(--radius-sm);
    }

    .result-grade.success {
        background: var(--color-success-bg);
        color: var(--color-success);
    }

    .result-grade.error {
        background: var(--color-danger-bg);
        color: var(--color-danger);
    }

    .result-feedback {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
        line-height: 1.5;
        white-space: pre-line;
    }

    .result-timestamp {
        font-size: 0.75rem;
        color: var(--text-tertiary);
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .empty-feed {
        text-align: center;
        padding: 3rem;
        color: var(--text-muted);
    }

    .empty-feed i {
        font-size: 3rem;
        margin-bottom: 1rem;
        display: block;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-top: 2rem;
    }

    .spinning {
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
</style>
{% endblock %}

{% block content %}
<div x-data="quizGradingProgress()" class="grading-progress-page">
    <!-- Progress Header -->
    <div class="progress-header" :style="gradingComplete ? ((failedStudents || []).length === 0 ? 'background: linear-gradient(135deg, var(--color-success), #059669)' : 'background: linear-gradient(135deg, var(--color-warning), #d97706)') : ''">
        <h1>
            <i :class="gradingComplete ? ((failedStudents || []).length === 0 ? 'ph-check-circle' : 'ph-warning-circle') : (isGrading ? 'ph-circle-notch spinning' : 'ph-play-circle')"></i>
            <span x-text="gradingComplete ? completionMessage : (isGrading ? (stopping ? 'Stopping after the current submission...' : (isRegrade ? 'Regrading in Progress' : 'Grading in Progress')) : 'Ready to grade')"></span>
        </h1>
        <div x-show="isRegrade && isGrading" style="margin: 0.5rem 0; padding: 0.75rem; background: rgba(245, 158, 11, 0.1); border-radius: var(--radius-md); border-left: 4px solid var(--color-warning);">
            <i class="ph-arrow-clockwise" style="color: var(--color-warning); margin-right: 0.5rem;"></i>
            <span style="color: var(--color-warning); font-weight: 600;" x-text="regradeMode === 'all' ? 'Regrading all students (overwriting existing grades)' : 'Regrading only ungraded students'"></span>
        </div>
        <p style="margin-top: 0.5rem; opacity: 0.9;" x-text="prepareQuestion(questionText) || 'Grading question...'"></p>
    </div>

    <!-- Missing context: static guidance with an explicit action instead of a timed auto-redirect -->
    <div x-show="contextError" x-cloak class="alert alert-warning mb-4">
        <i class="ph-warning-circle"></i>
        <div style="margin-top: 0.25rem;">
            <strong>Cannot start grading:</strong>
            <span x-text="contextError"></span>
        </div>
        <div style="margin-top: 0.75rem;">
            <button class="btn btn-secondary" @click="backToHub()">
                <i class="ph-arrow-left"></i>
                Back to Grading Hub
            </button>
        </div>
    </div>

    <!-- Progress Stats -->
    <div class="progress-stats">
        <div class="stat-card">
            <div class="stat-value" x-text="gradingProgress.done">0</div>
            <div class="stat-label">Graded</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" x-text="gradingProgress.total || '?'">0</div>
            <div class="stat-label">Total</div>
        </div>
        <div class="stat-card" x-show="gradingProgress.failed > 0" style="border-color: var(--color-warning);">
            <div class="stat-value" style="color: var(--color-warning);" x-text="gradingProgress.failed">0</div>
            <div class="stat-label">Failed</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" x-text="gradingProgress.percent.toFixed(1) + '%'">0%</div>
            <div class="stat-label">Progress</div>
        </div>
    </div>

    <!-- Progress Bar -->
    <div class="progress-bar-container">
        <div class="d-flex justify-content-between mb-2">
            <span class="fw-bold">Overall Progress</span>
            <!-- Rows the round finished with, failed ones included: the bar
                 measures the work got through, not only the rows graded. -->
            <span class="text-secondary" x-text="(gradingProgress.processed || gradingProgress.done) + ' / ' + (gradingProgress.total || '?')">0 / 0</span>
        </div>
        <div class="progress" style="height: 24px;">
            <div class="progress-bar"
                 :class="gradingComplete ? 'bg-success' : 'progress-bar-striped progress-bar-animated'"
                 :style="`width: ${gradingProgress.percent}%`"
                 role="progressbar"></div>
        </div>
    </div>

    <!-- Current Student Being Graded -->
    <div class="current-student-display" x-show="isGrading">
        <i class="ph-user-focus"></i>
        <div>
            <div class="fw-bold">Currently grading:</div>
            <div x-text="gradingProgress.currentStudent || 'Preparing...'">Preparing...</div>
        </div>
    </div>

    <!-- Live Results Feed -->
    <div class="card">
        <div class="results-feed-header">
            <h3 style="margin: 0; font-size: 1.125rem;">
                <i class="ph-list-checks"></i>
                Live Grading Results
            </h3>
            <label style="display: flex; align-items: center; gap: 0.5rem; margin: 0; cursor: pointer;">
                <input type="checkbox" x-model="autoScroll">
                <span style="font-size: 0.875rem;">Auto-scroll</span>
            </label>
        </div>
        <div class="results-feed-body" id="results-feed-body">
            <div x-show="!liveResults || liveResults.length === 0" class="empty-feed">
                <i class="ph-hourglass"></i>
                <p>Waiting for grading results...</p>
            </div>
            <div x-show="liveResults && liveResults.length > 0">
                <template x-for="result in liveResults" :key="result.studentId">
                    <div class="result-item">
                        <div class="result-header">
                            <span class="student-name">
                                <i class="ph-user"></i>
                                <span x-text="result.studentName"></span>
                            </span>
                            <span class="result-grade"
                                  :class="result.success ? 'success' : 'error'"
                                  x-text="result.success ? (result.score + ' pts') : 'failed'"></span>
                        </div>
                        <div x-show="result.lowConf" x-cloak style="margin-bottom: 0.25rem;">
                            <span style="display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: #d97706; background: rgba(217, 119, 6, 0.12); border: 1px solid rgba(217, 119, 6, 0.4);"
                                  title="The AI response for this grade was only partially parseable">
                                <i class="ph-flag"></i> check
                            </span>
                        </div>
                        <div class="result-feedback" x-text="result.success ? result.feedback : result.error"></div>
                        <div class="result-timestamp">
                            <i class="ph-clock"></i>
                            <span x-text="result.timestamp"></span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="action-buttons">
        <button class="btn btn-danger btn-lg"
                @click="stopGrading()"
                x-show="isGrading"
                :disabled="!canStop">
            <i class="ph-stop"></i>
            Stop Grading
        </button>
        <button class="btn btn-primary btn-lg"
                @click="startGrading()"
                x-show="!isGrading && (!gradingComplete || canResume)"
                :disabled="activeTask">
            <i class="ph-play"></i>
            <span x-text="gradingComplete && canResume ? 'Start again' : 'Start grading'"></span>
        </button>
        <button class="btn btn-success btn-lg"
                @click="reviewGrades()"
                x-show="!isGrading && (gradingComplete || gradingProgress.done > 0)">
            <i class="ph-clipboard-text"></i>
            Review Grades
        </button>
        <button class="btn btn-secondary btn-lg"
                @click="backToHub()"
                x-show="!isGrading">
            <i class="ph-arrow-left"></i>
            Back to Grading Hub
        </button>
    </div>

    <!-- Completion Summary: honest outcome from backend counts -->
    <div x-show="gradingComplete" class="card mt-4">
        <div class="card-body text-center py-4">
            <i :class="(failedStudents || []).length === 0 ? 'ph-check-circle' : 'ph-warning-circle'"
               :style="`font-size: 3rem; margin-bottom: 1rem; display: block; color: ${(failedStudents || []).length === 0 ? 'var(--color-success)' : 'var(--color-warning)'}`"></i>
            <h3 x-text="completionMessage">Grading Complete</h3>
            <p class="text-muted" x-text="gradingProgress.done + ' out of ' + gradingProgress.total + ' students graded'"></p>
            <div x-show="(failedStudents || []).length > 0" style="text-align: left; margin-top: 1rem;">
                <div class="fw-bold" style="font-size: 0.9rem;" x-text="(failedStudents || []).length + ' submission(s) failed and stay ungraded:'"></div>
                <template x-for="fs in failedStudents" :key="fs.student_id">
                    <div style="font-size: 0.8rem; color: var(--color-danger, #dc2626); padding-left: 1rem;"
                         x-text="fs.student_name + ': ' + fs.error"></div>
                </template>
            </div>
        </div>
    </div>

    <!-- Stop confirmation: in-app modal instead of the native confirm() dialog -->
    <div x-show="confirmStop" x-cloak class="modal-backdrop" :class="confirmStop ? 'active' : ''" @click="confirmStop = false" style="z-index: 1200;">
        <div class="modal modal-sm" @click.stop="null">
            <div class="modal-header">
                <h3 class="modal-title">Stop grading?</h3>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to stop? Progress made so far is saved.</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" @click="confirmStop = false">Keep grading</button>
                <button class="btn btn-danger" @click="stopGradingNow()">Stop grading</button>
            </div>
        </div>
    </div>
</div>

<script src="/frontend/static/js/quiz_grading_progress.js"></script>
{% endblock %}