{% extends "base.html" %}

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

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

<div class="row mb-3">
    <div class="col-12">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-primary active" id="filterAll">All Attacks</button>
            <button type="button" class="btn btn-outline-success" id="filterOur">Our Attacks</button>
            <button type="button" class="btn btn-outline-danger" id="filterAgainstUs">Attacks to Us</button>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5>Attacks by Service</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Service</th>
                                <th>Total</th>
                                <th>Our Attacks</th>
                                <th>Against Us</th>
                                <th>Points Gained</th>
                                <th>Points Lost</th>
                            </tr>
                        </thead>
                        <tbody id="serviceStatsTable">
                            <tr>
                                <td colspan="6" class="text-center">Loading...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5>Recent Attacks</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover table-sm">
                        <thead>
                            <tr>
                                <th>Time</th>
                                <th>Attacker</th>
                                <th>Victim</th>
                                <th>Service</th>
                                <th>Flags</th>
                                <th>Type</th>
                            </tr>
                        </thead>
                        <tbody id="attacksTable">
                            <tr>
                                <td colspan="6" class="text-center">Loading...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let currentFilter = 'all';

    function loadServiceStats() {
        $.get('/api/attacks/by-service', function (data) {
            if (data && data.length > 0) {
                let html = '';
                data.forEach(stat => {
                    html += `
                    <tr>
                        <td><strong>${stat.service_name}</strong></td>
                        <td>${stat.total_attacks}</td>
                        <td><span class="text-success">${stat.our_attacks}</span></td>
                        <td><span class="text-danger">${stat.attacks_to_us}</span></td>
                        <td><span class="text-success">+${stat.points_gained.toFixed(2)}</span></td>
                        <td><span class="text-danger">-${stat.points_lost.toFixed(2)}</span></td>
                    </tr>
                `;
                });
                $('#serviceStatsTable').html(html);
            }
        });
    }

    function loadAttacks() {
        let url = '/api/attacks?limit=100';
        if (currentFilter === 'our') {
            url += '&our_attacks=true';
        } else if (currentFilter === 'against') {
            url += '&attacks_to_us=true';
        }

        $.get(url, function (data) {
            if (data && data.length > 0) {
                let html = '';
                data.forEach(attack => {
                    let typeLabel = '';
                    if (attack.is_our_attack) {
                        typeLabel = '<span class="badge bg-success">Our Attack</span>';
                    } else if (attack.is_attack_to_us) {
                        typeLabel = '<span class="badge bg-danger">Against Us</span>';
                    }

                    const attackerName = attack.attacker_team_id ? (attack.attacker_team_name || `Team ${attack.attacker_team_id}`) : 'Unknown';
                    const victimName = attack.victim_team_id ? (attack.victim_team_name || `Team ${attack.victim_team_id}`) : 'Unknown';

                    html += `
                    <tr>
                        <td>${new Date(attack.timestamp).toLocaleString()}</td>
                        <td>${attackerName}</td>
                        <td>${victimName}</td>
                        <td>${attack.service_name}</td>
                        <td>${attack.points ? Math.round(attack.points) : '-'}</td>
                        <td>${typeLabel}</td>
                    </tr>
                `;
                });
                $('#attacksTable').html(html);
            } else {
                $('#attacksTable').html('<tr><td colspan="6" class="text-center text-muted">No attacks</td></tr>');
            }
        });
    }

    function setFilter(filter) {
        currentFilter = filter;
        $('.btn-group button').removeClass('active');
        $(`#filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`).addClass('active');
        loadAttacks();
    }

    $(document).ready(function () {
        loadServiceStats();
        loadAttacks();
        $('#refreshAttacks').click(function () {
            loadServiceStats();
            loadAttacks();
        });

        $('#filterAll').click(() => setFilter('all'));
        $('#filterOur').click(() => setFilter('our'));
        $('#filterAgainstUs').click(() => setFilter('against'));

        setInterval(loadAttacks, 5000); // Auto-refresh every 5 seconds
    });
</script>
{% endblock %}