{% extends "base.html" %}
{% block title %}Backups{% endblock %}
{% set active = "backups" %}
{% block content %}
<div class="container-fluid">
  <h4 class="mb-3">💾 Backups</h4>

  <div class="row g-3 mb-3">
    <div class="col-md-4">
      <div class="card text-center p-3">
        <div class="h4">{{ backups|length }}</div>
        <small class="text-muted">Dias com backup</small>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card text-center p-3">
        <div class="h4">{{ last_backup or '—' }}</div>
        <small class="text-muted">Último backup</small>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card text-center p-3">
        <button class="btn btn-primary btn-lg w-100" onclick="generateBackup()">▶️ Gerar Backup Agora</button>
      </div>
    </div>
  </div>

  <div id="genResult" class="mb-3"></div>

  <!-- Tabela de backups -->
  <div class="card mb-3">
    <div class="card-header"><strong>📋 Arquivos de Backup</strong></div>
    <div class="card-body p-0">
      {% for date, group in backups.items() %}
      <div class="p-2 border-bottom bg-light fw-bold small">{{ date }}</div>
      <table class="table table-sm mb-0">
        {% for file in group.files %}
        <tr>
          <td style="width:30px">{{ file.label }}</td>
          <td><code style="font-size:11px">{{ file.name }}</code></td>
          <td style="width:80px">{{ file.size_hr }}</td>
          <td style="width:120px" class="text-end">
            <a href="/app/pbx/backups/download/{{ file.name }}" class="btn btn-sm btn-outline-primary">📥</a>
            <form method="POST" action="/app/pbx/backups/delete/{{ file.name }}" class="d-inline"
                  onsubmit="return confirm('Remover {{ file.name }}?')">
              <button class="btn btn-sm btn-outline-danger">🗑️</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </table>
      {% else %}
      <div class="p-4 text-center text-muted">Nenhum backup encontrado.</div>
      {% endfor %}
    </div>
  </div>

  <!-- Log -->
  <div class="card">
    <div class="card-header d-flex justify-content-between">
      <strong>📋 Log do Backup</strong>
      <button class="btn btn-sm btn-secondary" onclick="refreshLog()">🔄</button>
    </div>
    <div class="card-body p-0">
      <pre id="logContent" style="max-height:300px; overflow-y:auto; background:#1e1e1e; color:#c8c8c8; padding:12px; font-size:11px; margin:0;">{{ log_content }}</pre>
    </div>
  </div>
</div>

<script>
async function generateBackup() {
  const btn = document.querySelector('.btn-primary.btn-lg');
  btn.disabled = true; btn.innerHTML = '⏳ Gerando...';
  const div = document.getElementById('genResult');
  try {
    const resp = await fetch('/app/pbx/backups/generate', { method: 'POST' });
    const data = await resp.json();
    if (data.status === 'ok') {
      div.innerHTML = `<div class="alert alert-success">✅ ${data.message}</div>`;
      setTimeout(() => location.reload(), 1500);
    } else {
      div.innerHTML = `<div class="alert alert-danger">❌ ${data.message}</div>`;
      btn.disabled = false; btn.innerHTML = '▶️ Gerar Backup Agora';
    }
  } catch(e) {
    div.innerHTML = `<div class="alert alert-danger">❌ ${e.message}</div>`;
    btn.disabled = false; btn.innerHTML = '▶️ Gerar Backup Agora';
  }
}

async function refreshLog() {
  const pre = document.getElementById('logContent');
  pre.textContent = 'Carregando...';
  try {
    const resp = await fetch('/app/pbx/backups/log');
    pre.textContent = await resp.text();
  } catch(e) {
    pre.textContent = 'Erro: ' + e.message;
  }
}
</script>
{% endblock %}