{% extends "base.html" %}

{% block title %}Rubric Configuration - Anzar{% endblock %}

{% block content %}
<div x-data="rubricPage()" x-init="init()">
    <div class="page-header">
        <h1 class="page-title">Select Target Assignment</h1>
        <p class="page-subtitle" x-text="getPageSubtitle()"></p>
    </div>

    <!-- Current Context -->
    <div class="alert alert-info mb-4">
        <i class="ph-info"></i>
        <div>
            <strong>Current Context:</strong>
            <span x-text="getContextText()"></span>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="ph-list-checks"></i>
                Assignment Selection
            </h3>
        </div>
        <div class="card-body">
            <!-- Loading State -->
            <div x-show="state === 'loading'" class="loading-container">
                <div class="spinner-modern"></div>
                <p class="loading-text">Loading assignments...</p>
            </div>

            <!-- Assignment Selection -->
            <div x-show="state === 'selecting'">
                <p class="mb-3">Select the target assignment for grading:</p>

                <div class="form-group">
                    <label class="form-label">Target Assignment</label>
                    <select x-model.number="selectedAssignmentId" class="form-control">
                        <option value="">Select an assignment...</option>
                        <template x-for="assignment in assignments" :key="assignment.id">
                            <option :value="assignment.id" x-text="assignment.name"></option>
                        </template>
                    </select>
                    <p class="form-text">Choose the assignment where grades will be posted</p>
                </div>

                <button @click="checkRubric()" class="btn btn-primary" :disabled="!selectedAssignmentId">
                    <i class="ph-magnifying-glass"></i>
                    Check Rubric
                </button>
            </div>
        </div>
    </div>

    <!-- Rubric Check Section -->
    <div x-show="state !== 'loading' && state !== 'selecting' && state !== 'error'" class="card mt-4">
        <div class="card-header">
            <h3 class="card-title">
                <i class="ph-clipboard-text"></i>
                Rubric Status
            </h3>
        </div>
        <div class="card-body">
            <!-- Loading Rubric -->
            <div x-show="state === 'checking-rubric'" class="loading-container">
                <div class="spinner-modern"></div>
                <p class="loading-text">Checking rubric...</p>
            </div>

            <!-- Existing Rubric -->
            <div x-show="state === 'rubric-exists'">
                <template x-if="rubric">
                    <div>
                        <h4 class="mb-3">Existing Rubric Found</h4>
                        <div class="rubric-display">
                            <div class="mb-3">
                                <strong>Total Points:</strong>
                                <span x-text="rubric.total_points"></span>
                            </div>
                            <template x-if="rubric.criteria && rubric.criteria.length > 0">
                                <div>
                                    <template x-for="criterion in rubric.criteria" :key="criterion.id || Math.random()">
                                        <div class="rubric-criterion">
                                            <div class="rubric-header">
                                                <span x-text="criterion.description"></span>
                                                <span class="rubric-points" x-text="criterion.points + ' pts'"></span>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </div>

                        <div class="alert mt-3" :class="rubricMatches ? 'alert-success' : 'alert-warning'">
                            <span x-text="rubricMatches ? '✓ Rubric matches quiz questions' : '⚠ Rubric does not match quiz questions'"></span>
                        </div>

                        <div class="action-buttons mt-3">
                            <button @click="useRubric()" class="btn btn-primary">
                                <i class="ph-check"></i>
                                Use This Rubric
                            </button>
                            <button @click="createRubric()" class="btn btn-secondary">
                                <i class="ph-plus"></i>
                                Create New Rubric
                            </button>
                        </div>
                    </div>
                </template>
            </div>

            <!-- No Rubric -->
            <div x-show="state === 'no-rubric'">
                <div class="alert alert-warning">
                    <i class="ph-warning"></i>
                    <div class="alert-content">
                        <h4>No Rubric Found</h4>
                        <p>This assignment doesn't have a rubric. Would you like to create one based on the quiz questions?</p>
                    </div>
                </div>

                <button @click="createRubric()" class="btn btn-primary mt-3">
                    <i class="ph-plus-circle"></i>
                    Create Rubric
                </button>
            </div>

            <!-- Creating Rubric -->
            <div x-show="state === 'creating'">
                <div class="loading-container">
                    <div class="spinner-modern"></div>
                    <p class="loading-text">Creating rubric based on quiz questions...</p>
                    <div class="progress-bar mt-3">
                        <div class="progress-fill" style="width: 50%"></div>
                    </div>
                </div>
            </div>

            <!-- Rubric Created -->
            <div x-show="state === 'created'">
                <template x-if="rubric">
                    <div>
                        <div class="alert alert-success mb-4">
                            <i class="ph-check-circle"></i>
                            <div class="alert-content">
                                <h4>Rubric Created</h4>
                                <p>A new rubric has been created based on your quiz questions.</p>
                            </div>
                        </div>

                        <h4 class="mb-3">New Rubric:</h4>
                        <div class="rubric-display">
                            <div class="mb-3">
                                <strong>Total Points:</strong>
                                <span x-text="rubric.total_points"></span>
                            </div>
                            <template x-if="rubric.criteria && rubric.criteria.length > 0">
                                <div>
                                    <template x-for="criterion in rubric.criteria" :key="criterion.id || Math.random()">
                                        <div class="rubric-criterion">
                                            <div class="rubric-header">
                                                <span x-text="criterion.description"></span>
                                                <span class="rubric-points" x-text="criterion.points + ' pts'"></span>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </div>

                        <div class="action-buttons mt-3">
                            <button @click="useRubric()" class="btn btn-primary">
                                <i class="ph-check"></i>
                                Confirm and Continue
                            </button>
                            <button @click="cancelRubric()" class="btn btn-outline">
                                <i class="ph-x"></i>
                                Cancel
                            </button>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Error State -->
    <div x-show="state === 'error'" class="card mt-4">
        <div class="card-body">
            <div class="alert alert-error" x-text="errorMessage"></div>
            <div class="action-buttons mt-3">
                <button class="btn btn-secondary" @click="retry()">
                    <i class="ph-arrow-clockwise"></i>
                    Retry
                </button>
                <button class="btn btn-outline" @click.prevent="window.api.navigate_to('assignment_list.html')">
                    <i class="ph-arrow-left"></i>
                    Back to Assignments
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Help Section -->
<div class="card mt-4">
    <div class="card-body">
        <h4 class="mb-3">
            <i class="ph-info"></i>
            About Rubrics
        </h4>
        <div class="help-content">
            <p>Rubrics help ensure consistent grading by defining criteria and point values for each question. This step:</p>
            <ul class="feature-list">
                <li>
                    <i class="ph-check-circle"></i>
                    Checks if the selected assignment already has a rubric
                </li>
                <li>
                    <i class="ph-check-circle"></i>
                    Allows you to create a new rubric based on quiz questions
                </li>
                <li>
                    <i class="ph-check-circle"></i>
                    Ensures proper mapping between quiz questions and rubric criteria
                </li>
                <li>
                    <i class="ph-check-circle"></i>
                    Validates point values match expected totals
                </li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.rubric-display {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
}

.rubric-display table {
    width: 100%;
    border-collapse: collapse;
}

.rubric-display th,
.rubric-display td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.rubric-display th {
    background-color: var(--background-tertiary);
    font-weight: 600;
}

.rubric-display tr:last-child td {
    border-bottom: none;
}
</style>
{% endblock %}

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