{% extends "base.html" %}
{% block title %}System - ESPILON{% endblock %}

{% block content %}
<div class="page" x-data="systemApp()" x-init="init()">
    <div class="split-h" style="flex:1;">

        <!-- Left: Device selector + info -->
        <div class="panel" style="width:400px;min-width:300px;">
            <div class="panel-header"><span>System Info</span></div>
            <div class="panel-body panel-body-pad" style="overflow-y:auto;">
                <div class="form-group">
                    <label>Device</label>
                    <select class="select w-full" x-model="device" @change="refresh()">
                        <option value="">select device...</option>
                        <template x-for="d in $store.app.connectedDevices()" :key="d.id">
                            <option :value="d.id" x-text="d.id"></option>
                        </template>
                    </select>
                </div>

                <div class="flex gap-2" style="margin-bottom:12px;">
                    <button class="btn btn-sm" @click="run('system_info')">Info</button>
                    <button class="btn btn-sm" @click="run('system_mem')">Memory</button>
                    <button class="btn btn-sm" @click="run('system_uptime')">Uptime</button>
                    <button class="btn btn-sm btn-danger" @click="confirmReboot()">Reboot</button>
                </div>

                <!-- Device KV from API -->
                <template x-if="dev.id">
                    <div>
                        <div class="toolbar-label" style="margin-bottom:6px;">Connection Info</div>
                        <div class="kv">
                            <div class="kv-row"><span class="kv-key">ID</span><span class="kv-val" x-text="dev.id"></span></div>
                            <div class="kv-row"><span class="kv-key">Status</span><span class="kv-val" x-text="dev.status"></span></div>
                            <div class="kv-row"><span class="kv-key">IP</span><span class="kv-val" x-text="dev.ip + ':' + dev.port"></span></div>
                            <div class="kv-row"><span class="kv-key">Chip</span><span class="kv-val" x-text="dev.chip || '-'"></span></div>
                            <div class="kv-row"><span class="kv-key">Modules</span><span class="kv-val" x-text="dev.modules || '-'"></span></div>
                            <div class="kv-row"><span class="kv-key">Uptime</span><span class="kv-val" x-text="formatDuration(dev.connected_for_seconds)"></span></div>
                            <div class="kv-row"><span class="kv-key">Last Seen</span><span class="kv-val" x-text="formatDuration(dev.last_seen_ago_seconds) + ' ago'"></span></div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <div class="resizer"></div>

        <!-- Right: Command output -->
        <div class="panel flex-1">
            <div class="panel-header">
                <span>Output</span>
                <button class="btn btn-sm" @click="outputLines = []">Clear</button>
            </div>
            <div class="term-output" style="flex:1;">
                <template x-for="(l, i) in outputLines" :key="i">
                    <div class="term-line" :class="l.cls || ''" x-html="l.html"></div>
                </template>
                <template x-if="outputLines.length === 0">
                    <div class="term-line term-system">Select a device and run a system command.</div>
                </template>
            </div>
        </div>
    </div>

    <!-- Reboot Modal -->
    <template x-if="showRebootModal">
        <div class="modal-overlay" @click.self="showRebootModal = false">
            <div class="modal-box">
                <h3>Confirm Reboot</h3>
                <p class="text-secondary text-sm" style="margin:8px 0;">Reboot device <strong x-text="device"></strong>?</p>
                <div class="modal-actions">
                    <button class="btn" @click="showRebootModal = false">Cancel</button>
                    <button class="btn btn-danger" @click="doReboot()">Reboot</button>
                </div>
            </div>
        </div>
    </template>
</div>
{% endblock %}

{% block scripts %}
<script>
function systemApp() {
    return {
        ...commander(),
        device: '', dev: {}, outputLines: [],
        showRebootModal: false,

        init() {},

        async refresh() {
            if (!this.device) { this.dev = {}; return; }
            try {
                const res = await fetch('/api/devices');
                const data = await res.json();
                this.dev = (data.devices || []).find(d => d.id === this.device) || {};
            } catch (e) {}
        },

        confirmReboot() {
            if (!this.device) { toast('Select a device', 'error'); return; }
            this.showRebootModal = true;
        },

        async doReboot() {
            this.showRebootModal = false;
            await this.run('system_reboot');
        },

        async run(command, argv) {
            if (!this.device) { toast('Select a device', 'error'); return; }
            argv = (argv || []).filter(Boolean);
            this.outputLines.push({ html: '<span class="term-cmd">' + escapeHtml(command) + '</span>' });
            try {
                const data = await this.sendCommand([this.device], command, argv);
                const r = (data.results || [])[0];
                if (r && r.status === 'ok' && r.request_id) {
                    const pendingIdx = this.outputLines.length;
                    this.outputLines.push({ html: '<span class="term-pending">pending...</span>' });
                    let attempts = 0;
                    const iv = setInterval(async () => {
                        attempts++;
                        try {
                            const res = await fetch('/api/commands/' + encodeURIComponent(r.request_id));
                            const d = await res.json();
                            if (d.status === 'completed' || d.status === 'error' || attempts >= 60) {
                                clearInterval(iv);
                                this.outputLines.splice(pendingIdx, 1);
                                if (d.output && d.output.length) d.output.forEach(l => this.outputLines.push({ html: escapeHtml(l) }));
                                else this.outputLines.push({ html: '<span class="term-success">OK</span>' });
                            }
                        } catch (e) {}
                    }, 500);
                } else if (r) {
                    this.outputLines.push({ html: '<span class="term-error">' + escapeHtml(r.message || 'Error') + '</span>' });
                }
            } catch (e) {
                this.outputLines.push({ html: '<span class="term-error">' + escapeHtml(e.message) + '</span>' });
            }
        }
    };
}
</script>
{% endblock %}