{% extends "base.html" %}
{% block title %}Sprawdź IP{% endblock %}

{% block content %}
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
  <div>
    <h1 class="h3 text-white mb-1">Sprawdź IP</h1>
    <p class="text-secondary mb-0">Szybka diagnostyka adresu — logi, endpointy i metryki powiązane z IP.</p>
  </div>
</div>

<!-- Formularz -->
<div class="card bg-dark border-secondary mb-4">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span>Wprowadź IP do sprawdzenia</span>
  </div>
  <div class="card-body">
    <form method="post" id="reset-ip-form" novalidate>
      <div class="mb-3 col-sm-6 col-md-5 col-lg-4">
        <label for="ip" class="form-label text-primary">Adres IPv4</label>
        <input id="ip" name="ip" class="form-control bg-dark text-white border-secondary" inputmode="numeric"
          autocomplete="off" required placeholder="np. 185.12.34.56" value="{{ ip }}" pattern="\d{1,3}(\.\d{1,3}){3}">
        <div class="form-text text-primary"><code>Format: xxx.xxx.xxx.xxx</code></div>
        <div class="invalid-feedback">Podaj poprawny adres IPv4.</div>
      </div>
      <div class="col-12">
        <button id="btn-confirm-ip" type="submit" class="btn btn-outline-primary">Sprawdź</button>
      </div>
    </form>
  </div>
</div>

<!-- Ostatnie błędy -->
{% if recent_errors %}
<div class="card bg-dark border-secondary mb-4">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span>Ostatnie błędy</span>
    <div class="input-group input-group-sm" style="width: 260px;">
      <span class="input-group-text bg-dark border-secondary text-secondary">🔎</span>
      <input id="errors-search" type="search" class="form-control bg-dark border-secondary text-white"
        placeholder="Filtruj błędy…">
    </div>
  </div>
  <div class="card-body">
    <div class="accordion" id="errorsAccordion">
      {% for error_entry in recent_errors %}
      <div class="accordion-item bg-transparent border-secondary">
        <h2 class="accordion-header" id="err-h-{{ loop.index }}">
          <button class="accordion-button collapsed bg-dark text-white border-secondary" type="button"
            data-bs-toggle="collapse" data-bs-target="#err-c-{{ loop.index }}" aria-expanded="false"
            aria-controls="err-c-{{ loop.index }}">
            <span class="me-2 badge bg-danger">#{{ loop.index }}</span>
            <span class="error-title text-truncate" style="max-width: 70%;">{{ error_entry[:120] }}{% if
              error_entry|length > 120 %}…{% endif %}</span>
          </button>
        </h2>
        <div id="err-c-{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="err-h-{{ loop.index }}"
          data-bs-parent="#errorsAccordion">
          <div class="accordion-body">
            <pre class="mb-2 text-white small" style="white-space: pre-wrap;">{{ error_entry }}</pre>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}

<!-- Endpointy -->
{% if endpoints %}
<div class="card bg-dark border-secondary mb-4">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span>Zalogowane endpointy <span class="text-secondary">( {{ endpoints|length }} )</span></span>
    <div class="d-flex align-items-center gap-2">
      <div class="input-group input-group-sm" style="width: 320px;">
        <span class="input-group-text bg-dark border-secondary text-secondary">🔎</span>
        <input id="endpoints-search" type="search" class="form-control bg-dark border-secondary text-white"
          placeholder="Filtruj endpointy…">
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-dark table-hover align-middle mb-0">
        <thead>
          <tr>
            <th style="width:64px">#</th>
            <th>Endpoint</th>
          </tr>
        </thead>
        <tbody id="endpoints-tbody">
          {% for endpoint in endpoints %}
          <tr>
            <td class="text-secondary">{{ loop.index }}</td>
            <td>
              <span class="d-inline-block text-truncate" style="max-width: 70%;" title="{{ endpoint }}">{{ endpoint
                }}</span>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <div id="endpoints-empty" class="text-center text-secondary small d-none py-4">Brak wyników dla podanego filtra
      </div>
    </div>
  </div>
</div>
{% endif %}

<!-- Metryki -->
{% if metrics %}
<div class="card bg-dark border-secondary mb-4">
  <div class="card-header">Metryki</div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-dark align-middle mb-0">
        <thead>
          <tr>
            <th>Klucz</th>
            <th class="text-end">Wartość</th>
          </tr>
        </thead>
        <tbody>
          {% for key, value in metrics.items() %}
          <tr>
            <td class="text-secondary">{{ key }}</td>
            <td class="text-end">
              {% if value is number %}
              <span class="badge bg-primary">{{ value }}</span>
              {% else %}
              <span class="badge bg-secondary">{{ value }}</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endif %}

<!-- Status bana -->
{% if is_banned %}
<div class="card bg-dark border-danger mb-4">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span class="text-danger">Status: IP jest ZBANOWANE</span>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-dark align-middle mb-0">
        <tbody>
          <tr>
            <td class="text-secondary" style="width:220px">Powód</td>
            <td>{{ ban_info.reason or ban_info.source or "brak danych" }}</td>
          </tr>
          <tr>
            <td class="text-secondary">Źródło</td>
            <td>{{ ban_info.source or "-" }}</td>
          </tr>
          <tr>
            <td class="text-secondary">Utworzono</td>
            <td>{{ ban_info.created_at or ban_info.timestamp or "-" }}</td>
          </tr>
          <tr>
            <td class="text-secondary">Wygasa</td>
            <td>{{ ban_info.expires or "-" }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/check.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/ip_validate.js') }}" defer></script>

{% if message %}
<script>window.addEventListener('DOMContentLoaded', () => window.showToast?.({ text: {{ message| tojson }}, variant: 'success' }));</script>
{% endif %}
{% if error %}
<script>window.addEventListener('DOMContentLoaded', () => window.showToast?.({ text: {{ error| tojson }}, variant: 'danger' }));</script>
{% endif %}

{% endblock %}