{% extends "base.html" %}

{% block title %}Quiz Consistency Checker - AnZar{% endblock %}

{% block content %}
<div x-data="quizConsistencyChecker()" x-init="init()">
    <!-- Page Header -->
    <div class="page-header">
        <h1 class="page-title">Consistency Checker</h1>
        <p class="page-subtitle">Test your grading criteria to measure grading consistency.</p>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="card">
        <div class="card-body loading-state">
            <div class="spinner"></div>
            <p class="loading-text" x-text="loadingStudents ? 'Loading students...' : 'Loading consistency checker...'"></p>
        </div>
    </div>

    <!-- Error State -->
    <div x-show="error" class="card">
        <div class="card-body error-state">
            <i class="ph-warning-circle"></i>
            <h3>No Grading Criteria Found</h3>
            <p>Please configure grading criteria on the grade input page first, then return here.</p>
            <button class="btn btn-primary mt-2" @click="goBack()">
                <i class="ph-arrow-left"></i>
                Back
            </button>
        </div>
    </div>

    <!-- Main Content -->
    <div x-show="!loading && !error" class="main-container">
        <!-- Configuration Section (Visible before results) -->
        <div x-show="!showResults" class="config-column">
            <!-- Student Selection Card -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="ph-users"></i> Select Students to Test</h3>
                </div>
                <div class="card-body">
                    <input type="text" class="form-control mb-3" x-model="studentFilter" placeholder="Search students...">
                    <div class="btn-group mb-3">
                        <button type="button" class="btn btn-secondary" @click="selectAllStudents()"><i class="ph-check-square"></i> Select All</button>
                        <button type="button" class="btn btn-secondary" @click="selectRandomStudents()"><i class="ph-shuffle"></i> Random (5)</button>
                        <button type="button" class="btn btn-secondary" @click="clearSelection()"><i class="ph-x-square"></i> Clear</button>
                    </div>
                    <div class="student-list">
                        <template x-if="students.length === 0">
                            <p class="text-center text-secondary p-4">No sample answers are available for this question.</p>
                        </template>
                        <template x-for="student in filteredStudents" :key="student.id">
                            <div class="student-checkbox-label" @click="student.selected = !student.selected" :class="{'selected': student.selected}">
                                <input type="checkbox" x-model="student.selected" @click.stop>
                                <div class="student-info">
                                    <div class="student-name">
                                        <strong x-text="student.name"></strong>
                                        <small class="text-secondary" x-text="`(ID: ${student.id})`"></small>
                                    </div>
                                    <p class="answer-preview" x-text="student.answer"></p>
                                </div>
                            </div>
                        </template>
                    </div>
                    <p class="text-secondary mt-2"><strong x-text="selectedStudents.length"></strong> student(s) selected.</p>
                </div>
            </div>

            <!-- Configuration Card -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="ph-gear"></i> Test Configuration</h3>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Number of Runs per Student</label>
                        <select x-model="numRuns" class="form-control" @change="updateEstimatedTime()">
                            <option value="3">3 times</option>
                            <option value="5">5 times</option>
                            <option value="7">7 times</option>
                            <option value="10">10 times</option>
                        </select>
                        <small class="text-secondary">Each student's answer will be graded this many times to measure consistency.</small>
                    </div>

                    <!-- Progress Information -->
                    <div x-show="selectedStudents.length > 0 && !running" class="info-box">
                        <i class="ph-info"></i>
                        <div>
                            <div><strong x-text="totalTestCount"></strong> total grading operations</div>
                            <div class="text-small" x-show="estimatedTimeText" x-text="'Estimated time: ' + estimatedTimeText"></div>
                        </div>
                    </div>

                    <!-- Running Progress -->
                    <div x-show="running" class="info-box running">
                        <div class="spinner-sm"></div>
                        <div>
                            <div><strong>Running consistency test...</strong></div>
                            <div class="text-small" x-text="'Testing ' + selectedStudents.length + ' students with ' + numRuns + ' runs each'"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Prompt Preview Card (Required Step) -->
            <div class="card preview-card">
                <div class="card-header">
                    <h3 class="card-title"><i class="ph-code"></i> AI Prompt Preview</h3>
                    <span x-show="!hasReviewedPrompt" class="badge badge-warning">Review Required</span>
                </div>
                <div class="card-body">
                    <template x-if="!promptContent">
                        <div class="preview-placeholder">
                            <i class="ph-eye ph-4x"></i>
                            <p>Click "Generate Preview" to see the exact prompt that will be sent to the AI</p>
                            <button type="button" class="btn btn-primary" @click="showPromptPreviewContent()" :disabled="students.length === 0 || generatingPreview" :class="{'loading': generatingPreview}">
                                <i class="ph-eye"></i>
                                <span x-text="generatingPreview ? 'Generating...' : 'Generate Preview'"></span>
                            </button>
                        </div>
                    </template>
                    <template x-if="promptContent">
                        <div>
                            <div class="preview-header">
                                <p class="text-secondary mb-2">
                                    <i class="ph-info-fill"></i>
                                    This prompt will be used for grading. Review it to ensure your criteria are clear.
                                </p>
                                <button type="button" class="btn btn-sm btn-secondary" @click="showPromptPreviewContent()" :disabled="generatingPreview" :class="{'loading': generatingPreview}">
                                    <i class="ph-arrows-counter-clockwise"></i>
                                    <span x-text="generatingPreview ? 'Generating...' : 'Regenerate'"></span>
                                </button>
                            </div>
                            <div class="prompt-content" x-html="promptContentHtml"></div>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="action-buttons">
                <button type="button" class="btn btn-secondary" @click="goBack()">
                    <i class="ph-arrow-left"></i> Back
                </button>
                <button type="button" class="btn btn-primary btn-lg" @click="runConsistencyTest()" :disabled="!canRunTest || running" :class="{'loading': running}">
                    <i class="ph-play"></i>
                    <span x-text="running ? 'Running Test...' : 'Run Consistency Test'"></span>
                </button>
            </div>
        </div>

        <!-- Results Section (Visible after test) -->
        <template x-if="showResults && testResults">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="ph-chart-bar"></i> Test Results</h3>
                </div>
                <div class="card-body">
                    <div class="alert" :class="testResults.overallConsistency === 'Excellent' ? 'alert-success' : testResults.overallConsistency === 'Good' ? 'alert-info' : 'alert-warning'">
                        <div>
                            <h4>Overall Consistency: <span x-text="testResults.overallConsistency"></span></h4>
                            <p>Average Standard Deviation: <strong x-text="testResults.avgStdDev?.toFixed(2)"></strong></p>
                        </div>
                    </div>
                    <div class="results-grid">
                        <template x-for="student in testResults.processedResults" :key="student.studentId">
                            <details class="accordion-item">
                                <summary class="accordion-header">
                                    <div>
                                        <strong x-text="student.studentName"></strong>
                                        <div class="text-secondary text-small" x-text="`Mean: ${student.mean?.toFixed(2)}, Std Dev: ${student.std?.toFixed(2)}`"></div>
                                    </div>
                                    <span class="badge" :class="student.consistency === 'Excellent' ? 'bg-success' : student.consistency === 'Good' ? 'bg-info' : 'bg-warning'" x-text="student.consistency"></span>
                                </summary>
                                <div class="accordion-body">
                                    <template x-for="(grade, index) in student.grades" :key="index">
                                        <div class="feedback-item">
                                            <div class="grade-box">
                                                <div class="text-small text-secondary" x-text="`Run ${index + 1}`"></div>
                                                <div class="grade-value" x-text="grade?.toFixed(1)"></div>
                                            </div>
                                            <div class="feedback-text" x-text="student.feedbacks && student.feedbacks[index] ? student.feedbacks[index] : 'No feedback available'"></div>
                                        </div>
                                    </template>
                                </div>
                            </details>
                        </template>
                    </div>
                    <button type="button" class="btn btn-secondary mt-3" @click="clearResults()"><i class="ph-arrow-counter-clockwise"></i> Run New Test</button>
                </div>
            </div>
        </template>
    </div>
