{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}Admin · System{% endblock %}
{% block content %}
    {{ page_header('Admin', tabs=tabs, active_tab='system') }}

    <div class="max-w-2xl rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6"
         x-data="systemUpdate('{{ app_version }}')">
        <h2 class="text-base font-semibold">Software update</h2>
        <p class="mt-1 text-sm text-slate-500">
            Updates are downloaded and applied on the unit. It restarts the
            console when it applies one, and rolls back automatically if the
            new version fails its health check.
        </p>

        <dl class="mt-5 space-y-2 text-sm">
            <div class="flex items-center justify-between">
                <dt class="text-slate-500">Running version</dt>
                <dd class="font-mono text-xs select-all">{{ app_version }}</dd>
            </div>
            {% if app_build_date %}
            <div class="flex items-center justify-between">
                <dt class="text-slate-500">Built</dt>
                <dd class="font-mono text-xs tnum">{{ app_build_date }}</dd>
            </div>
            {% endif %}
            <div class="flex items-center justify-between">
                <dt class="text-slate-500">Release channel</dt>
                <dd class="font-mono text-xs">{{ channel }}</dd>
            </div>
            <div class="flex items-center justify-between">
                <dt class="text-slate-500">Automatic updates</dt>
                <dd class="font-mono text-xs">nightly ~03:00</dd>
            </div>
        </dl>

        <div class="mt-6 flex items-center gap-3">
            <button @click="check()" :disabled="busy || updating"
                    class="inline-flex items-center gap-2 btn-primary px-4 py-2 rounded-md text-sm font-medium disabled:opacity-50">
                <span x-text="busy ? 'Checking…' : 'Check for updates'"></span>
            </button>
            <button x-show="status === 'update_available' && !updating" x-cloak
                    @click="apply()"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800">
                Update now
            </button>
        </div>

        <p class="mt-4 text-sm font-mono" x-show="message" x-cloak
           :class="status === 'error' ? 'text-[color:var(--bad)]' : 'text-slate-500'"
           x-text="message"></p>
    </div>

{% endblock %}

{% block scripts %}
<script>
function systemUpdate(currentVersion) {
    return {
        busy: false, updating: false, status: null, message: '',

        async check() {
            this.busy = true;
            this.status = null;
            this.message = '';
            try {
                const r = await fetch('/api/admin/update/check', {
                    method: 'POST',
                    headers: { 'X-CSRF-Token': getCookie('cm_csrf') || '' },
                });
                const j = await r.json();
                this.status = j.status;
                if (j.status === 'up_to_date') {
                    this.message = 'Up to date — ' + j.current;
                } else if (j.status === 'update_available') {
                    this.message = 'Update available: ' + j.current + ' → ' + j.target;
                } else {
                    this.message = 'Check failed: ' + (j.output || 'unknown error');
                }
            } catch (e) {
                this.status = 'error';
                this.message = 'Check failed: ' + e;
            }
            this.busy = false;
        },

        async apply() {
            if (!confirm('Install the update now? The console restarts and live terminal sessions disconnect.')) return;
            this.updating = true;
            this.message = 'Updating — the console is restarting, this page will reload…';
            try {
                const r = await fetch('/api/admin/update/apply', {
                    method: 'POST',
                    headers: { 'X-CSRF-Token': getCookie('cm_csrf') || '' },
                });
                const j = await r.json();
                if (!j.started) throw new Error(j.error || 'could not start the updater');
                if (j.demo) {
                    this.message = 'Demo mode — no real update was performed.';
                    this.updating = false;
                    return;
                }
            } catch (e) {
                this.status = 'error';
                this.message = 'Update failed to start: ' + e;
                this.updating = false;
                return;
            }
            // Poll until the app answers with a different version, then reload.
            const poll = setInterval(async () => {
                try {
                    const r = await fetch('/api/version', { cache: 'no-store' });
                    const j = await r.json();
                    if (j.version && j.version !== currentVersion) {
                        clearInterval(poll);
                        location.reload();
                    }
                } catch (e) { /* still restarting */ }
            }, 2000);
            setTimeout(() => {
                clearInterval(poll);
                if (this.updating) {
                    this.message = 'Still waiting for the new version — refresh the page, or check the System Log.';
                }
            }, 120000);
        },
    };
}

</script>
{% endblock %}