{% extends "base.html" %}

{% block title %}AI Grading Agent Setup - AnZar{% endblock %}

{% block extra_css %}
<style>
    /* Question Card Styling */
    .question-card {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        margin-bottom: 0.75rem;
        transition: box-shadow var(--transition-base);
    }

    .question-card:hover {
        box-shadow: var(--shadow-md);
    }

    .question-header {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        align-items: center;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }

    .question-title {
        font-weight: 600;
        color: var(--text-primary);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .question-actions {
        display: inline-flex;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: nowrap;
    }

    .question-points {
        background: var(--color-primary-alpha);
        color: var(--color-primary);
        padding: 0.125rem 0.5rem;
        border-radius: var(--radius-full);
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .question-meta {
        display: grid;
        grid-template-columns: 1fr 160px;
        gap: 0.75rem;
        padding: 0.75rem 1rem 1rem 1rem;
        background: var(--bg-primary);
    }

    .status-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        align-items: center;
        min-width: 0;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-full);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        white-space: nowrap;
        line-height: 1;
    }

    .status-pill.complete {
        border-color: var(--color-success);
        color: var(--color-success);
        background: var(--color-success-alpha, rgba(16, 185, 129, 0.1));
    }

    .status-pill.missing {
        border-color: var(--color-warning);
        color: var(--color-warning);
        background: var(--color-warning-alpha, rgba(245, 158, 11, 0.1));
    }

    .question-summary {
        text-align: right;
        color: var(--text-tertiary);
        font-size: 0.75rem;
    }

    .progress-bar {
        width: 100%;
        height: 6px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-full);
        overflow: hidden;
        margin-top: 0.35rem;
    }

    .progress-fill {
        display: block;
        height: 100%;
        background: var(--color-primary);
        width: 0%;
        transition: width 0.2s ease;
    }

    /* Question Details (Expandable) */
    .question-details {
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--border-color);
        background: var(--bg-primary);
        display: none;
    }

    .question-details.expanded {
        display: block;
    }

    .question-text-display {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 1rem;
        margin-bottom: 1rem;
        color: var(--text-primary);
        font-style: italic;
    }

    .criteria-section {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .section-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color);
    }

    .section-header h4 {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
    }

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

    .stat-card {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        text-align: center;
        box-shadow: var(--shadow-sm);
    }

    .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }

    .stat-label {
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

    /* Form Grid */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .form-grid .form-group {
        grid-column: span 2;
    }

    .form-grid .form-group.span-3 {
        grid-column: span 3;
    }

    .form-grid .form-group.span-1 {
        grid-column: span 1;
    }

    @media (max-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr;
        }

        .form-grid .form-group,
        .form-grid .form-group.span-3,
        .form-grid .form-group.span-1 {
            grid-column: span 1;
        }
    }

    /* Action Buttons */
    .action-btn {
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 0.25rem;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-fast);
    }

    .action-btn:hover {
        background: var(--bg-secondary);
    }

    .action-btn.delete {
        color: var(--color-danger);
    }

    .action-btn.delete:hover {
        background: var(--color-danger-alpha, rgba(239, 68, 68, 0.1));
    }

    /* Loading States */
    .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 2rem;
        color: var(--text-secondary);
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 3rem;
    }

    .empty-state i {
        font-size: 3rem;
        color: var(--text-tertiary);
        margin-bottom: 1rem;
    }

    .empty-state h3 {
        color: var(--text-secondary);
        margin: 1rem 0;
    }

    .empty-state p {
        color: var(--text-tertiary);
    }

    /* Filter Toggle */
    .filter-toggle {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        font-size: 0.875rem;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .filter-toggle:hover {
        background: var(--bg-tertiary);
    }

    .filter-toggle input[type="checkbox"] {
        margin: 0;
    }

    /* Workflow Steps */
    .workflow-steps {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0.5rem 0;
    }

    .workflow-step {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: var(--radius-full);
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        transition: all var(--transition-base);
    }

    .workflow-step .step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.75rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .workflow-step.completed {
        color: var(--color-success);
    }

    .workflow-step.completed .step-number {
        background: var(--color-success);
        color: white;
    }

    .workflow-step.active {
        color: var(--color-primary);
    }

    .workflow-step.active .step-number {
        background: var(--color-primary);
        color: white;
    }

    .workflow-step.pending {
        color: var(--text-tertiary);
    }

    .workflow-step.pending .step-number {
        background: var(--bg-secondary);
        border: 1.5px solid var(--border-color);
        color: var(--text-tertiary);
    }

    .workflow-connector {
        width: 2.5rem;
        height: 2px;
        background: var(--border-color);
        flex-shrink: 0;
    }

    .workflow-connector.completed {
        background: var(--color-success);
    }

    @media (max-width: 640px) {
        .workflow-steps {
            flex-direction: column;
            gap: 0.25rem;
        }
        .workflow-connector {
            width: 2px;
            height: 1.25rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div x-data="assignmentAgentSetup()">
    <!-- Page Header -->
    <div class="page-header mb-4">
        <h1 class="page-title">Grading Setup</h1>
        <p class="page-subtitle">Configure grading parameters before the agent runs</p>
    </div>

    <!-- Status Summary -->
    <div x-show="!loading" class="card mb-4" style="background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);">
        <div class="card-body" style="padding: 1.5rem;">
            <!-- 3-Step Workflow Indicator (always visible) -->
            <div class="workflow-steps">
                <!-- Step 1: Define Questions -->
                <div class="workflow-step" :class="hasQuestions ? 'completed' : 'active'">
                    <span class="step-number">
                        <template x-if="hasQuestions"><i class="ph-check" style="font-size: 0.8rem;"></i></template>
                        <template x-if="!hasQuestions"><span>1</span></template>
                    </span>
                    <span>Define Questions</span>
                </div>

                <div class="workflow-connector" :class="hasQuestions ? 'completed' : ''"></div>

                <!-- Step 2: Parse Submissions -->
                <div class="workflow-step" :class="csvExists ? 'completed' : (hasQuestions ? 'active' : 'pending')">
                    <span class="step-number">
                        <template x-if="csvExists"><i class="ph-check" style="font-size: 0.8rem;"></i></template>
                        <template x-if="!csvExists"><span>2</span></template>
                    </span>
                    <span>Parse Submissions</span>
                </div>

                <div class="workflow-connector" :class="csvExists ? 'completed' : ''"></div>

                <!-- Step 3: Grade with AI -->
                <div class="workflow-step" :class="csvExists && hasQuestions ? (gradingStats.gradedItems > 0 ? 'completed' : 'active') : 'pending'">
                    <span class="step-number">
                        <template x-if="gradingStats.gradedItems > 0 && csvExists"><i class="ph-check" style="font-size: 0.8rem;"></i></template>
                        <template x-if="!(gradingStats.gradedItems > 0 && csvExists)"><span>3</span></template>
                    </span>
                    <span>Grade with AI</span>
                </div>
            </div>

            <!-- Stats grid (only when CSV exists) -->
            <template x-if="csvExists">
                <div>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1.25rem; margin-bottom: 1.5rem;">
                        <!-- Students -->
                        <div>
                            <div style="color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.5rem;">
                                <i class="ph-users"></i> Students
                            </div>
                            <div style="font-size: 1.25rem; font-weight: 600;" x-text="gradingStats.totalStudents || '...'"></div>
                        </div>

                        <!-- Questions -->
                        <div>
                            <div style="color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.5rem;">
                                <i class="ph-list-checks"></i> Questions
                            </div>
                            <div style="font-size: 1.25rem; font-weight: 600;" x-text="gradingStats.totalQuestions || questionCount"></div>
                        </div>

                        <!-- Grading Progress -->
                        <div style="grid-column: span 2;">
                            <div style="color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.5rem;">
                                <i class="ph-chart-bar"></i> Grading Progress
                            </div>
                            <div style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">
                                <span x-text="gradingStats.gradedItems || 0"></span> of <span x-text="gradingStats.totalItems || '...'"></span> graded
                                <span x-show="gradingStats.totalItems > 0" style="color: var(--text-secondary); font-size: 0.875rem; margin-left: 0.5rem;">
                                    (<span x-text="gradingStats.percentageGraded || 0"></span>%)
                                </span>
                            </div>
                            <div class="progress-bar" style="height: 8px;">
                                <span class="progress-fill" :style="'width: ' + (gradingStats.percentageGraded || 0) + '%'"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Force Regrade Option -->
                    <div style="padding: 1rem; background: var(--bg-primary); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
                        <label style="display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-weight: 500;">
                            <input type="checkbox" x-model="forceRegrade" style="width: 18px; height: 18px; cursor: pointer;">
                            <span>Force re-grade all students (overwrite existing grades)</span>
                        </label>
                        <p style="margin: 0.5rem 0 0 2rem; font-size: 0.875rem; color: var(--text-secondary);">
                            When checked, all students will be graded even if they already have grades. Leave unchecked to only grade ungraded submissions.
                        </p>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- Define Grading Criteria -->
    <div class="card mb-4">
        <div class="card-header">
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem;">
                <h3 class="card-title">
                    <i class="ph-list-checks"></i>
                    Define Grading Criteria
                </h3>
                <div style="display: flex; gap: 0.5rem; align-items: center;">
                    <label class="filter-toggle">
                        <input type="checkbox" x-model="filterIncomplete">
                        Show incomplete only
                    </label>
                    <button @click="addNewQuestion()" class="btn btn-primary">
                        <i class="ph-plus"></i>
                        Add Question
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <!-- Loading State -->
            <div x-show="loading" class="loading">
                <div class="spinner"></div>
                <p x-text="loadingMessage"></p>
            </div>

            <!-- Info Alert -->
            <div x-show="!loading && infoMessage" :class="'alert alert-' + infoType">
                <i :class="getInfoIcon()"></i>
                <strong x-show="infoType === 'success'">Success</strong>
                <strong x-show="infoType === 'warning'">Notice:</strong>
                <strong x-show="infoType === 'danger'">Error:</strong>
                <strong x-show="infoType === 'info'">Info:</strong>
                <span x-text="infoMessage"></span>
            </div>

            <!-- Questions List -->
            <div style="display: grid; gap: 0.75rem;">
                <template x-for="(question, index) in filteredQuestions" :key="question.tempId">
                    <div class="question-card" :data-question-index="index">
                        <!-- Question Header -->
                        <div class="question-header">
                            <div class="question-title" :title="question.text" x-text="getQuestionTitle(question, index)"></div>
                            <div class="question-actions">
                                <span class="question-points" x-text="(question.points || 10) + ' pts'"></span>
                                <button class="btn btn-sm btn-outline" @click="openCalibration(question)" style="font-size: 0.8125rem;" :disabled="!csvExists || questionsChanged" :title="!csvExists ? 'Parse submissions first' : 'Grade 2-3 submissions with these criteria first, nothing is saved'">
                                    <i class="ph-beaker"></i>
                                    Trial
                                </button>
                                <button class="btn btn-sm btn-success" @click="gradeQuestion(index)" style="font-size: 0.8125rem;" :disabled="!csvExists || questionsChanged" :title="!csvExists ? 'Parse submissions first' : (questionsChanged ? 'Re-parse required after modifying questions' : 'Grade this question')">
                                    <i class="ph-graduation-cap"></i>
                                    Grade Question
                                </button>
                                <button class="btn btn-sm btn-primary" @click="checkConsistency(index)" style="font-size: 0.8125rem;" :disabled="!csvExists || questionsChanged" :title="!csvExists ? 'Parse submissions first' : (questionsChanged ? 'Re-parse required after modifying questions' : 'Check grading consistency')">
                                    <i class="ph-chart-line"></i>
                                    Check Consistency
                                </button>
                                <button class="action-btn" @click="toggleQuestion(index)" title="Expand / Collapse">
                                    <i :class="question.isExpanded ? 'ph-caret-up' : 'ph-caret-down'"></i>
                                </button>
                                <button class="action-btn delete" @click="deleteQuestion(index)" title="Delete Question">
                                    <i class="ph-trash"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Question Meta -->
                        <div class="question-meta">
                            <div class="status-pills">
                                <template x-for="chip in getQuestionChips(question).chips" :key="chip.label">
                                    <span :class="chip.class">
                                        <i :class="chip.icon"></i>
                                        <span x-text="chip.label"></span>
                                    </span>
                                </template>
                            </div>
                            <div class="question-summary">
                                <span x-text="getQuestionChips(question).summaryText"></span>
                                <div class="progress-bar">
                                    <span class="progress-fill" :style="'width: ' + getQuestionChips(question).completion + '%'"></span>
                                </div>
                            </div>
                        </div>

                        <!-- Question Details (Expandable) -->
                        <div class="question-details" :class="question.isExpanded ? 'expanded' : ''">
                            <div class="question-text-display" x-text="question.text || 'Question text'"></div>

                            <div class="criteria-section">
                                <div class="section-header">
                                    <i class="ph-list-checks"></i>
                                    <h4>Grading Criteria</h4>
                                </div>

                                <!-- Question Text and Points First -->
                                <div class="form-grid">
                                    <div class="form-group span-3">
                                        <label class="form-label"><i class="ph-text-t"></i> Question Text <span style="color: var(--color-danger);">*</span></label>
                                        <input class="form-control" x-model="question.text" data-field="text" placeholder="Enter the question text...">
                                        <small style="color: var(--text-secondary);">The question students need to answer.</small>
                                    </div>
                                    <div class="form-group span-1">
                                        <label class="form-label"><i class="ph-coins"></i> Points <span style="color: var(--color-danger);">*</span></label>
                                        <input type="number" class="form-control" x-model.number="question.points" data-field="points" min="0" placeholder="10">
                                        <small style="color: var(--text-secondary);">Maximum points.</small>
                                    </div>
                                </div>

                                <!-- Then Grading Criteria -->
                                <div class="form-group">
                                    <label class="form-label"><i class="ph-check-circle"></i> Correct Answer / Key Points <span style="color: var(--color-danger);">*</span></label>
                                    <textarea class="form-control" x-model="question.correct_answer" data-field="correct_answer" placeholder="Enter the correct answer or key points..." rows="3"></textarea>
                                    <small style="color: var(--text-secondary);">The correct answer or key points that students should include.</small>
                                </div>

                                <div class="form-group">
                                    <label class="form-label"><i class="ph-clipboard-text"></i> Grading Rubric <span style="color: var(--color-danger);">*</span></label>
                                    <textarea class="form-control" x-model="question.grading_rubric" data-field="grading_rubric" placeholder="Enter criteria for partial credit..." rows="3"></textarea>
                                    <small style="color: var(--text-secondary);">Detailed criteria for how points will be awarded.</small>
                                </div>

                                <div class="form-group">
                                    <label class="form-label"><i class="ph-thumbs-up"></i> Examples of Good Answers (Optional)</label>
                                    <textarea class="form-control" x-model="question.good_examples" data-field="good_examples" rows="2" placeholder="Provide examples of high-quality responses..."></textarea>
                                    <small style="color: var(--text-secondary);">Example answers that demonstrate excellent understanding.</small>
                                </div>

                                <div class="form-group">
                                    <label class="form-label"><i class="ph-thumbs-down"></i> Examples of Poor Answers (Optional)</label>
                                    <textarea class="form-control" x-model="question.bad_examples" data-field="bad_examples" rows="2" placeholder="Provide examples of poor or incorrect responses..."></textarea>
                                    <small style="color: var(--text-secondary);">Example answers that show common mistakes or misunderstandings.</small>
                                </div>

                                <div class="form-group">
                                    <label class="form-label"><i class="ph-list-numbers"></i> Examples of Graded Answers (Optional)</label>
                                    <textarea class="form-control" x-model="question.graded_examples" data-field="graded_examples" rows="2" placeholder="Provide examples with specific grades..."></textarea>
                                    <small style="color: var(--text-secondary);">Sample answers with their grades to help calibrate the AI grading.</small>
                                </div>

                                <div class="form-group">
                                    <label class="form-label"><i class="ph-chat-text"></i> Feedback Format Instructions (Optional)</label>
                                    <div style="display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem;">
                                        <template x-for="preset in feedbackPresets" :key="preset.label">
                                            <button type="button"
                                                    class="btn btn-sm"
                                                    :class="question.feedback_format === preset.value ? 'btn-primary' : 'btn-outline'"
                                                    :title="preset.description"
                                                    @click="applyFeedbackPreset(index, preset.value)"
                                                    style="font-size: 0.75rem; padding: 0.25rem 0.625rem;">
                                                <i :class="preset.icon"></i>
                                                <span x-text="preset.label"></span>
                                            </button>
                                        </template>
                                    </div>
                                    <textarea class="form-control" x-model="question.feedback_format" data-field="feedback_format" rows="3" placeholder="e.g., 'Start with a positive comment...'"></textarea>
                                    <small style="color: var(--text-secondary);">Choose a preset or write your own instructions for how the AI should format feedback.</small>
                                </div>

                                <div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;">
                                    <button class="btn btn-outline btn-sm" @click="cancelEdit(index)">Close</button>
                                    <button class="btn btn-primary btn-sm" @click="saveQuestion(index)">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Empty State -->
            <div x-show="!loading && !hasQuestions" class="empty-state">
                <i class="ph-question"></i>
                <h3>No questions yet</h3>
                <p>Click "Add Question" to create your first question.</p>
            </div>

            <!-- Action Buttons -->
            <div x-show="hasQuestions" style="border-top: 1px solid var(--border-color); padding-top: 1.5rem; margin-top: 1.5rem;">
                <!-- Questions Changed Warning (only when CSV exists but needs reparse) -->
                <div x-show="questionsChanged && csvExists" class="alert alert-warning" style="margin-bottom: 1rem;">
                    <i class="ph-warning"></i>
                    <div>
                        <h4 style="margin: 0 0 0.25rem 0;">Re-parse Required</h4>
                        <p style="margin: 0; font-size: 0.875rem;" x-text="questionsChangedMessage"></p>
                        <p style="margin: 0.5rem 0 0 0; font-size: 0.875rem;">
                            <strong>Re-parsing will delete all existing grades.</strong> Click "Re-parse Submissions" when you're ready to update the CSV.
                        </p>
                    </div>
                </div>

                <!-- Parse-first hint -->
                <div x-show="!csvExists && !parsing" class="alert alert-info" style="margin-bottom: 1rem;">
                    <i class="ph-arrow-right"></i>
                    <span>Click <strong>Parse Submissions</strong> to create the CSV file. Grading requires a parsed CSV.</span>
                </div>

                <!-- Parsing Status -->
                <div x-show="parsing" style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--bg-secondary); border-radius: var(--radius-md); margin-bottom: 1rem;">
                    <div class="spinner" style="width: 20px; height: 20px; border-width: 2px;"></div>
                    <span style="color: var(--text-secondary); font-size: 0.875rem;">Parsing submissions... This may take a few minutes.</span>
                </div>

                <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between;">
                    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
                        <!-- Parse Button -->
                        <button @click="parseSubmissions()"
                                class="btn btn-lg"
                                :class="questionsChanged ? 'btn-warning' : (csvExists ? 'btn-outline' : 'btn-primary')"
                                :disabled="parsing">
                            <i class="ph-file-text"></i>
                            <span x-text="questionsChanged ? 'Re-parse Required' : (csvExists ? 'Re-parse Submissions' : 'Parse Submissions')"></span>
                        </button>

                        <!-- Grade Button (only shown when CSV exists) -->
                        <button x-show="csvExists"
                                @click="runAgent()"
                                class="btn btn-success btn-lg"
                                :disabled="parsing || questionsChanged"
                                :title="questionsChanged ? 'Re-parse required after modifying questions' : 'Start AI grading'">
                            <i class="ph-play"></i>
                            Grade with AI
                        </button>
                    </div>

                    <!-- Review Grades Button -->
                    <button x-show="csvExists && gradingStats.gradedItems > 0"
                            @click="navigateTo('grade_review_v2.html')"
                            class="btn btn-primary btn-lg">
                        <i class="ph-clipboard-text"></i>
                        Review Grades
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Calibration trial run: grade 2-3 submissions, preview only, nothing saved -->
    <div x-show="calibOpen" x-cloak class="modal-backdrop" :class="calibOpen ? 'active' : ''" @click="closeCalibration()" style="z-index: 1200;">
        <div class="modal" @click.stop="null" style="max-width: 720px;">
            <div class="modal-header">
                <h3 class="modal-title"><i class="ph-beaker"></i> Trial Run - nothing is saved</h3>
                <button class="btn-close" @click="closeCalibration()">&times;</button>
            </div>
            <div class="modal-body">
                <p style="margin-top: 0; color: var(--text-secondary); font-size: 0.875rem;"
                   x-text="'Question: ' + calibTitle + ' (max ' + calibMaxPoints + ' pts)'"></p>
                <p style="color: var(--text-secondary); font-size: 0.875rem;">
                    Grade up to 3 submissions with these criteria to sanity-check the outcome
                    before committing to a full round.
                </p>

                <div x-show="calibLoading" style="text-align: center; padding: 1.5rem;">
                    <div class="spinner" style="margin: 0 auto;"></div>
                </div>

                <div x-show="!calibLoading && calibError" x-cloak
                     style="color: var(--color-danger); font-size: 0.875rem; padding: 0.5rem 0;" x-text="calibError"></div>

                <!-- Pick submissions -->
                <template x-if="!calibLoading && !calibResults && calibStudents.length > 0">
                    <div>
                        <template x-for="s in calibStudents" :key="s.student_id">
                            <label style="display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer;">
                                <input type="checkbox" :checked="calibSelected.includes(s.student_id)"
                                       @change="toggleCalibStudent(s.student_id)"
                                       :disabled="!calibSelected.includes(s.student_id) && calibSelected.length >= 3">
                                <div style="min-width: 0;">
                                    <div style="font-weight: 600;" x-text="s.student_name"></div>
                                    <div style="font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px;"
                                         x-text="s.answer_preview || '(no recorded answer)'"></div>
                                </div>
                            </label>
                        </template>
                    </div>
                </template>

                <!-- Results -->
                <template x-if="calibResults">
                    <div>
                        <div style="font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.75rem;"
                             x-text="calibResults.message + ' (max ' + calibResults.max_points + ' pts)'"></div>
                        <template x-for="p in calibResults.previews" :key="p.student_id">
                            <div style="border: 1px solid var(--border-color); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem;">
                                <div style="display: flex; align-items: center; gap: 0.5rem;">
                                    <strong x-text="p.student_name"></strong>
                                    <template x-if="p.success">
                                        <span class="badge badge-success" style="margin-left: auto;"
                                              x-text="p.points + ' / ' + calibResults.max_points + ' pts'"></span>
                                    </template>
                                    <template x-if="!p.success">
                                        <span class="badge badge-danger" style="margin-left: auto;">failed</span>
                                    </template>
                                    <span x-show="p.success && p.confidence !== null && p.confidence !== undefined && p.confidence < 0.6"
                                          x-cloak title="The AI response was only partially parseable"
                                          style="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);">check</span>
                                </div>
                                <div x-show="p.answer_preview" style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.4rem; max-height: 3.6rem; overflow: hidden;"
                                     x-text="'Answer: ' + p.answer_preview"></div>
                                <div x-show="p.feedback" style="font-size: 0.8125rem; margin-top: 0.5rem; white-space: pre-wrap;" x-text="p.feedback"></div>
                                <div x-show="p.error" x-cloak style="font-size: 0.8125rem; color: var(--color-danger); margin-top: 0.4rem;" x-text="p.error"></div>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
            <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 0.75rem;">
                <button class="btn btn-secondary" @click="closeCalibration()">Close</button>
                <button class="btn btn-secondary" @click="calibResults = null" x-show="calibResults" x-cloak>Pick different submissions</button>
                <button class="btn btn-primary" @click="runCalibration()"
                        :disabled="calibRunning || calibSelected.length === 0 || !!calibResults">
                    <i class="ph-play"></i>
                    <span x-text="calibRunning ? 'Grading trial...' : 'Run trial'"></span>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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