{% extends "base.html" %}

{% block title %}System Updates - 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;">System Updates & Versioning</h1>
        <p style="color: var(--text-muted); font-size: 0.9rem;">Perform in-place application updates, manage versioning, and create rollback backups</p>
    </div>
    <div style="display: flex; gap: 0.5rem; align-items: center;">
        <a href="/admin/backups" class="btn btn-secondary btn-sm">
            💾 Backup Settings & Users
        </a>
        <span class="badge" style="background: var(--primary); color: #fff; font-size: 0.9rem; padding: 0.5rem 1rem;">
            Current Version: v{{ app_version }}
        </span>
    </div>
</div>

<!-- Data Protection Recommendation Banner -->
<div class="alert alert-info" style="margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <strong>🛡️ Pre-Update Data Protection:</strong> Before applying any update package, it is recommended to create a snapshot backup of your user accounts, passwords, and cryptographic keys.
    </div>
    <a href="/admin/backups" class="btn btn-primary btn-sm" style="white-space: nowrap; margin-left: 1rem;">
        🔒 Create Encrypted Backup
    </a>
</div>

<div class="grid-2">
    <!-- Current Version & Status Card -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">📦 Active Installation</h2>
            <span class="badge badge-success">Operational</span>
        </div>
        <div style="background: rgba(0,0,0,0.25); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
                <span style="color: var(--text-muted); font-size: 0.85rem;">Appliance Version:</span>
                <span style="font-weight: 700; color: #60a5fa; font-size: 1.1rem;">v{{ app_version }}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.75rem;">
                <span style="color: var(--text-muted); font-size: 0.85rem;">Last Updated:</span>
                <span style="font-size: 0.9rem;">{{ last_update_time or 'Initial Release' }}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.75rem;">
                <span style="color: var(--text-muted); font-size: 0.85rem;">Package Name:</span>
                <span style="font-size: 0.9rem;">{{ last_update_pkg or 'Base Virtual Machine Image' }}</span>
            </div>
            <div style="margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--card-border);">
                <span style="color: var(--text-muted); font-size: 0.85rem; display: block; margin-bottom: 0.35rem;">Changelog / Notes:</span>
                <span style="font-size: 0.88rem; color: #e2e8f0; font-style: italic;">
                    {{ last_update_desc or 'Initial installation with multi-protocol VPN, hostname & SSL configuration.' }}
                </span>
            </div>
        </div>

        <div style="background: rgba(255, 255, 255, 0.03); border: 1px solid var(--card-border); border-radius: 6px; padding: 0.85rem; font-size: 0.82rem; color: var(--text-muted);">
            💡 In-place updates apply only the modified code, templates, and migrations without requiring redeployment or reconfiguration of the underlying OS image.
        </div>
    </div>

    <!-- Versioning Policy Card -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">🏷️ Versioning Scheme (0.x.y)</h2>
        </div>
        <p style="color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1rem;">
            This appliance adheres to strict semantic versioning tailored for virtual appliances:
        </p>

        <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem;">
            <div style="display: flex; gap: 1rem; align-items: flex-start; background: rgba(0,0,0,0.2); padding: 0.75rem 1rem; border-radius: 6px;">
                <span class="badge" style="background: #3b82f6; color: #fff; font-size: 0.85rem; min-width: 50px; text-align: center;">0.x.0</span>
                <div>
                    <strong style="color: #fff; font-size: 0.9rem;">Major Changes & New Functions (x)</strong>
                    <div style="color: var(--text-muted); font-size: 0.82rem; margin-top: 0.2rem;">
                        Incremented when introducing new major capabilities, new VPN protocols, or significant administrative subsystem overhauls.
                    </div>
                </div>
            </div>

            <div style="display: flex; gap: 1rem; align-items: flex-start; background: rgba(0,0,0,0.2); padding: 0.75rem 1rem; border-radius: 6px;">
                <span class="badge" style="background: #10b981; color: #fff; font-size: 0.85rem; min-width: 50px; text-align: center;">0.x.y</span>
                <div>
                    <strong style="color: #fff; font-size: 0.9rem;">Minor Changes & Bug Fixes (y)</strong>
                    <div style="color: var(--text-muted); font-size: 0.82rem; margin-top: 0.2rem;">
                        Incremented for routine maintenance, bug fixes, UI improvements, and non-breaking security patches.
                    </div>
                </div>
            </div>
        </div>

        <div style="color: var(--text-muted); font-size: 0.82rem;">
            Package builds automatically enforce <code>0.x.y</code> compliance and verify SHA-256 integrity checksums prior to installation.
        </div>
    </div>
</div>

