{% extends "base.html" %}

{% block title %}AI Agent Running - AnZar{% endblock %}

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

{% block content %}
<div x-data="assignmentAgentRunning()" x-init="init()" class="container agent-running">
    <div class="agent-header">
        <div class="agent-icon"><i class="ph-robot" style="font-size: 3rem;"></i></div>
        <h1>Grading in Progress</h1>
        <p>Please wait while the agent processes submissions...</p>
        <p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.5rem;">
            This may take 5-10 minutes. You can leave this page and return later.
        </p>
    </div>

    <!-- Progress Steps -->
    <div class="agent-steps">
        <!-- Step 1: Extract -->
        <div class="step" :data-status="steps.extract.status">
            <div class="step-icon">1</div>
            <div class="step-content">
                <h3>Extracting Text</h3>
                <p x-text="steps.extract.message"></p>
                <div class="step-progress" x-show="steps.extract.total > 0">
                    <div class="progress-bar">
                        <div class="progress-fill" :style="'width: ' + getProgressPercentage('extract') + '%'"></div>
                    </div>
                    <span class="progress-text" x-text="steps.extract.progress + '/' + steps.extract.total"></span>
                </div>
            </div>
        </div>

        <!-- Step 2: Rubric -->
        <div class="step" :data-status="steps.rubric.status">
            <div class="step-icon">2</div>
            <div class="step-content">
                <h3>Fetching Rubric</h3>
                <p x-text="steps.rubric.message"></p>
            </div>
        </div>

        <!-- Step 3: Grading -->
        <div class="step" :data-status="steps.grading.status">
            <div class="step-icon">3</div>
            <div class="step-content">
                <h3>Grading Submissions</h3>
                <p x-text="steps.grading.message"></p>
                <div class="step-progress" x-show="steps.grading.total > 0">
                    <div class="progress-bar">
                        <div class="progress-fill" :style="'width: ' + getProgressPercentage('grading') + '%'"></div>
                    </div>
                    <span class="progress-text" x-text="steps.grading.progress + '/' + steps.grading.total"></span>
                </div>
            </div>
        </div>

        <!-- Step 4: Write -->
        <div class="step" :data-status="steps.write.status">
            <div class="step-icon">4</div>
            <div class="step-content">
                <h3>Writing Results</h3>
                <p x-text="steps.write.message"></p>
            </div>
        </div>

        <!-- Step 5: Complete -->
        <div class="step" :data-status="steps.complete.status">
            <div class="step-icon">✓</div>
            <div class="step-content">
                <h3>Complete</h3>
                <p x-text="steps.complete.message"></p>
            </div>
        </div>
    </div>

    <!-- Real-time Log -->
    <div class="agent-log">
        <div class="log-header">
            <h4>Activity Log</h4>
            <button class="btn btn-sm btn-outline" @click="toggleLog()">
                <i :class="logExpanded ? 'ph-caret-down' : 'ph-caret-right'"></i>
            </button>
        </div>
        <div class="log-content" x-show="logExpanded && logEntries" x-ref="logContent">
            <div x-show="logEntries.length === 0" class="text-muted text-center py-3">No log entries yet...</div>
            <div x-show="logEntries.length > 0">
                <template x-for="(entry, index) in logEntries" :key="index">
                    <div class="log-entry" :class="entry.type === 'error' ? 'error' : (entry.type === 'success' ? 'success' : '')">
                        <span x-text="'[' + entry.timestamp + '] ' + entry.message"></span>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Error handling -->
    <div x-show="showError" style="margin-top: 2rem;">
        <div class="alert alert-error">
            <h4>⚠️ Agent Encountered an Error</h4>
            <p x-text="errorMessage"></p>
            <div style="margin-top: 1rem; display: flex; gap: 1rem;">
                <button @click="retryAgent()" class="btn btn-primary">
                    <i class="ph-arrow-clockwise"></i>
                    Retry
                </button>
                <button @click="navigateTo('assignment_list.html')" class="btn btn-outline">
                    <i class="ph-x"></i>
                    Cancel & Go Back
                </button>
            </div>
        </div>
    </div>
</div>

<script src="/frontend/static/js/assignment_agent_running.js"></script>
{% endblock %}