{% extends "base.html" %}
{% block title %}Firewall SIP{% endblock %}
{% set active = "firewall" %}
{% block content %}
<div class="container-fluid">
  <h4 class="mb-3">🔥 Firewall SIP</h4>

  <!-- Cards de Status -->
  <div class="row g-3 mb-3">
    {% for j in jails %}
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <strong>
            {% if j.jail == "sisnetcall-sip" %}📞 SIP
            {% elif j.jail == "sisnetcall-http" %}🌐 HTTP
            {% elif j.jail == "sshd" %}🔐 SSH
            {% else %}{{ j.jail }}{% endif %}
          </strong>
          <span class="badge bg-{{ 'success' if 'Banned IP list:' in j.status and 'Currently banned:	0' not in j.status else 'secondary' }}">
            {{ j.status.split('Currently banned:')[-1].split('\n')[0].strip() if 'Currently banned:' in j.status else '?' }} ativos
          </span>
        </div>
        <div class="card-body small">
          {% if j.status %}
            {% for line in j.status.split('\n') %}
              {% if 'Total failed' in line or 'Total banned' in line or 'Currently failed' in line or 'Currently banned' in line %}
                <div>{{ line.strip() }}</div>
              {% endif %}
            {% endfor %}
          {% else %}
            <div class="text-muted">{{ j.status }}</div>
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  <div class="row g-3">
    <!-- Whitelist -->
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
          <strong>✅ Whitelist</strong>
          <button class="btn btn-sm btn-primary" onclick="addWhitelist()">➕ Adicionar</button>
        </div>
        <div class="card-body">
          {% if whitelist %}
          <table class="table table-sm">
            <thead><tr><th>IP / Rede</th><th></th></tr></thead>
            <tbody>
            {% for entry in whitelist %}
            <tr>
              <td><code>{{ entry }}</code></td>
              <td>
                <form method="POST" action="/app/pbx/firewall/whitelist/remove" class="d-inline"
                      onsubmit="return confirm('Remover {{ entry }} da whitelist?')">
                  <input type="hidden" name="ip" value="{{ entry.split('#')[0].strip() }}">
                  <button class="btn btn-sm btn-outline-danger">✕</button>
                </form>
              </td>
            </tr>
            {% endfor %}
            </tbody>
          </table>
          {% else %}
          <p class="text-muted">Nenhum IP na whitelist (além do padrão 127.0.0.1, 172.27.0.0/16)</p>
          {% endif %}
        </div>
      </div>

      <!-- IPs Banidos -->
      <div class="card">
        <div class="card-header">
          <strong>🚫 IPs Banidos</strong>
        </div>
        <div class="card-body">
          {% if banned %}
          <table class="table table-sm">
            <thead><tr><th>IP</th><th></th></tr></thead>
            <tbody>
            {% for ip in banned %}
            <tr>
              <td><code>{{ ip }}</code></td>
              <td>
                <form method="POST" action="/app/pbx/firewall/unban" class="d-inline">
                  <input type="hidden" name="ip" value="{{ ip }}">
                  <input type="hidden" name="jail" value="sisnetcall-sip">
                  <button class="btn btn-sm btn-success" onclick="return confirm('Desbloquear {{ ip }}?')">Desbloquear</button>
                </form>
              </td>
            </tr>
            {% endfor %}
            </tbody>
          </table>
          {% else %}
          <p class="text-muted">Nenhum IP banido no momento 🎉</p>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Logs Recentes -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <strong>📋 Tentativas Recentes</strong>
          <span class="badge bg-info ms-2">{{ recent|length }} linhas</span>
        </div>
        <div class="card-body p-0">
          <div style="max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 11px; background: #1e1e1e; color: #c8c8c8; padding: 8px; white-space: pre-wrap; word-break: break-all;" id="logViewer">
            {% if recent %}
              {% for line in recent %}
                {% if line %}
                  {% if 'Failed' in line or 'failed' in line or 'reject' in line|lower or 'invalid' in line|lower %}
                    <span style="color:#f44747;">{{ line }}</span>
                  {% elif 'SECURITY' in line %}
                    <span style="color:#ffcc00;">{{ line }}</span>
                  {% else %}
                    {{ line }}
                  {% endif %}
                  {% if not loop.last %}<br>{% endif %}
                {% endif %}
              {% endfor %}
            {% else %}
              <span class="text-muted">Nenhum log de segurança encontrado.</span>
            {% endif %}
          </div>
        </div>
        <div class="card-footer">
          <button class="btn btn-sm btn-secondary" onclick="refreshLogs()">🔄 Atualizar</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
function addWhitelist() {
  const ip = prompt("Digite o IP ou rede para adicionar à whitelist:\nEx: 189.12.34.56, 10.0.0.0/8");
  if (!ip || !ip.trim()) return;
  const comment = prompt("Comentário (opcional):");
  const formData = new FormData();
  formData.append("ip", ip.trim());
  if (comment) formData.append("comment", comment.trim());
  fetch("/app/pbx/firewall/whitelist/add", { method: "POST", body: formData })
    .then(r => r.json())
    .then(d => { alert(d.message); if (d.status === "ok") location.reload(); })
    .catch(e => alert("Erro: " + e.message));
}

async function refreshLogs() {
  const viewer = document.getElementById("logViewer");
  viewer.innerHTML = "Atualizando...";
  try {
    const resp = await fetch("/app/pbx/firewall/recent-logs");
    const data = await resp.json();
    if (data.lines && data.lines.length > 0) {
      viewer.innerHTML = data.lines.map(line => {
        const isErr = /[Ff]ailed|[Rr]eject|[Ii]nvalid/.test(line);
        const isSec = /SECURITY/.test(line);
        if (isErr) return '<span style=color:#f44747;>' + line + '</span>';
        if (isSec) return '<span style=color:#ffcc00;>' + line + '</span>';
        return line;
      }).join("<br>");
    } else {
      viewer.innerHTML = '<span class=text-muted>Nenhum log recente.</span>';
    }
  } catch(e) {
    viewer.innerHTML = "Erro: " + e.message;
  }
}
</script>
{% endblock %}