<!-- Upload In-Place Update Package with Interactive Dropzone -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">⬆️ Install In-Place Update Package</h2>
        <span style="font-size: 0.85rem; color: var(--text-muted);">Supports single-file <code>.tar.gz</code> update packages</span>
    </div>

    <form method="POST" action="/admin/updates/upload" enctype="multipart/form-data" id="updateForm">
        <div class="form-group">
            <label style="font-weight: 600; margin-bottom: 0.5rem; display: block;">Select or Drop Update Package</label>
            
            <!-- Dropzone Container -->
            <div id="pkg-dropzone" class="dropzone-area">
                <input type="file" id="package_file" name="package_file" accept=".tar.gz,.gz,.pkg,.update" class="dropzone-input" required onchange="handlePkgFileSelect(this)">
                
                <div class="dropzone-content" id="pkg-dropzone-content">
                    <div style="font-size: 2.5rem; margin-bottom: 0.6rem;">📦</div>
                    <div style="font-weight: 600; font-size: 1.05rem; color: #fff; margin-bottom: 0.35rem;">
                        Drag & Drop your update package here, or click to browse
                    </div>
                    <div style="font-size: 0.85rem; color: var(--text-muted);">
                        Supports verified single-file archives (<code>.tar.gz</code>, <code>.pkg</code>)
                    </div>
                </div>

                <!-- Selected File Preview Card -->
                <div id="pkg-file-preview" style="display: none; padding: 1.25rem;">
                    <div style="display: flex; justify-content: space-between; align-items: center; background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37, 99, 235, 0.3); padding: 1rem 1.25rem; border-radius: 8px;">
                        <div style="display: flex; align-items: center; gap: 1rem;">
                            <span style="font-size: 2rem;">📦</span>
                            <div>
                                <strong id="pkg-filename" style="color: #60a5fa; font-size: 1rem; display: block;"></strong>
                                <span id="pkg-filesize" style="font-size: 0.82rem; color: var(--text-muted);"></span>
                                <span class="badge badge-success" style="margin-left: 0.5rem; font-size: 0.72rem;">Ready to Install</span>
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary btn-sm" onclick="clearPkgFileSelection()">Change File</button>
                    </div>
                </div>
            </div>
            
            <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem;">
                Uploaded packages are verified for tamper-proofing (SHA-256) and validated against system version compatibility.
            </div>
        </div>

        <div class="form-group">
            <div class="checkbox-group">
                <input type="checkbox" id="create_backup" name="create_backup" value="1" checked>
                <label for="create_backup" style="margin-bottom: 0; cursor: pointer; color: #cbd5e1;">
                    Create automatic pre-update backup of current files before applying changes
                </label>
            </div>
        </div>

        <div style="display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem;">
            <button type="submit" id="submitBtn" class="btn btn-primary" onclick="return confirm('Install update package now? The web portal service will automatically reload with the new version.');">
                🚀 Upload & Install Update Package
            </button>
        </div>
    </form>
</div>

<!-- Rollback & Backups Management -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">🛡️ Available Application Backups & Rollback Points</h2>
        <a href="/admin/updates/backup/now" class="btn btn-secondary btn-sm" onclick="return confirm('Create an immediate snapshot backup of current application files?');">
            💾 Create Manual Application Snapshot
        </a>
    </div>

    {% if backups %}
        <table>
            <thead>
                <tr>
                    <th>Backup Archive</th>
                    <th>Created Timestamp</th>
                    <th>File Size</th>
                    <th style="text-align: right;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for b in backups %}
                <tr>
                    <td>
                        <strong style="color: #60a5fa;">{{ b.filename }}</strong>
                    </td>
                    <td>{{ b.created_at }}</td>
                    <td>{{ b.size_kb }} KB</td>
                    <td style="text-align: right;">
                        <a href="/admin/updates/rollback/{{ b.filename }}" class="btn btn-danger btn-sm"
                           onclick="return confirm('Are you sure you want to rollback to {{ b.filename }}? Current application files will be replaced and the service restarted.');">
                            ↩️ Rollback
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p style="color: var(--text-muted); font-size: 0.9rem; text-align: center; padding: 2rem 0;">
            No rollback backups available yet. An automatic backup will be created whenever an update package is installed.
        </p>
    {% endif %}
</div>

<!-- Package Creation Guide for Administrators -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">🛠️ Administrator Package Builder Reference</h2>
    </div>
    <p style="color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1rem;">
        Administrators and developers can produce single-file update packages using the bundled CLI utility:
    </p>

    <pre class="code-block"># Build a Minor Bug Fix Update (increments y):
python3 /opt/vpn-portal/scripts/build_update_package.py \
  --version 0.2.1 \
  --description "Fix DNS configuration bug and optimize WireGuard handshake" \
  --output /root/vpn-update-0.2.1.tar.gz

# Build a Major Feature Update (increments x):
python3 /opt/vpn-portal/scripts/build_update_package.py \
  --version 0.3.0 \
  --description "Add multi-factor authentication support" \
  --output /root/vpn-update-0.3.0.tar.gz</pre>
</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.08);
}
.dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}
.dropzone-content {
    padding: 2.5rem 1.5rem;
    text-align: center;
    pointer-events: none;
}
</style>

<script>
const pkgDropzone = document.getElementById('pkg-dropzone');

['dragenter', 'dragover'].forEach(eventName => {
    pkgDropzone.addEventListener(eventName, (e) => {
        e.preventDefault();
        e.stopPropagation();
        pkgDropzone.classList.add('dragover');
    }, false);
});

['dragleave', 'drop'].forEach(eventName => {
    pkgDropzone.addEventListener(eventName, (e) => {
        e.preventDefault();
        e.stopPropagation();
        pkgDropzone.classList.remove('dragover');
    }, false);
});

function handlePkgFileSelect(input) {
    if (input.files && input.files[0]) {
        const file = input.files[0];
        document.getElementById('pkg-dropzone-content').style.display = 'none';
        document.getElementById('pkg-file-preview').style.display = 'block';
        document.getElementById('pkg-filename').textContent = file.name;
        document.getElementById('pkg-filesize').textContent = (file.size / 1024).toFixed(1) + ' KB';
    }
}

function clearPkgFileSelection() {
    document.getElementById('package_file').value = '';
    document.getElementById('pkg-dropzone-content').style.display = 'block';
    document.getElementById('pkg-file-preview').style.display = 'none';
}
</script>
{% endblock %}