{% extends "base.html" %}

{% block title %}Upload Grades - Anzar{% endblock %}

{% block content %}
<div x-data="quizUpload()" x-init="init()" class="page-container">
    <!-- Page Header -->
    <div class="page-header">
        <div>
            <h1 class="page-title">Upload Grades</h1>
            <p class="page-subtitle">Review statistics and upload grades to Canvas</p>
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" style="text-align: center; padding: 4rem;">
        <div class="spinner"></div>
        <p style="margin-top: 1rem; color: var(--text-secondary);">Loading statistics...</p>
    </div>

    <!-- Content -->
    <div x-show="!loading">
        <!-- Target Assignment Info -->
        <div x-show="targetAssignmentId" class="card mb-3">
            <div class="card-body">
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <i class="ph-target" style="font-size: 2rem; color: var(--color-success);"></i>
                    <div>
                        <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.25rem;">Uploading to:</div>
                        <strong style="font-size: 1.125rem;" x-text="targetAssignmentName || ('Assignment ID: ' + targetAssignmentId)"></strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- Error: No Target Selected -->
        <div x-show="!targetAssignmentId" class="card card-error mb-3">
            <div class="card-body">
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <i class="ph-warning-circle" style="font-size: 2rem; color: var(--color-danger);"></i>
                    <div>
                        <strong>No Target Assignment Selected</strong>
                        <p style="margin: 0.5rem 0 0 0; color: var(--text-secondary);">You must select a target assignment before uploading grades.</p>
                        <button @click="navigateTo('rubric.html')" class="btn btn-primary" style="margin-top: 1rem;">
                            <i class="ph-arrow-left"></i>
                            Select Target Assignment
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Warning Notice -->
        <div x-show="targetAssignmentId" class="card card-warning mb-3">
            <div class="card-body">
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <i class="ph-warning" style="font-size: 2rem; color: var(--color-warning);"></i>
                    <div>
                        <strong>Important:</strong> Uploading will overwrite existing grades in Canvas.
                        This action cannot be undone. Make sure you have reviewed all grades before proceeding.
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="action-buttons">
            <button @click="navigateTo('grading_hub.html')" class="btn btn-outline">
                <i class="ph-arrow-left"></i>
                Back to Grading
            </button>
            <button @click="downloadCSV()" class="btn btn-outline">
                <i class="ph-download"></i>
                Download CSV
            </button>
            <button @click="uploadGrades()" class="btn btn-success btn-lg">
                <i class="ph-upload"></i>
                Upload to Canvas
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* Warning Card */
.card-warning {
    border-color: var(--color-warning);
    background: rgba(245, 158, 11, 0.05);
}

.card-error {
    border-color: var(--color-danger);
    background: rgba(239, 68, 68, 0.05);
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .distribution-bar {
        grid-template-columns: 30px 1fr 100px;
        gap: 0.5rem;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-buttons .btn {
        width: 100%;
    }
}
</style>
{% endblock %}

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