{% extends "base.html" %}

{% block title %}Assignment Download - Anzar{% endblock %}

{% block content %}
<div class="download-container" x-data="assignmentDownloadPage()" x-init="init()">
    <!-- Page Header -->
    <div class="page-header mb-4">
        <h1 class="page-title">Download Submissions</h1>
        <p class="page-subtitle">Step 5: Check and download assignment submissions</p>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="ph-download"></i>
                Assignment Submissions
            </h3>
        </div>
        <div class="card-body">
            <!-- Checking folder -->
            <div x-show="checking" class="loading-container">
                <div class="spinner-modern"></div>
                <p class="loading-text">Checking for existing submissions folder...</p>
            </div>

            <!-- Folder exists -->
            <div x-show="showFolderExists">
                <div class="alert alert-info mb-4">
                    <i class="ph-folder-open"></i>
                    <div>
                        <h4>Existing Folder Found</h4>
                        <p class="folder-path" x-text="folderPath"></p>
                    </div>
                </div>

                <p class="mb-4">A folder with assignment submissions already exists. What would you like to do?</p>

                <div class="btn-group">
                    <button @click="useExistingFolder()" class="btn btn-primary">
                        <i class="ph-check"></i>
                        Use Existing Folder
                    </button>
                    <button @click="downloadNewSubmissions()" class="btn btn-secondary">
                        <i class="ph-download-simple"></i>
                        Download New Submissions
                    </button>
                </div>
            </div>

            <!-- No folder -->
            <div x-show="showNoFolder">
                <div class="alert alert-warning mb-4">
                    <i class="ph-warning"></i>
                    <div>
                        <p>No existing submissions found. You need to download submissions from Canvas.</p>
                    </div>
                </div>

                <button @click="downloadSubmissions(false)" class="btn btn-primary">
                    <i class="ph-download-simple"></i>
                    Download Submissions
                </button>
            </div>

            <!-- Downloading -->
            <div x-show="downloading">
                <div class="loading-container">
                    <div class="spinner-modern"></div>
                    <p class="loading-text" x-text="downloadStatus"></p>
                    <div class="progress mt-3" style="height: 8px;">
                        <div class="progress-bar" :style="`width: ${downloadProgress}%`"></div>
                    </div>
                    <p class="text-secondary mt-2" x-text="downloadDetails"></p>
                </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="goBackToAssignments()" class="btn btn-secondary">
                        <i class="ph-arrow-left"></i>
                        Back to Assignments
                    </button>
                </div>
            </div>

            <!-- Analysis Results -->
            <div x-show="showAnalysisResults" style="margin-top: 2rem;">
                <!-- Template-based strategy -->
                <template x-if="isTemplateStrategy">
                    <div class="analysis-result parsable">
                        <div class="result-icon">✅</div>
                        <h3>Template-Based Submissions Detected</h3>
                        <div class="result-stats">
                            <div class="stat">
                                <span class="stat-number" x-text="analysisData?.parseable_pdfs || 0"></span>
                                <span class="stat-label">Parsable PDFs</span>
                            </div>
                            <div class="stat">
                                <span class="stat-number" x-text="parseablePercentage + '%'"></span>
                                <span class="stat-label">Success Rate</span>
                            </div>
                            <div class="stat">
                                <span class="stat-number" x-text="analysisData?.total_submissions || 0"></span>
                                <span class="stat-label">Total Submissions</span>
                            </div>
                        </div>
                        <div class="workflow-info">
                            <h4>What happens next:</h4>
                            <ul class="workflow-steps">
                                <li>✅ Questions automatically extracted from PDFs</li>
                                <li>✅ Student answers structured and ready</li>
                                <li>✅ You grade questions one at a time</li>
                                <li>✅ Full control over each grade</li>
                            </ul>
                        </div>
                        <button @click="proceedToParsing()" class="btn btn-primary btn-lg">
                            <i class="ph-check-circle"></i>
                            Proceed to Template Parsing
                        </button>
                    </div>
                </template>

                <!-- Agent strategy -->
                <template x-if="isAgentStrategy">
                    <div class="analysis-result mixed-formats">
                        <div class="result-icon">⚠️</div>
                        <h3>Mixed Format Submissions Detected</h3>
                        <div class="result-stats">
                            <div class="stat">
                                <span class="stat-number" x-text="analysisData?.parseable_pdfs || 0"></span>
                                <span class="stat-label">Parsable PDFs</span>
                            </div>
                            <div class="stat">
                                <span class="stat-number" x-text="nonParseableCount"></span>
                                <span class="stat-label">Other Formats</span>
                            </div>
                            <div class="stat">
                                <span class="stat-number" x-text="analysisData?.total_submissions || 0"></span>
                                <span class="stat-label">Total Submissions</span>
                            </div>
                        </div>
                        <div class="workflow-info workflow-agent">
                            <h4>Automated Grading Required</h4>
                            <p>The grading process will extract text and grade submissions:</p>
                            <ul class="workflow-steps">
                                <li><strong>Step 1:</strong> Extract text from all formats (PDF, DOCX, ZIP, TXT)</li>
                                <li><strong>Step 2:</strong> Fetch your Canvas rubric or use assignment questions</li>
                                <li><strong>Step 3:</strong> Grade all submissions using AI</li>
                                <li><strong>Step 4:</strong> Show you results to review and edit</li>
                            </ul>
                            <div class="alert alert-info" style="margin-top: 1rem;">
                                <i class="ph-info"></i>
                                <strong>Time estimate:</strong> ~5-10 minutes for <span x-text="analysisData?.total_submissions || 0"></span> students (depending on LLM speed)
                            </div>
                        </div>
                        <button @click="proceedToAgent()" class="btn btn-success btn-lg">
                            <i class="ph-robot"></i>
                            Run AI Grading Agent
                        </button>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="/frontend/static/css/workflows.css">
{% endblock %}

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

.folder-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);
}

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

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