{% extends "base.html" %}

{% block title %}Grading Status - Anzar{% endblock %}

{% block content %}
<div class="status-container" x-data="assignmentStatusPage()" x-init="init()">
    <!-- Page Header -->
    <div class="page-header mb-4">
        <h1 class="page-title">Grading Status</h1>
        <p class="page-subtitle">View and manage grading progress</p>
    </div>

    <!-- Loading status -->
    <div x-show="loading" class="card">
        <div class="card-body">
            <div class="loading-container">
                <div class="spinner-modern"></div>
                <p class="loading-text">Loading grading status...</p>
            </div>
        </div>
    </div>

    <!-- Status content -->
    <div x-show="!loading && !showError">
        <!-- Assignment Overview Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph-chart-bar"></i>
                    Assignment Overview
                </h3>
            </div>
            <div class="card-body">
                <div class="summary-grid">
                    <div class="summary-item">
                        <i class="ph-list-bullets"></i>
                        <div class="summary-info">
                            <span class="summary-label">Total Questions</span>
                            <span class="summary-value" x-text="totalQuestions"></span>
                        </div>
                    </div>
                    <div class="summary-item">
                        <i class="ph-check-circle"></i>
                        <div class="summary-info">
                            <span class="summary-label">Graded</span>
                            <span class="summary-value" x-text="gradedCount"></span>
                        </div>
                    </div>
                    <div class="summary-item">
                        <i class="ph-clock"></i>
                        <div class="summary-info">
                            <span class="summary-label">Not Graded</span>
                            <span class="summary-value" x-text="notGradedCount"></span>
                        </div>
                    </div>
                    <div class="summary-item">
                        <i class="ph-chart-line"></i>
                        <div class="summary-info">
                            <span class="summary-label">Progress</span>
                            <span class="summary-value" x-text="progressPercentage + '%'"></span>
                        </div>
                    </div>
                </div>

                <div class="progress-container mt-4">
                    <div class="progress-bar">
                        <div class="progress-fill" :style="`width: ${progressPercentage}%`"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Rubric Status Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph-clipboard-text"></i>
                    Rubric Status
                </h3>
            </div>
            <div class="card-body">
                <div class="alert" :class="rubricStatus.class">
                    <i class="ph-info"></i>
                    <div>
                        <p x-text="rubricStatus.message"></p>
                    </div>
                </div>

                <div class="btn-group">
                    <button x-show="!rubricExists" @click="createRubric()" class="btn btn-secondary">
                        <i class="ph-plus-circle"></i>
                        Create Rubric
                    </button>
                    <button x-show="rubricExists" @click="validateRubric()" class="btn btn-secondary">
                        <i class="ph-check-square"></i>
                        Validate Rubric
                    </button>
                </div>
            </div>
        </div>

        <!-- Questions List Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph-list-checks"></i>
                    Questions
                </h3>
            </div>
            <div class="card-body">
                <div class="questions-list">
                    <template x-for="(question, index) in questions" :key="question.question_id">
                        <div class="question-item">
                            <div class="question-number" x-text="index + 1"></div>
                            <div class="question-text" x-text="question.question_text || `Question ${question.question_id}`"></div>
                            <div class="question-status" :class="getQuestionStatus(question).class">
                                <span x-text="getQuestionStatus(question).icon"></span>
                                <span x-text="getQuestionStatus(question).text"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="action-buttons">
            <button @click="navigateTo('grading_hub.html')" class="btn btn-primary btn-lg">
                <i class="ph-pencil-simple"></i>
                Grade Questions
            </button>
            <button @click="navigateTo('grade_review_v2.html')" class="btn btn-secondary btn-lg" x-show="gradedCount > 0">
                <i class="ph-eye"></i>
                Review & Upload Grades
            </button>
        </div>
    </div>

    <!-- Error container -->
    <div x-show="showError">
        <div class="card">
            <div class="card-body">
                <div class="alert alert-error" x-text="errorMessage"></div>
                <div class="btn-group mt-3">
                    <button @click="reloadPage()" class="btn btn-secondary">
                        <i class="ph-arrow-clockwise"></i>
                        Retry
                    </button>
                    <button @click="forceReparse()" class="btn btn-warning">
                        <i class="ph-arrow-counter-clockwise"></i>
                        Force Re-parse Assignment
                    </button>
                    <button @click="goBackToAssignments()" class="btn btn-secondary">
                        <i class="ph-arrow-left"></i>
                        Back to Assignments
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.status-container {
    animation: fadeIn 0.3s ease;
}

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

.summary-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--background-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.summary-item i {
    font-size: 2rem;
    color: var(--primary-color);
}

.summary-info {
    display: flex;
    flex-direction: column;
}

.summary-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-container {
    background-color: var(--background-secondary);
    border-radius: 8px;
    padding: 1rem;
}

.questions-list {
    max-height: 400px;
    overflow-y: auto;
}

.question-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.question-item:hover {
    background-color: var(--background-secondary);
}

.question-item:last-child {
    border-bottom: none;
}

.question-info {
    flex: 1;
}

.question-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

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

.question-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.question-status.graded {
    background-color: var(--success-bg);
    color: var(--success-color);
}

.question-status.not-graded {
    background-color: var(--warning-bg);
    color: var(--warning-color);
}

.question-status i {
    font-size: 1rem;
}

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

.loading-container {
    text-align: center;
    padding: 3rem 1rem;
}

.loading-text {
    margin-top: 1rem;
    color: var(--text-secondary);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
{% endblock %}

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