{% extends "base.html" %}

{% block title %}Backup & Restore - Enterprise VPN Hub{% endblock %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
    <div>
        <h1 style="font-size: 1.6rem; font-weight: 700;">Settings & User Data Backup</h1>
        <p style="color: var(--text-muted); font-size: 0.9rem;">
            Export, encrypt, and restore user accounts, WireGuard keys, OpenVPN certificates, and system configurations.
        </p>
    </div>
    <div>
        <a href="/admin/updates" class="btn btn-secondary btn-sm">
            ← Return to System Updates
        </a>
    </div>
</div>

<div class="alert alert-info" style="margin-bottom: 1.5rem;">
    <div>
        <strong>🔐 Sensitive Data Protection:</strong> Backups contain user credentials, WireGuard private keys, and OpenVPN certificates.
        It is strongly advised to protect backups with an <strong>AES-256 encryption password</strong> before saving to external storage.
    </div>
</div>

<div class="grid-2">
    <!-- Create & Download Backup Card -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">💾 Create Secure Backup</h2>
            <span class="badge badge-success">Export</span>
        </div>
        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
            Packages all users, credentials, WireGuard & OpenVPN keys, site-to-site endpoints, and server settings into a single downloadable snapshot.
        </p>

        <form method="POST" action="/admin/backups/create">
            <div class="form-group">
                <label for="backup_note">Backup Description / Note (Optional)</label>
                <input type="text" id="backup_note" name="backup_note" placeholder="e.g., Pre-update snapshot prior to v0.2.1">
            </div>

            <div class="form-group">
                <div class="checkbox-group" style="margin-bottom: 0.75rem;">
                    <input type="checkbox" id="encrypt_toggle" name="encrypt_toggle" value="1" checked onchange="toggleEncryptionFields()">
                    <label for="encrypt_toggle" style="margin-bottom: 0; cursor: pointer; color: #fff; font-weight: 600;">
                        🔒 Protect backup with AES-256 password encryption
                    </label>
                </div>
                <div style="font-size: 0.8rem; color: var(--text-muted); margin-left: 1.7rem;">
                    Encrypts the archive using industry-standard AES-256-CBC with PBKDF2 key derivation.
                </div>
            </div>

            <div id="encryption_inputs" style="background: rgba(0,0,0,0.25); border: 1px solid var(--card-border); border-radius: 8px; padding: 1rem; margin-bottom: 1.25rem;">
                <div class="form-group">
                    <label for="backup_password">Encryption Password</label>
                    <input type="password" id="backup_password" name="backup_password" placeholder="Enter a strong password">
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <label for="confirm_password">Confirm Encryption Password</label>
                    <input type="password" id="confirm_password" name="confirm_password" placeholder="Re-enter password to confirm">
                </div>
            </div>

            <button type="submit" class="btn btn-primary" style="width: 100%;">
                📥 Create & Download Backup Archive
            </button>
        </form>
    </div>

    <!-- Restore from Uploaded Backup File (With Dropzone) -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">↩️ Restore from Backup File</h2>
            <span class="badge badge-warning">Overwrite</span>
        </div>
        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem;">
            Upload an exported backup file (<code>.enc</code> or <code>.tar.gz</code>) to restore all user accounts and settings.
        </p>

        <form method="POST" action="/admin/backups/restore-upload" enctype="multipart/form-data" id="restoreForm">
            <!-- Dropzone Container -->
            <div class="form-group">
                <div id="backup-dropzone" class="dropzone-area">
                    <input type="file" id="backup_file" name="backup_file" accept=".enc,.tar.gz,.gz" class="dropzone-input" required onchange="handleBackupFileSelect(this)">
                    <div class="dropzone-content" id="backup-dropzone-content">
                        <div style="font-size: 2.2rem; margin-bottom: 0.5rem;">📂</div>
                        <div style="font-weight: 600; font-size: 0.95rem; color: #fff; margin-bottom: 0.25rem;">
                            Drag & drop backup file here, or click to browse
                        </div>
                        <div style="font-size: 0.8rem; color: var(--text-muted);">
                            Supports encrypted <code>.enc</code> and unencrypted <code>.tar.gz</code>
                        </div>
                    </div>
                    <!-- Selected File Preview -->
                    <div id="backup-file-preview" style="display: none; padding: 0.75rem; text-align: left;">
                        <div style="display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.05); padding: 0.75rem 1rem; border-radius: 6px;">
                            <div style="display: flex; align-items: center; gap: 0.75rem;">
                                <span style="font-size: 1.5rem;">📦</span>
                                <div>
                                    <strong id="backup-filename" style="color: #60a5fa; font-size: 0.9rem;"></strong>
                                    <div id="backup-filesize" style="font-size: 0.78rem; color: var(--text-muted);"></div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-secondary btn-sm" onclick="clearBackupFileSelection()">Change</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="restore_password">Decryption Password (if encrypted)</label>
                <input type="password" id="restore_password" name="restore_password" placeholder="Leave empty if backup was unencrypted">
                <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.3rem;">
                    Required if the uploaded file is encrypted with AES-256.
                </div>
            </div>

            <button type="submit" class="btn btn-danger" style="width: 100%;" onclick="return confirm('WARNING: Restoring this backup will replace current user accounts, keys, and configurations. Are you sure you wish to proceed?');">
                ⚡ Decrypt & Restore Backup
            </button>
        </form>
    </div>
</div>

<!-- Local Backup History Table -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">🗄️ Local Backup Repository</h2>
        <span style="font-size: 0.85rem; color: var(--text-muted);">Saved in <code>/var/backups/vpn-data/</code></span>
    </div>

    {% if backups %}
        <table>
            <thead>
                <tr>
                    <th>Backup Archive</th>
                    <th>Security</th>
                    <th>Created Timestamp</th>
                    <th>Size</th>
                    <th>Note / Description</th>
                    <th style="text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for b in backups %}
                <tr>
                    <td>
                        <strong style="color: #60a5fa;">{{ b.filename }}</strong>
                    </td>
                    <td>
                        {% if b.encrypted %}
                            <span class="badge badge-success">🔒 AES-256 Encrypted</span>
                        {% else %}
                            <span class="badge badge-warning">🔓 Unencrypted</span>
                        {% endif %}
                    </td>
                    <td>{{ b.created_at }}</td>
                    <td>{{ b.size_kb }} KB</td>
                    <td style="color: var(--text-muted); font-size: 0.85rem;">{{ b.note or '—' }}</td>
                    <td style="text-align: right; white-space: nowrap;">
                        <a href="/admin/backups/download/{{ b.filename }}" class="btn btn-secondary btn-sm" title="Download to local machine">
                            ⬇️ Download
                        </a>
                        {% if b.encrypted %}
                            <button type="button" class="btn btn-warning btn-sm" onclick="promptRestoreEncrypted('{{ b.filename }}')">
                                ↩️ Restore
                            </button>
                        {% else %}
                            <a href="/admin/backups/restore-local/{{ b.filename }}" class="btn btn-warning btn-sm"
                               onclick="return confirm('Restore all settings from {{ b.filename }}? Current configuration will be replaced.');">
                                ↩️ Restore
                            </a>
                        {% endif %}
                        <a href="/admin/backups/delete/{{ b.filename }}" class="btn btn-danger btn-sm"
                           onclick="return confirm('Delete backup file {{ b.filename }}?');" title="Delete backup">
                            🗑️
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p style="color: var(--text-muted); font-size: 0.9rem; text-align: center; padding: 2.5rem 0;">
            No local data backups found. Create a snapshot backup before performing updates to protect user accounts and configurations.
        </p>
    {% endif %}
</div>

<!-- Modal Dialog for Restoring Encrypted Local Backup -->
<div id="decryptModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; max-width: 450px; width: 90%; padding: 1.75rem; box-shadow: 0 10px 25px rgba(0,0,0,0.5);">
        <h3 style="font-size: 1.2rem; margin-bottom: 0.75rem; color: #fff;">🔒 Enter Decryption Password</h3>
        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
            This backup file is encrypted with AES-256. Enter the password that was used when creating it:
        </p>
        <form method="POST" action="/admin/backups/restore-local-encrypted">
            <input type="hidden" id="modal_filename" name="filename">
            <div class="form-group">
                <label for="modal_password">Decryption Password</label>
                <input type="password" id="modal_password" name="password" required autofocus>
            </div>
            <div style="display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem;">
                <button type="button" class="btn btn-secondary" onclick="closeDecryptModal()">Cancel</button>
                <button type="submit" class="btn btn-danger">Decrypt & Restore</button>
            </div>
        </form>
    </div>
</div>

<style>
.dropzone-area {
    position: relative;
    border: 2px dashed var(--card-border);
    border-radius: 8px;
    background: #0b1120;
    transition: all 0.2s ease;
    cursor: pointer;
    overflow: hidden;
}
.dropzone-area:hover, .dropzone-area.dragover {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.05);
}
.dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}
.dropzone-content {
    padding: 2rem 1.5rem;
    text-align: center;
    pointer-events: none;
}
</style>

