{% extends "base.html" %}

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

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

<div class="row mb-3">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <h5>Send Test Alert</h5>
                <div class="input-group">
                    <input type="text" class="form-control" id="testMessage" placeholder="Enter test message">
                    <button class="btn btn-primary" onclick="sendTestAlert()">
                        <i class="bi bi-send"></i> Send to Telegram
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5>Alert History</h5>
            </div>
            <div class="card-body">
                <div class="list-group" id="alertsList">
                    <div class="text-center py-3">Loading...</div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function loadAlerts() {
        $.get('/api/alerts?limit=100', function (data) {
            if (data && data.length > 0) {
                let html = '';
                data.forEach(alert => {
                    let badgeClass = alert.severity === 'critical' ? 'danger' : 'warning';
                    let notifiedBadge = alert.notified
                        ? '<span class="badge bg-success">Notified</span>'
                        : '<span class="badge bg-secondary">Pending</span>';

                    html += `
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <div class="mb-2">
                                    <span class="badge bg-${badgeClass}">${alert.severity.toUpperCase()}</span>
                                    ${notifiedBadge}
                                    <span class="badge bg-info">${alert.alert_type}</span>
                                    <small class="text-muted ms-2">${new Date(alert.created_at).toLocaleString()}</small>
                                </div>
                                <p class="mb-0">${alert.message}</p>
                            </div>
                        </div>
                    </div>
                `;
                });
                $('#alertsList').html(html);
            } else {
                $('#alertsList').html('<div class="text-center py-3 text-muted">No alerts</div>');
            }
        });
    }

    function sendTestAlert() {
        const message = $('#testMessage').val();
        if (!message) {
            alert('Please enter a message');
            return;
        }

        $.ajax({
            url: '/api/telegram/send',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ message: message }),
            success: function (data) {
                alert('Message sent to Telegram!');
                $('#testMessage').val('');
            },
            error: function (xhr) {
                alert(`Failed to send message: ${xhr.responseJSON?.detail || 'Unknown error'}`);
            }
        });
    }

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