{% extends spa_base or "base.html"%}
{% block title %}Admin - Backup{% endblock %}
{% block extra_head %}
<style>
.admin-backup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}
.admin-card {
    background: #1a1a2e;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.admin-card h3 { margin: 0 0 15px; font-size: 16px; color: #e0e0e0; }
.admin-card label { display: block; margin-bottom: 6px; color: #aaa; font-size: 13px; }
.admin-card input[type=number] {
    width: 120px; padding: 8px 12px; border-radius: 8px; border: 1px solid #333;
    background: #16213e; color: #fff; font-size: 14px;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
    padding: 10px 12px; text-align: left; border-bottom: 1px solid #2a2a4a;
    font-size: 13px;
}
.admin-table th { color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.admin-table td { color: #ccc; }
.btn-sm {
    padding: 5px 12px; border-radius: 6px; border: none; cursor: pointer;
    font-size: 12px; text-decoration: none; display: inline-block;
}
.btn-download { background: #0f3460; color: #fff; }
.btn-download:hover { background: #1a5276; }
.btn-delete { background: #5a1a1a; color: #ff6b6b; }
.btn-delete:hover { background: #7a2020; }
.btn-force {
    background: linear-gradient(135deg, #e94560, #c23152); color: #fff;
    padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer;
    font-size: 15px; font-weight: 600;
}
.btn-force:hover { opacity: .9; }
.btn-save {
    background: #0f3460; color: #fff; padding: 8px 20px; border: none;
    border-radius: 8px; cursor: pointer; font-size: 14px; margin-left: 10px;
}
.btn-save:hover { background: #1a5276; }
.backup-status { color: #4caf50; font-size: 13px; margin-top: 10px; }
.empty-state { color: #666; text-align: center; padding: 40px; font-size: 14px; }
@media (max-width: 768px) {
    .admin-backup-grid { grid-template-columns: 1fr; }
}
</style>
{% endblock %}
{% block content %}
<div class="admin-header">
    <h1>Backup do Banco de Dados</h1>
    <p>Gerencie os backups automaticos do sistema. Os backups salvam o banco de dados e as configuracoes.</p>
</div>
<div class="admin-nav-pills">
    <a href="{{ url_for('admin_backup') }}" class="active">Backup</a>
    <a href="{{ url_for('admin_panel') }}">← Voltar ao Painel</a>
</div>

<div class="admin-backup-grid">
    <div class="admin-card">
        <h3>⚡ Acao Rapida</h3>
        <form method="POST">
            <input type="hidden" name="action" value="force">
            <button type="submit" class="btn-force">Forcar Backup Agora</button>
        </form>
        <p class="backup-status">{% with messages = get_flashed_messages() %}{% if messages %}{{ messages[-1] }}{% endif %}{% endwith %}</p>
    </div>
    <div class="admin-card">
        <h3>⏱️ Intervalo do Backup Automatico</h3>
        <form method="POST">
            <input type="hidden" name="action" value="set_interval">
            <label for="interval">A cada quantos segundos?</label>
            <div style="display:flex;align-items:center;margin-top:8px;">
                <input type="number" name="interval" id="interval" value="{{ interval }}" min="10" required>
                <span style="color:#888;margin-left:8px;">segundos</span>
                <button type="submit" class="btn-save">Salvar</button>
            </div>
        </form>
    </div>
</div>

<h2 style="margin-bottom:15px;font-size:18px;">🗂️ Backups Recentes</h2>
{% if backups %}
<table class="admin-table">
    <thead>
        <tr>
            <th>Arquivo</th>
            <th>Tipo</th>
            <th>Tamanho</th>
            <th>Data</th>
            <th>Acoes</th>
        </tr>
    </thead>
    <tbody>
        {% for b in backups %}
        <tr>
            <td><code>{{ b.filename }}</code></td>
            <td>
                {% if b.type == 'db' %}
                <span style="color:#4fc3f7;">{% if b.filename.endswith('.db') %}Banco de Dados{% elif b.filename.endswith('.db-wal') %}WAL{% else %}SHM{% endif %}</span>
                {% elif b.type == 'settings' %}
                <span style="color:#ffb74d;">Configuracoes</span>
                {% elif b.type == 'm3u' %}
                <span style="color:#81c784;">Lista M3U</span>
                {% else %}
                <span style="color:#888;">Outro</span>
                {% endif %}
            </td>
            <td>{{ '%.1f KB'|format(b.size / 1024) }}</td>
            <td>{{ b.modified|bdatetime('%d/%m/%Y %H:%M:%S') }}</td>
            <td>
                <a href="{{ url_for('admin_backup_download', filename=b.filename) }}" class="btn-sm btn-download">Download</a>
                <form method="POST" action="{{ url_for('admin_backup_delete', filename=b.filename) }}" style="display:inline;" onsubmit="return confirm('Excluir {{ b.filename }}?')">
                    <button type="submit" class="btn-sm btn-delete">Excluir</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% else %}
<div class="empty-state">Nenhum backup encontrado.</div>
{% endif %}
{% endblock %}