{% extends "base.html" %}

{% block title %}System Health - AnZar{% endblock %}

{% block content %}
<div x-data="systemHealthPage()" x-init="init()">
    <div class="page-header">
        <h2>
            <i class="ph-heartbeat"></i>
            System Health
        </h2>
        <p>Check system status, backups, and interrupted tasks</p>
    </div>

    <div style="max-width: 900px; margin: 0 auto;">

        <!-- Health Check Results -->
        <div class="card" style="margin-bottom: 1.5rem;">
            <div class="card-header">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <h3 class="card-title">
                        <i class="ph-clipboard-text"></i>
                        Health Check
                    </h3>
                    <div style="display: flex; align-items: center; gap: 1rem;">
                        <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; margin: 0;">
                            <input type="checkbox" x-model="testConnections" style="cursor: pointer;">
                            <span>Test Connections</span>
                        </label>
                        <button @click="runHealthCheck()" class="btn btn-sm btn-primary" :disabled="healthChecking">
                            <template x-if="healthChecking">
                                <div class="spinner" style="width: 1rem; height: 1rem;"></div>
                            </template>
                            <template x-if="!healthChecking">
                                <i class="ph-play"></i>
                            </template>
                            <span x-text="healthChecking ? 'Checking...' : 'Run Check'"></span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="health-results">
                    <!-- Initial state -->
                    <template x-if="!healthResults && !healthChecking">
                        <p style="margin: 0; color: var(--text-secondary); text-align: center; padding: 2rem;">
                            Click "Run Check" to verify system health
                        </p>
                    </template>

                    <!-- Loading state -->
                    <template x-if="healthChecking">
                        <div class="loading-container">
                            <div class="spinner"></div>
                            <p>Running health check...</p>
                        </div>
                    </template>

                    <!-- All OK -->
                    <template x-if="healthResults && healthAllOk">
                        <div class="alert alert-success">
                            <i class="ph-check-circle"></i>
                            <div>
                                <h4>All Systems Healthy</h4>
                                <p style="margin: 0;">No issues detected.</p>
                            </div>
                        </div>
                    </template>

                    <!-- Issues found -->
                    <template x-if="healthResults && !healthAllOk">
                        <div style="display: grid; gap: 0.75rem;">
                            <template x-for="check in healthResults" :key="check.component">
                                <div :style="'padding: 0.75rem; background: var(--bg-secondary); border-radius: var(--radius-md); border-left: 3px solid ' + getStatusColor(check.status) + ';'">
                                    <div style="display: flex; align-items: center; gap: 0.5rem;">
                                        <i :class="getStatusIcon(check.status)" :style="'color: ' + getStatusColor(check.status) + ';'"></i>
                                        <strong x-text="check.component + ':'"></strong>
                                        <span style="color: var(--text-secondary);" x-text="check.message"></span>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <!-- Interrupted Tasks -->
        <div class="card" style="margin-bottom: 1.5rem;">
            <div class="card-header">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <h3 class="card-title">
                        <i class="ph-clock-counter-clockwise"></i>
                        Interrupted Tasks
                    </h3>
                    <button @click="findInterruptedTasks()" class="btn btn-sm btn-outline" :disabled="findingTasks">
                        <template x-if="findingTasks">
                            <div class="spinner" style="width: 1rem; height: 1rem;"></div>
                        </template>
                        <template x-if="!findingTasks">
                            <i class="ph-magnifying-glass"></i>
                        </template>
                        <span x-text="findingTasks ? 'Searching...' : 'Find Tasks'"></span>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div id="interrupted-tasks">
                    <!-- Initial state -->
                    <template x-if="!tasksSearched && !findingTasks">
                        <p style="margin: 0; color: var(--text-secondary); text-align: center; padding: 2rem;">
                            Click "Find Tasks" to search for interrupted grading tasks
                        </p>
                    </template>

                    <!-- Loading state -->
                    <template x-if="findingTasks">
                        <div class="loading-container">
                            <div class="spinner"></div>
                            <p>Searching for interrupted tasks...</p>
                        </div>
                    </template>

                    <!-- No tasks found -->
                    <template x-if="tasksSearched && interruptedTasks.length === 0">
                        <div style="text-align: center; padding: 2rem; color: var(--text-secondary);">
                            <i class="ph-check-circle" style="font-size: 3rem; display: block; margin-bottom: 1rem; color: var(--color-success);"></i>
                            <p style="margin: 0;">No interrupted tasks found. All clear!</p>
                        </div>
                    </template>

                    <!-- Tasks found -->
                    <template x-if="tasksSearched && interruptedTasks.length > 0">
                        <div>
                            <div style="margin-bottom: 1rem; padding: 0.75rem; background: var(--color-warning-alpha); border-left: 3px solid var(--color-warning); border-radius: var(--radius-md);">
                                <strong>Found <span x-text="interruptedTasks.length"></span> interrupted task(s)</strong>
                                <p style="margin: 0.25rem 0 0 0; font-size: 0.875rem;">These CSVs have partial grading. You can resume grading or clean them up.</p>
                            </div>

                            <div style="display: grid; gap: 1rem;">
                                <template x-for="task in interruptedTasks" :key="task.csv_path">
                                    <div style="padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border-left: 3px solid var(--color-warning);">
                                        <div style="margin-bottom: 0.75rem;">
                                            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
                                                <span :style="'display: inline-block; padding: 0.25rem 0.5rem; background: ' + getTypeColor(task.type) + '15; color: ' + getTypeColor(task.type) + '; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;'" x-text="task.type"></span>
                                                <strong style="font-size: 1rem;" x-text="task.content_name"></strong>
                                            </div>
                                            <div style="display: grid; gap: 0.25rem; font-size: 0.875rem; color: var(--text-secondary);">
                                                <div>
                                                    <i class="ph-folder"></i>
                                                    Course <span x-text="task.course_id"></span>
                                                    • Content ID <span x-text="task.content_id"></span>
                                                </div>
                                                <div>
                                                    <i class="ph-check-square"></i>
                                                    <span x-text="task.graded_questions"></span> / <span x-text="task.total_questions"></span> questions graded
                                                    (<span x-text="task.completion_percentage"></span>% complete)
                                                </div>
                                                <div>
                                                    <i class="ph-clock"></i>
                                                    Last modified: <span x-text="formatDate(task.last_modified)"></span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Progress bar -->
                                        <div style="width: 100%; height: 6px; background: var(--bg-primary); border-radius: var(--radius-full); overflow: hidden;">
                                            <div :style="'width: ' + task.completion_percentage + '%; height: 100%; background: var(--color-warning); transition: width 0.3s ease;'"></div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <!-- System Info -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph-info"></i>
                    System Information
                </h3>
            </div>
            <div class="card-body">
                <div style="display: grid; gap: 1rem;">

                    <div style="display: flex; justify-content: space-between; padding: 0.75rem; background: var(--bg-secondary); border-radius: var(--radius-md);">
                        <span style="color: var(--text-secondary);">Application Version:</span>
                        <strong style="color: var(--text-primary);" x-text="systemInfo.appVersion"></strong>
                    </div>

                    <div style="display: flex; justify-content: space-between; padding: 0.75rem; background: var(--bg-secondary); border-radius: var(--radius-md);">
                        <span style="color: var(--text-secondary);">Python Version:</span>
                        <strong style="color: var(--text-primary);" x-text="systemInfo.pythonVersion"></strong>
                    </div>

                    <div style="display: flex; justify-content: space-between; padding: 0.75rem; background: var(--bg-secondary); border-radius: var(--radius-md);">
                        <span style="color: var(--text-secondary);">Platform:</span>
                        <strong style="color: var(--text-primary);" x-text="systemInfo.platform"></strong>
                    </div>

                    <div style="display: flex; justify-content: space-between; padding: 0.75rem; background: var(--bg-secondary); border-radius: var(--radius-md);">
                        <span style="color: var(--text-secondary);">Data Folder:</span>
                        <strong style="color: var(--text-primary);">data/</strong>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}

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