{% extends "base.html" %}

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

{% block content %}
<div x-data="gradingHub()" x-init="init()" class="page-container">
    <!-- Page Header with Stats -->
    <div class="page-header">
        <div>
            <h1 class="page-title">Grading Hub</h1>
            <p class="page-subtitle" x-text="contentName"></p>
        </div>
        <div class="page-actions">
            <button x-show="allGraded"
                    @click="navigateTo('grade_review_v2.html')"
                    class="btn btn-outline">
                <i class="ph-eye"></i>
                Review All Grades
            </button>
            <button x-show="allGraded"
                    @click="navigateTo('rubric.html')"
                    class="btn btn-success">
                <i class="ph-upload"></i>
                Select Target & Upload
            </button>
        </div>
    </div>

    <!-- Error Display -->
    <div x-show="errorMessage" class="card border-danger mb-4">
        <div class="card-header bg-danger text-white">
            <h4 class="card-title mb-0"><i class="ph-warning-circle"></i> Critical Error</h4>
        </div>
        <div class="card-body">
            <p class="text-danger" x-text="errorMessage"></p>
            <button @click="backToContentList()" class="btn btn-secondary">
                <i class="ph-arrow-left"></i>
                <span x-text="contentType === 'quiz' ? 'Back to Quiz List' : 'Back to Assignment List'"></span>
            </button>
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading && !errorMessage" class="card">
        <div class="card-body text-center py-5">
            <div class="spinner mb-3"></div>
            <p class="loading-text">Loading grading data...</p>
        </div>
    </div>

    <div x-show="!loading && !errorMessage">
        <!-- Stats Overview -->
        <div class="stats-grid mb-4">
            <div class="stat-card">
                <div class="stat-icon" style="color: var(--color-primary);">
                    <i class="ph-list-bullets"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Total Questions</div>
                    <div class="stat-value" x-text="questions.length"></div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="color: var(--color-success);">
                    <i class="ph-check-circle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Fully Graded</div>
                    <div class="stat-value" x-text="fullyGradedCount"></div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="color: var(--color-warning);">
                    <i class="ph-clock"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Partially Graded</div>
                    <div class="stat-value" x-text="partiallyGradedCount"></div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="color: var(--color-danger);">
                    <i class="ph-x-circle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Not Graded</div>
                    <div class="stat-value" x-text="notGradedCount"></div>
                </div>
            </div>
        </div>

        <!-- Filter Tabs -->
        <div class="filter-tabs mb-4">
            <button class="filter-tab" :class="filterMode === 'all' ? 'active' : ''" @click="filterMode = 'all'">
                <i class="ph-list"></i>
                <span>All</span>
                <span class="tab-badge" x-text="questions.length"></span>
            </button>
            <button class="filter-tab" :class="filterMode === 'ungraded' ? 'active' : ''" @click="filterMode = 'ungraded'">
                <i class="ph-x-circle"></i>
                <span>Not Graded</span>
                <span class="tab-badge" x-text="notGradedCount"></span>
            </button>
            <button class="filter-tab" :class="filterMode === 'partial' ? 'active' : ''" @click="filterMode = 'partial'">
                <i class="ph-clock"></i>
                <span>Partial</span>
                <span class="tab-badge" x-text="partiallyGradedCount"></span>
            </button>
            <button class="filter-tab" :class="filterMode === 'graded' ? 'active' : ''" @click="filterMode = 'graded'">
                <i class="ph-check-circle"></i>
                <span>Complete</span>
                <span class="tab-badge" x-text="fullyGradedCount"></span>
            </button>
        </div>

        <!-- Questions Grid -->
        <div x-show="filteredQuestions.length > 0" class="questions-grid">
            <template x-for="(question, index) in filteredQuestions" :key="question.id">
                <div class="question-card">
                    <div class="question-card-header">
                        <div class="progress-circle" :style="`--p:${(question.graded_count / question.student_count) * 100}; --c:${getComputedStyle(document.documentElement).getPropertyValue(question.graded_count === question.student_count ? '--color-success' : '--color-primary').trim()}`">
                            <div class="progress-circle-inner">
                                Q<span x-text="getQuestionNumber(question.id)"></span>
                            </div>
                        </div>
                        <div class="question-title" x-html="prepareQuestion(truncate(question.text, 100))"></div>
                    </div>
                    <div class="question-card-body">
                        <div class="question-meta">
                            <span class="meta-item" title="Students">
                                <i class="ph-users"></i>
                                <span x-text="question.student_count"></span>
                            </span>
                            <span class="meta-item" title="Points">
                                <i class="ph-coins"></i>
                                <span x-text="question.points_possible"></span>
                            </span>
                            <span class="meta-item" title="Graded">
                                <i class="ph-check"></i>
                                <span x-text="question.graded_count"></span>
                            </span>
                        </div>
                        <div class="question-actions">
                            <button x-show="question.graded_count > 0" @click="viewGradedAnswers(question)" class="btn btn-sm btn-outline" title="View Graded">
                                <i class="ph-eye"></i>
                            </button>
                            <button x-show="question.graded_count < question.student_count" @click="gradeQuestion(question)" class="btn btn-sm btn-primary" title="Grade Ungraded">
                                <i class="ph-pencil"></i>
                                Grade
                            </button>
                            <button x-show="question.graded_count > 0 && question.graded_count < question.student_count" @click="gradeQuestion(question, true)" class="btn btn-sm btn-outline" title="Re-grade All Students">
                                <i class="ph-arrow-clockwise"></i>
                                Re-grade All
                            </button>
                            <button x-show="question.graded_count === question.student_count && question.student_count > 0" @click="gradeQuestion(question, true)" class="btn btn-sm btn-outline" title="Re-grade All Students">
                                <i class="ph-arrow-clockwise"></i>
                                Re-grade
                            </button>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- Empty State -->
        <div x-show="filteredQuestions.length === 0" class="card">
            <div class="card-body text-center py-5">
                <i class="ph-funnel" style="font-size: 3rem; color: var(--text-tertiary); margin-bottom: 1rem; display: block;"></i>
                <p class="text-muted">No questions match the selected filter.</p>
                <button class="btn btn-sm btn-secondary mt-3" @click="filterMode = 'all'">
                    Show All Questions
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
:root {
    --page-bg: #f8f9fa; /* Light gray background */
}

