{% extends "base.html" %}

{% block title %}Dashboard - A/D Infrastructure Control{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h1>Dashboard <i class="bi bi-arrow-clockwise refresh-btn" id="refreshDashboard"></i></h1>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card stat-card">
            <div class="card-body">
                <h6 class="text-muted">Total Services</h6>
                <h2 id="totalServices">-</h2>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card success">
            <div class="card-body">
                <h6 class="text-muted">Our Attacks</h6>
                <h2 id="ourAttacks">-</h2>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card danger">
            <div class="card-body">
                <h6 class="text-muted">Attacks to Us</h6>
                <h2 id="attacksToUs">-</h2>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card warning">
            <div class="card-body">
                <h6 class="text-muted">Critical Alerts</h6>
                <h2 id="criticalAlerts">-</h2>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5>Services Status</h5>
            </div>
            <div class="card-body">
                <div id="servicesStatus" class="list-group">
                    <div class="text-center py-3">Loading...</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5>Recent Alerts</h5>
            </div>
            <div class="card-body">
                <div id="recentAlerts" class="list-group">
                    <div class="text-center py-3">Loading...</div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function loadDashboard() {
        $.get('/api/dashboard', function (data) {
            // Update stats
            $('#totalServices').text(data.services ? data.services.length : 0);
            $('#ourAttacks').text(data.scoreboard?.attacks_by_us || 0);
            $('#attacksToUs').text(data.scoreboard?.attacks_to_us || 0);
            $('#criticalAlerts').text(data.scoreboard?.critical_alerts_5min || 0);

            // Update services status
            if (data.services && data.services.length > 0) {
                let html = '';
                data.services.forEach(service => {
                    let statusClass = service.status === 'running' ? 'service-running' : 'service-stopped';
                    let icon = service.status === 'running' ? 'check-circle-fill' : 'x-circle-fill';
                    html += `
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>${service.name}</span>
                            <span class="${statusClass}">
                                <i class="bi bi-${icon}"></i> ${service.status}
                            </span>
                        </div>
                    </div>
                `;
                });
                $('#servicesStatus').html(html);
            }
        });

        // Load recent alerts
        $.get('/api/alerts?limit=5', function (data) {
            if (data && data.length > 0) {
                let html = '';
                data.forEach(alert => {
                    let badgeClass = alert.severity === 'critical' ? 'danger' : 'warning';
                    html += `
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <span class="badge bg-${badgeClass}">${alert.severity}</span>
                                <small class="text-muted ms-2">${new Date(alert.created_at).toLocaleString()}</small>
                                <p class="mb-0 mt-1">${alert.message}</p>
                            </div>
                        </div>
                    </div>
                `;
                });
                $('#recentAlerts').html(html);
            } else {
                $('#recentAlerts').html('<div class="text-center py-3 text-muted">No alerts</div>');
            }
        });
    }

    $(document).ready(function () {
        loadDashboard();
        $('#refreshDashboard').click(loadDashboard);
        setInterval(loadDashboard, 10000); // Auto-refresh every 10 seconds
    });
</script>
{% endblock %}