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

    {# Same card shell as the Software update card on the System tab: max-w-2xl, explicit border and
       background, <h2> heading, mt-1 lead, mt-6 button row, mt-4 message. #}
    <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='servicePanel({{ services | tojson }})'>
        <h2 class="text-base font-semibold">Services</h2>
        <p class="mt-1 text-sm text-slate-500">
            Background features of this unit. Restart one if it stops behaving;
            whether each runs at all is set where the feature itself is configured.
        </p>

        <dl class="mt-5 space-y-3 text-sm">
            <template x-for="svc in services" :key="svc.key">
                <div>
                    <div class="flex items-center justify-between gap-4">
                        <dt class="flex items-center gap-2 min-w-0">
                            <span class="h-1.5 w-1.5 rounded-full shrink-0"
                                  :class="svc.active === 'active' ? 'bg-emerald-500 dot-live text-emerald-500' : 'bg-slate-400'"></span>
                            <span class="text-slate-500" x-text="svc.label"></span>
                        </dt>
                        <dd class="font-mono text-xs shrink-0" x-text="svc.state_label"></dd>
                    </div>
                    <div class="mt-1 flex items-center justify-between gap-3">
                        <p class="text-xs text-slate-400" x-text="svc.help"></p>
                        <div class="flex items-center gap-2 shrink-0">
                            <button type="button" @click="act(svc.key, 'restart')"
                                    :disabled="busy || !svc.installed"
                                    :title="svc.installed ? '' : 'Not available on this unit'"
                                    class="px-2.5 py-1 rounded-md text-xs font-medium border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-50">Restart</button>
                        </div>
                    </div>
                </div>
            </template>
        </dl>

        <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>

    <div class="max-w-2xl rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 mt-6"
         x-data="rebootPanel()">
        <h2 class="text-base font-semibold">Restart unit</h2>
        <p class="mt-1 text-sm text-slate-500">
            Every console session drops, and the unit is off the network for a few
            minutes while it starts back up.
        </p>

        <div class="mt-6 flex items-center gap-3">
            <button @click="reboot()" :disabled="busy"
                    class="inline-flex items-center gap-2 btn-primary px-4 py-2 rounded-md text-sm font-medium disabled:opacity-50">
                Restart 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 servicePanel(initial) {
    return {
        services: initial,
        busy: false,
        status: null,
        message: '',

        async act(key, action) {
            // Stopping the console server or the web UI is not obviously
            // recoverable from a browser, so make the caller mean it.
            const risky = { stop: true, disable: true };
            const name = (this.services.find(s => s.key === key) || {}).label || key;
            if (risky[action] && !confirm(`${action} ${name}?`)) return;
            this.busy = true; this.status = null; this.message = '';
            try {
                const r = await fetch('/api/admin/service', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json',
                               'X-CSRF-Token': getCookie('cm_csrf') || '' },
                    body: JSON.stringify({ key, action }),
                });
                const j = await r.json();
                if (!r.ok || !j.ok) {
                    this.status = 'error';
                    this.message = `${name}: ${action} failed`;
                } else {
                    this.status = 'ok';
                    this.message = `${name}: ${action} ok`;
                    if (j.services) this.services = j.services;
                }
            } catch (e) {
                // Restarting the web UI drops this very request; that is
                // expected rather than a failure.
                this.status = 'ok';
                this.message = `${name}: ${action} issued`;
            }
            this.busy = false;
            if (key !== 'web') this.refresh();
        },

        async refresh() {
            try {
                const r = await fetch('/api/admin/services', { cache: 'no-store' });
                const j = await r.json();
                if (j.services) this.services = j.services;
            } catch (e) { /* leave the last known state on screen */ }
        },

    };
}

function rebootPanel() {
    return {
        busy: false, status: null, message: '',
        async reboot() {
            if (!confirm('Restart the unit now?\n\nEvery console session drops and the '
                         + 'unit is off the network for a few minutes.')) return;
            this.busy = true; this.status = null;
            this.message = 'Restarting — this page will stop responding.';
            try {
                await fetch('/api/admin/reboot', {
                    method: 'POST',
                    headers: { 'X-CSRF-Token': getCookie('cm_csrf') || '' },
                });
            } catch (e) { /* the unit going away mid-request is the success case */ }
            this.busy = false;
        },
    };
}
</script>
{% endblock %}