{% extends 'admin/base.html' %}
{% block title %}{{ t('backup.title') }}{% endblock %}
{% block content %}

<div class="page-header page-header--with-action">
    <div class="page-header__content">
        <h2>💾 {{ t('backup.title') }}</h2>
    </div>
    {# height-keeper: the sticky bar is button-high on every page
       (posts-list standard); this page has no header action #}
    <span class="btn header-spacer" aria-hidden="true">&nbsp;</span>
</div>
<div class="page-help">{{ t('backup.subtitle') }}</div>


    <div class="settings-section">
        <h3>📊 {{ t('backup.overview') }}</h3>
        <div class="stat-grid">
            <div class="stat-item">
                <div class="stat-value">{{ post_count }}</div>
                <div class="stat-label">{{ t('backup.posts') }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">{{ page_count }}</div>
                <div class="stat-label">{{ t('backup.pages') }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">{{ image_count }}</div>
                <div class="stat-label">{{ t('backup.images') }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">{{ uploads_count }}</div>
                <div class="stat-label">{{ t('backup.files_in_uploads') }}</div>
            </div>
        </div>
        <div class="stat-grid">
            <div class="stat-item">
                <div class="stat-value">{{ db_type }}</div>
                <div class="stat-label">{{ t('backup.database') }}{% if db_size %} ({{ (db_size / 1024 / 1024) | round(1) }} MB){% endif %}</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">{{ (uploads_size / 1024 / 1024) | round(1) }} MB</div>
                <div class="stat-label">{{ t('backup.uploads_folder') }}</div>
            </div>
        </div>
    </div>

    <div class="settings-section">
        <h3>⬇️ {{ t('backup.download_title') }}</h3>
        <p class="text-muted mb-5">{{ t('backup.download_desc') }}</p>
        <form method="POST" id="backupForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="backup-btn" id="backupBtn">💾 {{ t('backup.create_download') }}</button>
        </form>
        <div class="info-box">
            <strong>{{ t('backup.whats_included') }}</strong><br>
            ✓ {{ t('backup.includes_db') }}<br>
            ✓ {{ t('backup.includes_media') }}<br>
            ✓ {{ t('backup.includes_env') }}
        </div>
    </div>

    <div class="settings-section">
        <h3>⬆️ {{ t('backup.restore_title') }}</h3>
        <p class="text-muted mb-5">{{ t('backup.restore_desc') }}</p>
        <form method="POST" action="{{ url_for('admin_backup_restore') }}" enctype="multipart/form-data" id="restoreForm" onsubmit="return confirmRestore();" data-restore-confirmed="0">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="mb-4">
                <input type="file" name="backup_file" id="backup_file" accept=".zip">
            </div>
            <button type="submit" class="backup-btn backup-btn--danger" id="restoreBtn">⬆️ {{ t('backup.restore_btn') }}</button>
        </form>
        <div class="info-box info-box--danger">
            <strong>⚠️ {{ t('backup.restore_warning') }}</strong> {{ t('backup.restore_warning_text') }}
        </div>
    </div>

<script>
document.getElementById('backupForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var btn = document.getElementById('backupBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner"></span> {{ t("backup.creating_backup") }}';
    var iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.name = 'backup_frame';
    document.body.appendChild(iframe);
    this.target = 'backup_frame';
    this.submit();
    setTimeout(function() {
        btn.disabled = false;
        btn.innerHTML = '💾 {{ t("backup.create_download") }}';
        setTimeout(function() { iframe.remove(); }, 5000);
    }, 3000);
});

function confirmRestore() {
    var form = document.getElementById('restoreForm');
    // Second pass after the themed confirm — let the submit through.
    if (form.dataset.restoreConfirmed === '1') {
        form.dataset.restoreConfirmed = '0';
        return true;
    }
    var file = document.getElementById('backup_file');
    if (!file.value) { AdminDialog.alert('{{ t("backup.restore_select_file") }}'); return false; }
    AdminDialog.confirm('{{ t("backup.restore_confirm")|replace("\n", "\\n") }}', { danger: true }).then(function(ok) {
        if (!ok) return;
        var btn = document.getElementById('restoreBtn');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner"></span> {{ t("backup.restoring") }}';
        form.dataset.restoreConfirmed = '1';
        form.submit();
    });
    return false;
}
</script>
{% endblock %}
