{% extends "base.html" %}

{% block title %}Parse Submissions - Anzar{% endblock %}

{% block content %}
<div class="parse-container" x-data="assignmentParsePage()" x-init="init()">
    <!-- Page Header -->
    <div class="page-header mb-4">
        <h1 class="page-title">Parse Submissions</h1>
        <p class="page-subtitle">Step 7: Parse submissions to CSV for grading</p>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="ph-file-csv"></i>
                Parse Submissions to CSV
            </h3>
        </div>
        <div class="card-body">
            <!-- Parse ready -->
            <div x-show="showParseReady" class="ready-state">
                <div class="alert alert-info mb-4">
                    <i class="ph-info"></i>
                    <div>
                        <h4>Ready to Parse Submissions</h4>
                        <p>Choose a parsing method based on your submission types.</p>
                    </div>
                </div>

                <div class="parse-methods">
                    <h4 class="mb-3">Choose Parsing Method:</h4>

                    <div class="method-cards">
                        <!-- Template-based parsing -->
                        <div class="method-card"
                             :class="{ 'selected': selectedMethod === 'metadata' }"
                             @click="selectMethod('metadata')">
                            <div class="method-header">
                                <i class="ph-file-csv"></i>
                                <h5>Template-Based Parsing</h5>
                                <span class="method-badge recommended">Recommended for templates</span>
                            </div>
                            <div class="method-description">
                                <p>For submissions created with your template (PDFs with embedded metadata).</p>
                                <ul class="method-features">
                                    <li><i class="ph-check-circle"></i> Fast and free</li>
                                    <li><i class="ph-check-circle"></i> Structured answers</li>
                                    <li><i class="ph-check-circle"></i> 95% accuracy</li>
                                </ul>
                            </div>
                            <button @click.stop="parseMetadata()" class="btn btn-primary method-btn">
                                <i class="ph-file-csv"></i>
                                Parse Template Submissions
                            </button>
                        </div>

                        <!-- Multi-format parsing -->
                        <div class="method-card"
                             :class="{ 'selected': selectedMethod === 'unified' }"
                             @click="selectMethod('unified')">
                            <div class="method-header">
                                <i class="ph-file-text"></i>
                                <h5>Multi-Format Parsing</h5>
                                <span class="method-badge new">Flexible</span>
                            </div>
                            <div class="method-description">
                                <p>For any submission format (PDF, DOCX, TXT, ZIP). Extracts full text for all questions.</p>
                                <ul class="method-features">
                                    <li><i class="ph-check-circle"></i> Supports all file types</li>
                                    <li><i class="ph-check-circle"></i> No template required</li>
                                    <li><i class="ph-info"></i> Uses full text for all questions</li>
                                </ul>
                            </div>
                            <button @click.stop="parseUnified()" class="btn btn-secondary method-btn">
                                <i class="ph-file-text"></i>
                                Parse All Formats
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Questions input (for unified method) -->
                <div x-show="selectedMethod === 'unified'" class="mt-4">
                    <div class="alert alert-warning">
                        <i class="ph-info"></i>
                        <div>
                            <h4>Define Questions</h4>
                            <p>For multi-format parsing, please define the questions that will be graded:</p>
                        </div>
                    </div>
                    <div class="questions-editor">
                        <div>
                            <template x-for="(question, index) in questions" :key="question.id || index">
                                <div class="question-item">
                                    <label x-text="`Question ${question.number}:`"></label>
                                    <input type="text"
                                           class="question-text"
                                           placeholder="Enter question text..."
                                           x-model="question.text">
                                </div>
                            </template>
                        </div>
                        <button @click="addQuestion()" class="btn btn-outline-primary btn-sm">
                            <i class="ph-plus"></i>
                            Add Question
                        </button>
                    </div>
                </div>
            </div>

            <!-- Parsing -->
            <div x-show="showParsing">
                <div class="loading-container">
                    <div class="spinner-modern"></div>
                    <p class="loading-text">Parsing submissions...</p>
                </div>
                <div class="progress-container mt-4">
                    <div class="progress-bar">
                        <div class="progress-fill" :style="`width: ${progressPercent}%`"></div>
                    </div>
                    <div class="progress-text mt-2" x-text="progressText"></div>
                </div>
            </div>

            <!-- Parse complete -->
            <div x-show="showParseComplete">
                <div class="alert alert-success mb-4">
                    <i class="ph-check-circle"></i>
                    <div>
                        <h4>Parsing Complete</h4>
                        <p class="csv-path" x-text="csvPath"></p>
                    </div>
                </div>

                <div class="parse-summary">
                    <h4 class="mb-3">Summary:</h4>
                    <ul class="summary-list">
                        <template x-for="item in summaryItems" :key="item">
                            <li x-text="item"></li>
                        </template>
                    </ul>
                </div>

                <div class="btn-group mt-4">
                    <button @click="proceedToStatus()" class="btn btn-primary">
                        <i class="ph-arrow-right"></i>
                        Proceed to Grading Status
                    </button>
                </div>
            </div>

            <!-- Error container -->
            <div x-show="showError">
                <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="goBackToTemplate()" class="btn btn-secondary">
                        <i class="ph-arrow-left"></i>
                        Back to Template
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

.parse-info {
    background-color: var(--background-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.parse-info h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--text-secondary);
}

.feature-list li i {
    color: var(--primary-color);
    font-size: 1.25rem;
}

.csv-path {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    word-break: break-all;
    margin-top: 0.5rem;
}

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

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

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

.progress-text {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.parse-summary {
    background-color: var(--background-secondary);
    border-radius: 8px;
    padding: 1.5rem;
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-list li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-list li::before {
    content: '•';
    color: var(--primary-color);
    font-weight: bold;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Method Cards Styles */
.method-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.method-card {
    background-color: var(--background-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.method-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.method-card.selected {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.05);
}

.method-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.method-header i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.method-header h5 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.method-badge {
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.method-badge.recommended {
    background-color: rgba(var(--success-color-rgb), 0.1);
    color: var(--success-color);
}

.method-badge.new {
    background-color: rgba(var(--warning-color-rgb), 0.1);
    color: var(--warning-color);
}

.method-description {
    margin-bottom: 1.5rem;
}

.method-description p {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

.method-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.method-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.method-features li i {
    font-size: 1rem;
}

.method-features li i.ph-check-circle {
    color: var(--success-color);
}

.method-features li i.ph-info {
    color: var(--info-color);
}

.method-btn {
    width: 100%;
    justify-content: center;
}

/* Questions Editor Styles */
.questions-editor {
    background-color: var(--background-secondary);
    border-radius: 8px;
    padding: 1.5rem;
}

.question-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.question-item label {
    min-width: 100px;
    font-weight: 500;
    color: var(--text-primary);
}

.question-text {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
}

.question-text:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

@media (max-width: 768px) {
    .method-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .question-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .question-item label {
        min-width: auto;
    }
}
</style>
{% endblock %}

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