body {
    background-color: var(--page-bg);
}

.page-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.stat-icon { font-size: 2rem; }
.stat-content { flex: 1; }
.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Redesigned Filter Tabs */
.filter-tabs {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.filter-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-xs);
}
.filter-tab:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-primary);
}
.filter-tab.active {
    background: var(--color-primary-lightest);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05);
    transform: translateY(1px);
}
.tab-badge {
    padding: 0.125rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.filter-tab.active .tab-badge {
    background: var(--color-primary);
    color: white;
}

/* Responsive Questions Grid */
.questions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (max-width: 992px) {
    .questions-grid {
        grid-template-columns: 1fr;
    }
}

/* Redesigned Question Card */
.question-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}
.question-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}
.question-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-color-light);
}
.question-title {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    flex: 1;
}
.question-card-body {
    padding: 1.25rem;
    padding-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.question-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.meta-item i {
    font-size: 1.1rem;
    color: var(--text-tertiary);
}
.question-actions {
    display: flex;
    gap: 0.5rem;
}
.question-actions .btn {
    min-width: 80px;
}

/* Circular Progress Bar */
@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.progress-circle {
  --p: 0;      /* progress percentage */
  --b: 10px;   /* border thickness */
  --c: var(--color-primary); /* color */
  --w: 64px;   /* width */
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--c);
  transition: --p 0.5s ease;
}
.progress-circle:before,
.progress-circle:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.progress-circle:before {
  inset: 0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.progress-circle:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w)/2));
}
.progress-circle-inner {
    color: var(--text-primary);
}

</style>
{% endblock %}

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

<script>
    // Helper function to prepare question text for rendering
    function prepareQuestion(text) {
        if (!text) return '';
        // Basic HTML tag removal for security
        const cleanText = text.replace(/<script.*?>.*?<\/script>/gi, '');
        return cleanText;
    }
</script>