{% extends "base.html" %}

{% block title %}Grading History - AnZar{% endblock %}

{% block content %}
<div x-data="gradingHistoryPage()" x-init="init()">
    <div class="page-header">
        <h2>
            <i class="ph-clock-counter-clockwise"></i>
            Grading History
        </h2>
        <p>Every AI grading round that has been run, newest first</p>
    </div>

    <div style="max-width: 900px; margin: 0 auto;">

        <div class="card">
            <div class="card-header">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <h3 class="card-title">
                        <i class="ph-list-bullets"></i>
                        Grading Runs
                        <template x-if="!loading && runs.length > 0">
                            <span style="font-weight: 400; color: var(--text-secondary); font-size: 0.875rem;"
                                  x-text="'(' + runs.length + ')'"></span>
                        </template>
                    </h3>
                    <button @click="loadRuns()" class="btn btn-sm btn-secondary" :disabled="loading">
                        <i class="ph-arrows-clockwise"></i>
                        <span>Refresh</span>
                    </button>
                </div>
            </div>
            <div class="card-body">

                <!-- Loading -->
                <div x-show="loading" style="text-align: center; padding: 2rem;">
                    <div class="spinner" style="margin: 0 auto 1rem;"></div>
                    <p style="color: var(--text-secondary);">Loading run history...</p>
                </div>

                <!-- Load error -->
                <div x-show="!loading && loadError" x-cloak class="alert alert-warning">
                    <strong>Could not load history:</strong> <span x-text="loadError"></span>
                </div>

                <!-- Empty state -->
                <div x-show="!loading && !loadError && runs.length === 0" x-cloak
                     style="text-align: center; padding: 3rem 1rem;">
                    <i class="ph-clock-counter-clockwise" style="font-size: 3rem; color: var(--text-secondary); opacity: 0.4;"></i>
                    <p style="color: var(--text-secondary); margin-top: 1rem;">
                        No grading rounds have been recorded yet. Once you grade with AI,
                        each round appears here with its counts and outcome.
                    </p>
                </div>

                <!-- Run rows -->
                <template x-for="(run, idx) in runs" :key="run.run_id || idx">
                    <div class="run-row" style="display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--border-color, #e5e7eb);"
                         :title="run.error || (run.failed_students && run.failed_students.length ? 'Failed: ' + run.failed_students.map(s => s.student_name || s.student_id).join(', ') : '')">
                        <!-- Status chip -->
                        <span :style="'color: ' + statusOf(run).color + '; border-color: ' + statusOf(run).color + '55; background: ' + statusOf(run).color + '11; flex-shrink: 0; width: 110px; text-align: center; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid;'"
                              x-text="statusOf(run).text"></span>

                        <!-- Content + course -->
                        <div style="flex: 1; min-width: 0;">
                            <div style="display: flex; align-items: center; gap: 0.5rem;">
                                <i :class="typeIcon(run.content_type)" style="color: var(--text-secondary); flex-shrink: 0;"></i>
                                <span style="font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                      x-text="run.content_name || ('Content ' + run.content_id)"></span>
                                <span x-show="questionLabel(run)" x-cloak
                                      style="font-size: 0.75rem; color: var(--text-secondary); flex-shrink: 0;"
                                      x-text="questionLabel(run)"></span>
                            </div>
                            <div style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                <span x-text="run.course_name || ('Course ' + run.course_id)"></span>
                                <span x-show="run.source === 'offline'" x-cloak> · offline</span>
                                <span x-show="run.llm_model" x-cloak> · <span x-text="run.llm_model"></span></span>
                            </div>
                        </div>

                        <!-- Counts -->
                        <div style="flex-shrink: 0; width: 150px; font-size: 0.8125rem; text-align: right;">
                            <span x-text="(run.completed || 0) + ' / ' + (run.total || 0) + ' graded'"></span>
                            <span x-show="run.failed > 0" x-cloak
                                  style="color: #dc2626; margin-left: 0.4rem;"
                                  x-text="'· ' + run.failed + ' failed'"></span>
                        </div>

                        <!-- When + duration -->
                        <div style="flex-shrink: 0; width: 150px; font-size: 0.75rem; color: var(--text-secondary); text-align: right;">
                            <div x-text="formatDateTime(run.timestamp)"></div>
                            <div x-text="formatDuration(run.duration_s)"></div>
                        </div>
                    </div>
                </template>

                <!-- Load more -->
                <div x-show="!loading && runs.length >= limit" x-cloak style="text-align: center; padding-top: 1rem;">
                    <button @click="loadMore()" class="btn btn-secondary btn-sm">
                        <i class="ph-download-simple"></i>
                        <span>Load older runs</span>
                    </button>
                </div>

            </div>
        </div>

        <div style="margin-top: 1.5rem; text-align: center;">
            <button @click="backToDashboard()" class="btn btn-secondary">
                <i class="ph-arrow-left"></i>
                <span>Back to Dashboard</span>
            </button>
        </div>

    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/frontend/static/js/grading_history.js"></script>
{% endblock %}