</div>

<style>
    /* Main Layout */
    .main-container { max-width: 900px; margin: 0 auto; }
    .config-column { display: flex; flex-direction: column; gap: 1.5rem; }

    /* Student Selection */
    .student-list { max-height: 400px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.5rem; }
    .student-checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; }
    .student-checkbox-label:hover { background-color: var(--bg-hover); }
    .student-checkbox-label.selected { background-color: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); }
    .student-checkbox-label input { margin-top: 0.25rem; cursor: pointer; }
    .student-info { flex: 1; min-width: 0; }
    .student-name { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.25rem; }
    .answer-preview { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }

    /* Info Boxes */
    .info-box { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem; border-radius: var(--radius-md); background-color: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.2); margin-top: 1rem; }
    .info-box.running { background-color: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.2); }
    .info-box i { font-size: 1.25rem; color: rgba(59, 130, 246, 0.8); flex-shrink: 0; }

    /* Preview Card */
    .preview-card { border: 2px solid rgba(59, 130, 246, 0.3); }
    .preview-card .card-header { display: flex; justify-content: space-between; align-items: center; }
    .preview-placeholder { text-align: center; padding: 3rem 2rem; }
    .preview-placeholder i { font-size: 4rem; opacity: 0.3; margin-bottom: 1rem; }
    .preview-placeholder p { color: var(--text-secondary); margin-bottom: 1.5rem; }
    .preview-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem; }
    .preview-header p { flex: 1; }
    .prompt-content { white-space: pre-wrap; font-family: var(--font-mono); background: var(--bg-secondary); padding: 1.25rem; border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.875rem; line-height: 1.7; max-height: 500px; overflow-y: auto; border: 1px solid var(--border-color); }

    /* Action Buttons */
    .action-buttons { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
    .action-buttons .btn-primary { min-width: 220px; }

    /* Badge */
    .badge { padding: 0.375rem 0.75rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; }
    .badge-warning { background-color: #fbbf24; color: #78350f; }
    .badge.bg-success { background-color: #10b981; color: white; }
    .badge.bg-info { background-color: #3b82f6; color: white; }
    .badge.bg-warning { background-color: #f59e0b; color: white; }

    /* Results */
    .results-grid { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
    .accordion-item { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
    .accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; cursor: pointer; background-color: var(--bg-secondary); transition: background-color 0.2s; }
    .accordion-header:hover { background-color: var(--bg-hover); }
    .accordion-body { padding: 1.25rem; border-top: 1px solid var(--border-color); background-color: var(--bg-primary); }
    .feedback-item { display: grid; grid-template-columns: 90px 1fr; gap: 1.25rem; padding: 1rem; border-bottom: 1px solid var(--border-color-light); }
    .feedback-item:last-child { border-bottom: none; }
    .grade-box { text-align: center; background-color: var(--bg-secondary); padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); }
    .grade-value { font-size: 1.5rem; font-weight: bold; color: var(--color-primary); margin-top: 0.25rem; }
    .feedback-text { font-size: 0.875rem; line-height: 1.6; white-space: pre-line; }

    /* Alert styles */
    .alert { padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; }
    .alert h4 { margin: 0 0 0.5rem 0; font-size: 1.125rem; }
    .alert p { margin: 0; }
    .alert-success { background-color: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: var(--text-primary); }
    .alert-info { background-color: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: var(--text-primary); }
    .alert-warning { background-color: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--text-primary); }

    /* Utilities */
    .spinner-sm { width: 16px; height: 16px; border: 2px solid rgba(59, 130, 246, 0.3); border-top-color: rgba(59, 130, 246, 0.8); border-radius: 50%; animation: spin 0.6s linear infinite; flex-shrink: 0; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .d-flex { display: flex; }
    .align-items-center { align-items: center; }
    .gap-2 { gap: 0.5rem; }
    .text-small { font-size: 0.875rem; opacity: 0.85; }
    .ph-4x { font-size: 4rem; }
</style>
{% endblock %}

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