{% extends "wagtailadmin/base.html" %}

{% block titletag %}Monitoramento do Portal{% endblock %}

{% block extra_css %}
<style>
  .monitoring-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .monitoring-counters { display: flex; gap: 12px; }
  .counter-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
  }
  .counter-badge.ok      { background: #d4edda; color: #155724; }
  .counter-badge.warning { background: #fff3cd; color: #856404; }
  .counter-badge.error   { background: #f8d7da; color: #721c24; }

  .checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
  }
  .check-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    position: relative;
  }
  .check-card .status-bar {
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    border-radius: 8px 0 0 8px;
  }
  .check-card.ok      .status-bar { background: #28a745; }
  .check-card.warning .status-bar { background: #ffc107; }
  .check-card.error   .status-bar { background: #dc3545; }
  .check-card.unknown .status-bar { background: #adb5bd; }

  .check-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-left: 8px;
  }
  .check-name { font-weight: 600; font-size: 14px; color: #343a40; }

  .status-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
  }
  .status-pill.ok      { background: #d4edda; color: #155724; }
  .status-pill.warning { background: #fff3cd; color: #856404; }
  .status-pill.error   { background: #f8d7da; color: #721c24; }
  .status-pill.unknown { background: #e9ecef; color: #6c757d; }

  .check-message { font-size: 13px; color: #6c757d; margin: 8px 0 0 8px; }
  .check-meta    { font-size: 11px; color: #adb5bd; margin: 6px 0 0 8px; }
  .check-actions { margin-top: 10px; margin-left: 8px; display: flex; gap: 8px; }

  .btn-run {
    font-size: 12px; padding: 4px 10px;
    border: 1px solid #6c757d; border-radius: 4px;
    background: white; cursor: pointer; color: #495057;
  }
  .btn-run:hover { background: #f8f9fa; }

  .btn-detail {
    font-size: 12px; padding: 4px 10px;
    border: 1px solid #007bff; border-radius: 4px;
    background: white; cursor: pointer; color: #007bff;
  }
  .btn-detail:hover { background: #e8f0fe; }

  .history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .history-table th {
    background: #f8f9fa; padding: 10px 12px;
    text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6;
  }
  .history-table td { padding: 9px 12px; border-bottom: 1px solid #f1f3f5; }
  .history-table tr:hover td { background: #f8f9fa; }

  .spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid #ccc; border-top-color: #333;
    border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 1000;
    align-items: center; justify-content: center;
  }
  .modal-overlay.active { display: flex; }
  .modal-box {
    background: #fff; border-radius: 8px; padding: 24px;
    max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto;
  }
  .modal-box pre {
    background: #f8f9fa; padding: 12px; border-radius: 4px;
    font-size: 12px; white-space: pre-wrap; word-break: break-word;
  }
  .modal-close {
    float: right; background: none; border: none;
    font-size: 20px; cursor: pointer; color: #6c757d;
  }
</style>
{% endblock %}

{% block content %}
<div class="nice-padding">

  <!-- Header -->
  <div class="monitoring-header">
    <h1 style="margin:0">Monitoramento do Portal</h1>
    <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
      <div class="monitoring-counters">
        {% if errors %}
          <span class="counter-badge error">{{ errors }} erro{% if errors != 1 %}s{% endif %}</span>
        {% endif %}
        {% if warnings %}
          <span class="counter-badge warning">{{ warnings }} aviso{% if warnings != 1 %}s{% endif %}</span>
        {% endif %}
        {% if not errors and not warnings %}
          <span class="counter-badge ok">Tudo OK</span>
        {% endif %}
      </div>
      <form method="post" action="{% url 'monitoring_run_all' %}" id="form-run-all">
        {% csrf_token %}
        <button type="submit" class="button button-primary" id="btn-run-all">
          Rodar todos os checks
        </button>
      </form>
    </div>
  </div>

  <!-- Grid de cards -->
  <div class="checks-grid">
    {% for item in checks_display %}
    <div class="check-card {{ item.status }}" id="card-{{ item.check_type }}">
      <div class="status-bar"></div>
      <div class="check-card-header">
        <span class="check-name">{{ item.label }}</span>
        <span class="status-pill {{ item.status }}" id="pill-{{ item.check_type }}">
          {% if item.log %}
            {{ item.log.get_status_display }}
          {% else %}
            Não executado
          {% endif %}
        </span>
      </div>
      <div class="check-message" id="msg-{{ item.check_type }}">
        {% if item.log %}{{ item.log.message }}{% else %}&mdash;{% endif %}
      </div>
      <div class="check-meta" id="meta-{{ item.check_type }}">
        {% if item.log %}
          {{ item.log.created_at|date:"d/m/Y H:i" }} &bull; {{ item.log.response_time_ms }}ms
        {% endif %}
      </div>
      <div class="check-actions">
        <button class="btn-run" onclick="runCheck('{{ item.check_type }}')">Atualizar</button>
        {% if item.log and item.log.details %}
          <button class="btn-detail" id="detail-btn-{{ item.check_type }}"
                  onclick="showDetail({{ item.log.pk }})">Detalhes</button>
        {% else %}
          <button class="btn-detail" id="detail-btn-{{ item.check_type }}" style="display:none"
                  onclick="showDetail(0)">Detalhes</button>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- Histórico -->
  <h2>Histórico recente</h2>
  <table class="history-table">
    <thead>
      <tr>
        <th>Check</th>
        <th>Status</th>
        <th>Mensagem</th>
        <th>Tempo</th>
        <th>Executado em</th>
        <th>Por</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for log in historico %}
      <tr>
        <td>{{ log.get_check_type_display }}</td>
        <td><span class="status-pill {{ log.status }}">{{ log.get_status_display }}</span></td>
        <td>{{ log.message }}</td>
        <td>{{ log.response_time_ms }}ms</td>
        <td>{{ log.created_at|date:"d/m/Y H:i:s" }}</td>
        <td>{{ log.run_by|default:"Sistema" }}</td>
        <td>
          {% if log.details %}
            <button class="btn-detail" onclick="showDetail({{ log.pk }})">JSON</button>
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="7" style="text-align:center;color:#adb5bd;padding:20px">
          Nenhum check foi executado ainda. Clique em "Rodar todos os checks".
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

</div>

<!-- Modal de detalhes JSON -->
<div class="modal-overlay" id="modal-overlay" onclick="closeModal(event)">
  <div class="modal-box">
    <button class="modal-close"
            onclick="document.getElementById('modal-overlay').classList.remove('active')">&times;</button>
    <h3 id="modal-title" style="margin-top:0"></h3>
    <p id="modal-message" style="color:#6c757d;margin-bottom:8px"></p>
    <pre id="modal-details"></pre>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const CSRF = document.querySelector('[name=csrfmiddlewaretoken]').value;

const STATUS_LABELS = { ok: 'OK', warning: 'Atenção', error: 'Erro', unknown: 'Não executado' };

function runCheck(checkName) {
  const card      = document.getElementById('card-'       + checkName);
  const pill      = document.getElementById('pill-'       + checkName);
  const msg       = document.getElementById('msg-'        + checkName);
  const meta      = document.getElementById('meta-'       + checkName);
  const detailBtn = document.getElementById('detail-btn-' + checkName);

  pill.innerHTML = '<span class="spinner"></span>';

  fetch(`/admin/monitoring/run/${checkName}/`, {
    method: 'POST',
    headers: { 'X-CSRFToken': CSRF },
  })
  .then(r => r.json())
  .then(data => {
    const s = data.status;
    card.className   = `check-card ${s}`;
    pill.className   = `status-pill ${s}`;
    pill.textContent = STATUS_LABELS[s] || s;
    msg.textContent  = data.message;
    meta.textContent = data.created_at + ' • ' + data.response_time_ms + 'ms';

    if (data.details) {
      detailBtn.style.display = '';
      detailBtn.onclick = () => showDetail(data.log_id);
    }
  })
  .catch(() => {
    pill.className   = 'status-pill error';
    pill.textContent = 'Erro';
    msg.textContent  = 'Falha ao executar o check.';
  });
}

function showDetail(logId) {
  fetch(`/admin/monitoring/log/${logId}/`)
  .then(r => r.json())
  .then(data => {
    document.getElementById('modal-title').textContent   = data.check_type;
    document.getElementById('modal-message').textContent = data.message + '  •  ' + data.created_at;
    document.getElementById('modal-details').textContent = JSON.stringify(data.details, null, 2);
    document.getElementById('modal-overlay').classList.add('active');
  });
}

function closeModal(e) {
  if (e.target.id === 'modal-overlay') {
    document.getElementById('modal-overlay').classList.remove('active');
  }
}

document.getElementById('form-run-all').addEventListener('submit', () => {
  const btn = document.getElementById('btn-run-all');
  btn.textContent = 'Executando...';
  btn.disabled    = true;
});
</script>
{% endblock %}