{% 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;
    }

    .question-counter {
        margin-top: 0.75rem;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.15);
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: 1.125rem;
    }

    /* Alpine's :style binding overwrites the whole inline style attribute, so
       everything that makes the aggregate bar visible lives in this class and
       the binding carries the width only. */
    .run-bar-fill {
        height: 100%;
        background: #10b981;
        border-radius: 999px;
        transition: width 0.4s ease;
    }

    .progress-header.run-complete .run-bar-fill {
        background: rgba(255, 255, 255, 0.9);
    }

    .qp-chip {
        padding: 0.25rem 0.65rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.18);
    }

    .qp-chip.done {
        background: #10b981;
        color: #ffffff;
    }

    .qp-chip.grading {
        background: #3b82f6;
        color: #ffffff;
    }

    .qp-chip.failed,
    .qp-chip.stopped {
        background: #f59e0b;
        color: #ffffff;
    }

    .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="assignmentGradingProgress()" class="grading-progress-page">
    <!-- Progress Header -->
    <div class="progress-header" :class="gradingComplete ? 'run-complete' : ''" :style="gradingComplete ? (totalFailed === 0 ? 'background: linear-gradient(135deg, var(--color-success), #059669)' : 'background: linear-gradient(135deg, var(--color-warning), #d97706)') : ''">
        <h1>
            <i :class="gradingComplete ? (totalFailed === 0 ? 'ph-check-circle' : 'ph-warning-circle') : (isGrading ? 'ph-circle-notch spinning' : 'ph-play-circle')"></i>
            <span x-text="gradingComplete ? completionMessage : (stopping ? 'Stopping after the current submission...' : (isGrading ? 'Grading Assignment Questions' : 'Ready to grade'))"></span>
        </h1>
        <!-- Question Counter: fallback until the live banner below knows which round is grading -->
        <div class="question-counter" x-show="totalQuestions > 1 && isGrading && !activeQuestionText">
            Grading Question <span x-text="currentQuestionNumber"></span> of <span x-text="totalQuestions"></span>
        </div>
        <!-- Multi-question run widget: aggregate bar with live percentage,
             active-round banner, and a collapsible per-question chip grid.
             The bar reads the run's own numbers, so it keeps filling across
             question boundaries instead of restarting with each round. -->
        <div x-show="questionProgress.length > 0 && isGrading" x-cloak style="margin-top: 0.9rem;">
            <div style="background: rgba(255, 255, 255, 0.25); border-radius: 999px; height: 12px; overflow: hidden;">
                <div class="run-bar-fill" :style="`width: ${runPercent.toFixed(1)}%`"></div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 0.45rem;">
                <span style="font-size: 0.85rem; font-weight: 700;"
                      x-text="runPercent.toFixed(0) + '% of all submissions graded'">0% of all submissions graded</span>
                <button type="button" @click="showQuestionDetails = !showQuestionDetails"
                        x-show="questionProgress.length > 1"
                        style="background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap;"
                        x-text="showQuestionDetails ? 'Hide details' : 'Show details'">Show details</button>
            </div>
            <!-- Active round banner: the one question being graded right now -->
            <div x-show="activeQuestionText" x-cloak
                 style="margin-top: 0.5rem; font-size: 0.85rem; font-weight: 600;"
                 x-text="activeQuestionText"></div>
            <!-- Per-question chips: live status of each round in the run -->
            <div x-show="showQuestionDetails" x-transition
                 style="margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center;">
                <template x-for="(qp, qi) in questionProgress" :key="'qp' + qi">
                    <span class="qp-chip" :class="qp.status">
                        <span x-text="'Q' + (qi + 1)"></span>
                        <span x-show="qp.total > 0" x-text="' ' + (qp.processed || qp.done) + '/' + qp.total"></span>
                        <span x-show="qp.status === 'grading'" x-text="'  grading...'"></span>
                        <span x-show="qp.status === 'done'" x-text="'  done'"></span>
                        <span x-show="qp.status === 'stopped'" x-text="'  stopped'"></span>
                        <span x-show="qp.status === 'failed'" x-text="'  partial'"></span>
                        <span x-show="qp.status === 'skipped'" x-text="'  skipped'"></span>
                    </span>
                </template>
            </div>
        </div>
        <p x-show="isGrading" style="margin-top: 0.75rem; opacity: 0.9;" x-text="prepareQuestion(currentQuestionText) || 'Preparing questions...'"></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="backToSetup()">
                <i class="ph-arrow-left"></i>
                Back to Setup
            </button>
        </div>
    </div>

    <!-- Progress Stats: the run's totals, not the current round's. A bar that
         resets to 0/0 on every question cannot be read as progress. -->
    <div class="progress-stats">
        <div class="stat-card">
            <div class="stat-value" x-text="runGraded">0</div>
            <div class="stat-label">Graded</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" x-text="runKnownTotal || '?'">0</div>
            <div class="stat-label">Total</div>
        </div>
        <div class="stat-card" x-show="runFailedCount > 0" style="border-color: var(--color-warning);">
            <div class="stat-value" style="color: var(--color-warning);" x-text="runFailedCount">0</div>
            <div class="stat-label">Failed</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" x-text="runPercent.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>
            <span class="text-secondary" x-text="runProcessed + ' / ' + (runKnownTotal || '?')">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: ${runPercent}%`"
                 role="progressbar"></div>
        </div>
        <!-- The round the run is inside, for the row under the aggregate line -->
        <div x-show="isGrading && totalQuestions > 1 && gradingProgress.total > 0" x-cloak
             class="text-secondary" style="margin-top: 0.35rem; font-size: 0.8rem;">
            <span x-text="'Question ' + currentQuestionNumber + ' of ' + totalQuestions + ': ' +
                          gradingProgress.done + ' graded' +
                          (gradingProgress.failed > 0 ? ', ' + gradingProgress.failed + ' failed' : '') +
                          ' of ' + gradingProgress.total"></span>
        </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 x-show="result.lowConf" x-cloak
                                  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); margin-left: auto; margin-right: 0.5rem;"
                                  title="The AI response for this grade was only partially parseable">
                                <i class="ph-flag"></i> check
                            </span>
                            <span x-show="totalQuestions > 1" x-cloak
                                  title="Which question this grade belongs to"
                                  style="font-size: 0.6875rem; font-weight: 700; color: var(--color-primary); background: rgba(37, 99, 235, 0.12); border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 999px; padding: 0.1rem 0.5rem; text-transform: uppercase; margin-left: auto; margin-right: 0.5rem;"
                                  x-text="'Q' + (result.questionNumber || 1)"></span>
                            <span class="result-grade"
                                  :class="result.success ? 'success' : 'error'"
                                  x-text="result.success ? (result.score + ' pts') : 'failed'"></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="startGradingAllQuestions()"
                :disabled="activeTask"
                x-show="!isGrading && (!gradingComplete || canResume)">
            <i class="ph-play"></i>
            <span x-text="gradingComplete && canResume ? 'Continue grading' : '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="backToSetup()"
                x-show="!isGrading">
            <i class="ph-arrow-left"></i>
            Back to Setup
        </button>
    </div>

    <!-- Completion Summary: honest per-round outcome from backend counts -->
    <div x-show="gradingComplete" class="card mt-4">
        <div class="card-body text-center py-4">
            <i :class="totalFailed === 0 ? 'ph-check-circle' : 'ph-warning-circle'"
               :style="`font-size: 3rem; margin-bottom: 1rem; display: block; color: ${totalFailed === 0 ? 'var(--color-success)' : 'var(--color-warning)'}`"></i>
            <h3 x-text="completionMessage">Grading Complete</h3>
            <p class="text-muted">
                <span x-text="(runTotal ? runDone + ' of ' + runTotal : gradingProgress.done) + ' submissions graded this session'"></span>
                <span x-show="totalFailed > 0" x-text="totalFailed + ' failed submission(s) stay ungraded.'"></span>
            </p>
            <div x-show="totalFailed > 0" style="text-align: left; margin-top: 1rem;">
                <template x-for="(round, idx) in questionResults" :key="idx">
                    <div x-show="round.failed > 0" style="margin-bottom: 0.75rem;">
                        <div class="fw-bold" style="font-size: 0.9rem;"
                             x-text="'Question ' + (idx + 1) + ' (' + round.text + '): ' + round.failed + ' of ' + round.total + ' failed'"></div>
                        <template x-for="fs in round.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>
                </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/assignment_grading_progress.js"></script>
{% endblock %}