{% extends "admin/base_site.html" %}
{% block content %}
<h1>AccessLog / TrashIP — Stats</h1>
<p>Période: {{ since }} → {{ now }}</p>

<div style="max-width: 1000px;">
  <canvas id="bansChart" height="90"></canvas>
</div>

<h2>Top scanners (TrashIP)</h2>
<table class="adminlist table">
  <thead>
    <tr>
      <th>IP</th>
      <th>404</th>
      <th>Sensitive</th>
      <th>Banned</th>
      <th>Ban until</th>
      <th>Last seen</th>
    </tr>
  </thead>
  <tbody>
    {% for r in top_scanners %}
    <tr>
      <td>{{ r.ip }}</td>
      <td>{{ r.count_404 }}</td>
      <td>{{ r.count_sensitive }}</td>
      <td>{{ r.is_banned }}</td>
      <td>{{ r.ban_until|default:"-" }}</td>
      <td>{{ r.last_seen }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const bans = {{ bans_by_day|safe }};
  const unbans = {{ unbans_by_day|safe }};

  function toLabels(rows){
    return rows.map(r => r.d);
  }
  function toValues(rows){
    return rows.map(r => r.n);
  }

  const labels = Array.from(new Set([...toLabels(bans), ...toLabels(unbans)])).sort();

  function align(rows){
    const m = new Map(rows.map(r => [r.d, r.n]));
    return labels.map(d => m.get(d) || 0);
  }

  new Chart(document.getElementById('bansChart'), {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        { label: 'Bans', data: align(bans) },
        { label: 'Unbans', data: align(unbans) }
      ]
    },
    options: {
      responsive: true,
      scales: { y: { beginAtZero: true } }
    }
  });
</script>
{% endblock %}