<script>
function toggleEncryptionFields() {
    const checked = document.getElementById('encrypt_toggle').checked;
    const inputs = document.getElementById('encryption_inputs');
    const pwd = document.getElementById('backup_password');
    const conf = document.getElementById('confirm_password');
    if (checked) {
        inputs.style.display = 'block';
        pwd.required = true;
        conf.required = true;
    } else {
        inputs.style.display = 'none';
        pwd.required = false;
        conf.required = false;
    }
}

// Drag & Drop handling for Backup file
const backupDropzone = document.getElementById('backup-dropzone');
['dragenter', 'dragover'].forEach(eventName => {
    backupDropzone.addEventListener(eventName, (e) => {
        e.preventDefault();
        e.stopPropagation();
        backupDropzone.classList.add('dragover');
    }, false);
});
['dragleave', 'drop'].forEach(eventName => {
    backupDropzone.addEventListener(eventName, (e) => {
        e.preventDefault();
        e.stopPropagation();
        backupDropzone.classList.remove('dragover');
    }, false);
});

function handleBackupFileSelect(input) {
    if (input.files && input.files[0]) {
        const file = input.files[0];
        document.getElementById('backup-dropzone-content').style.display = 'none';
        document.getElementById('backup-file-preview').style.display = 'block';
        document.getElementById('backup-filename').textContent = file.name;
        document.getElementById('backup-filesize').textContent = (file.size / 1024).toFixed(1) + ' KB';
        
        // Auto-focus password field if file ends with .enc
        if (file.name.endsWith('.enc')) {
            document.getElementById('restore_password').focus();
        }
    }
}

function clearBackupFileSelection() {
    document.getElementById('backup_file').value = '';
    document.getElementById('backup-dropzone-content').style.display = 'block';
    document.getElementById('backup-file-preview').style.display = 'none';
}

function promptRestoreEncrypted(filename) {
    document.getElementById('modal_filename').value = filename;
    document.getElementById('modal_password').value = '';
    const modal = document.getElementById('decryptModal');
    modal.style.display = 'flex';
}

function closeDecryptModal() {
    document.getElementById('decryptModal').style.display = 'none';
}
</script>
{% endblock %}