{% extends "base.html" %}

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

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">System Health</h1>
    <button class="btn btn-sm btn-outline-primary" onclick="location.reload()">
        <i class="fas fa-sync"></i> Refresh
    </button>
</div>

<!-- System Metrics -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card">
            <div class="card-body text-center">
                <h6 class="text-muted">Memory Usage</h6>
                <h3 class="text-primary">{{ system_stats.memory_used }}</h3>
                <small class="text-muted">{{ system_stats.memory_percent }}% of available</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body text-center">
                <h6 class="text-muted">CPU Usage</h6>
                <h3 class="text-success">{{ system_stats.cpu_percent }}%</h3>
                <small class="text-muted">Current process</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body text-center">
                <h6 class="text-muted">Active Threads</h6>
                <h3 class="text-info">{{ system_stats.threads }}</h3>
                <small class="text-muted">Running</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body text-center">
                <h6 class="text-muted">Uptime</h6>
                <h3 class="text-warning">{{ system_stats.uptime_hours }}h</h3>
                <small class="text-muted">Hours</small>
            </div>
        </div>
    </div>
</div>

<!-- Cache Statistics -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-brain"></i> AI Result Cache</h5>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <tbody>
                        <tr>
                            <td><strong>Total Entries</strong></td>
                            <td>{{ cache_stats.ai_cache.total_entries }}</td>
                        </tr>
                        <tr>
                            <td><strong>Valid Entries</strong></td>
                            <td class="text-success">{{ cache_stats.ai_cache.valid_entries }}</td>
                        </tr>
                        <tr>
                            <td><strong>Expired Entries</strong></td>
                            <td class="text-warning">{{ cache_stats.ai_cache.expired_entries }}</td>
                        </tr>
                        <tr>
                            <td><strong>Cache Size</strong></td>
                            <td>{{ "%.2f"|format(cache_stats.ai_cache.cache_size_mb) }} MB</td>
                        </tr>
                        <tr>
                            <td><strong>Oldest Entry Age</strong></td>
                            <td>{{ (cache_stats.ai_cache.oldest_entry_age / 60)|int }} minutes</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Database Connection Pool -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-database"></i> Database Connection Pool</h5>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <tbody>
                        <tr>
                            <td><strong>Pool Size</strong></td>
                            <td>{{ db_stats.pool_size }}</td>
                        </tr>
                        <tr>
                            <td><strong>Checked Out Connections</strong></td>
                            <td>{{ db_stats.checked_out }}</td>
                        </tr>
                        <tr>
                            <td><strong>Overflow</strong></td>
                            <td>{{ db_stats.overflow }}</td>
                        </tr>
                        <tr>
                            <td><strong>Available Connections</strong></td>
                            <td class="text-success">{{ db_stats.pool_size - db_stats.checked_out }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Error Tracking -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> Error Tracking</h5>
                {% if error_stats.errors_last_5min > 0 %}
                <span class="badge bg-danger">{{ error_stats.errors_last_5min }} errors in last 5 min</span>
                {% else %}
                <span class="badge bg-success">No recent errors</span>
                {% endif %}
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3 text-center">
                        <h6 class="text-muted">Database Errors</h6>
                        <h4 class="text-danger">{{ error_stats.error_counts.database }}</h4>
                    </div>
                    <div class="col-md-3 text-center">
                        <h6 class="text-muted">Processing Errors</h6>
                        <h4 class="text-warning">{{ error_stats.error_counts.processing }}</h4>
                    </div>
                    <div class="col-md-3 text-center">
                        <h6 class="text-muted">API Errors</h6>
                        <h4 class="text-info">{{ error_stats.error_counts.api }}</h4>
                    </div>
                    <div class="col-md-3 text-center">
                        <h6 class="text-muted">Moderation Errors</h6>
                        <h4 class="text-secondary">{{ error_stats.error_counts.moderation }}</h4>
                    </div>
                </div>

                {% if recent_errors %}
                <h6 class="mt-4 mb-3">Recent Errors (Last 20)</h6>
                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                    <table class="table table-sm table-hover">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th>Time</th>
                                <th>Type</th>
                                <th>Message</th>
                                <th>Content ID</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for error in recent_errors %}
                            <tr>
                                <td class="text-nowrap">{{ error.time_ago }}</td>
                                <td>
                                    {% if error.type == 'database' %}
                                    <span class="badge bg-danger">{{ error.type }}</span>
                                    {% elif error.type == 'processing' %}
                                    <span class="badge bg-warning">{{ error.type }}</span>
                                    {% elif error.type == 'api' %}
                                    <span class="badge bg-info">{{ error.type }}</span>
                                    {% else %}
                                    <span class="badge bg-secondary">{{ error.type }}</span>
                                    {% endif %}
                                </td>
                                <td><small>{{ error.message[:100] }}{% if error.message|length > 100 %}...{% endif %}</small></td>
                                <td>
                                    {% if error.content_id %}
                                    <code class="small">{{ error.content_id[:8] }}</code>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-center text-muted mt-3">No errors recorded</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
// Auto-refresh every 30 seconds
setTimeout(function() {
    location.reload();
}, 30000);
</script>

{% endblock %}