// UI mode: cockpit (level 6). Eight live panes straight from /sys/ + real commands.
class UICockpitMode {
    constructor() { this.commands = {}; this.terminal = null; }
    requirements() { return { met: true, missing: [] }; }
    getHelpInfo() { return {}; }
    registerCommands() {}
    init(terminal) {
        this.terminal = terminal;
        if (!terminal.uiShell) return;
        terminal.uiShell.registerMode({
            id: 'cockpit', label: 'Cockpit', level: 6, icon: '🛰',
            tagline: 'Live system telemetry.',
            mount: (api) => this.mount(api)
        });
    }
    mount(api) {
        api.injectCSS('cockpit', `
body[data-ui-mode="cockpit"] { font-size: 13px; }
body[data-ui-mode="cockpit"] #ui-root { display: grid; grid-template-rows: 1fr 190px; min-height: 0; }
#ck-panes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--border-color); min-height: 0; overflow-y: auto; }
#ck-panes .pane { background: var(--bg-color); display: flex; flex-direction: column;
  min-height: 130px; min-width: 0; transition: outline-color .2s; }
#ck-panes .pane h5 { margin: 0; padding: 5px 8px; font-size: .72em; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-color);
  display: flex; gap: 8px; align-items: center; }
#ck-panes .pane h5 .n { margin-left: auto; color: var(--accent-color); }
#ck-panes pre { flex: 1 1 auto; margin: 0; padding: 6px 8px; overflow: auto; white-space: pre-wrap;
  word-break: break-word; font-family: var(--font-primary); font-size: .72em; line-height: 1.35; }
#ck-term { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--border-color); }
#ck-term-bar { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; padding: 4px 8px;
  background: var(--bg-secondary); font-size: .78em; }
#ck-term-bar .title { flex: 1 1 auto; color: var(--text-muted); }
#ck-out { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 8px; font-size: .82em; }
#ck-in { flex: 0 0 auto; padding: 4px 8px 8px; }
#ck-in #input-area { display: flex; gap: 6px; align-items: flex-end; }
#ck-in .prompt-label, #ck-in #autocomplete-dropdown { display: none; }
#ck-in #command-input { width: 100%; font-family: var(--font-primary); font-size: .85em; }
@media (max-width: 900px) {
  body[data-ui-mode="cockpit"] #ui-root { grid-template-rows: 1fr 44vh; }
  #ck-panes { grid-template-columns: 1fr 1fr; }
}
`);

        const root = api.root;
        root.innerHTML = '';
        const panes = api.el('div', { id: 'ck-panes' });
        const termWrap = api.el('div', { id: 'ck-term' });
        root.appendChild(panes); root.appendChild(termWrap);

        const defs = [
            { id: 'heap', label: 'heap', cmd: 'cat /sys/heap/stats' },
            { id: 'breakdown', label: 'breakdown', cmd: 'cat /sys/heap/breakdown' },
            { id: 'vfs', label: 'vfs', cmd: 'cat /sys/vfs/stats' },
            { id: 'tools', label: 'tool calls', cmd: 'cat /sys/logs/tool-calls' },
            { id: 'errors', label: 'errors', cmd: 'cat /sys/logs/errors' },
            { id: 'dom', label: 'dom', cmd: 'cat /sys/dom/node-count' },
            { id: 'agents', label: 'agents', cmd: 'agent-list' },
            { id: 'leases', label: 'leases', cmd: 'lease-list' }
        ];
        const slots = {};
        defs.forEach((d, i) => {
            const pane = api.el('div', { class: 'pane' });
            pane.dataset.pane = String(i + 1);
            const h = api.el('h5');
            h.appendChild(api.el('span', { text: 'F' + (i + 1) + ' ' + d.label }));
            h.appendChild(api.el('span', { class: 'n' }));
            const pre = api.el('pre', { text: '…' });
            pane.appendChild(h); pane.appendChild(pre);
            slots[d.id] = { pre, n: h.querySelector('.n') };
            panes.appendChild(pane);
        });

        const bar = api.el('div', { id: 'ck-term-bar' });
        bar.appendChild(api.el('span', { class: 'title', text: 'terminal · F1-F8 focus · F5 refresh' }));
        const styleBtn = api.el('button', { class: 'wx11-btn', text: '⇄' });
        styleBtn.addEventListener('click', () => api.exec('ui picker'));
        bar.appendChild(styleBtn);
        const out = api.el('div', { id: 'ck-out' });
        const inp = api.el('div', { id: 'ck-in' });
        termWrap.appendChild(bar); termWrap.appendChild(out); termWrap.appendChild(inp);
        api.attach(out, api.stock.output);
        api.attach(inp, api.stock.input);

        // Generation guard: eight async captures per tick at 5s — a tick can outlive teardown.
        let gen = 0;
        const refresh = async () => {
            const my = ++gen;
            for (const d of defs) {
                try {
                    const text = await api.capture(d.cmd);
                    if (my !== gen) return;
                    const lines = (text || '').trim() ? String(text).trim().split('\n') : ['(empty)'];
                    slots[d.id].pre.textContent = lines.join('\n');
                    slots[d.id].n.textContent = lines.length + 'L';
                } catch (e) {
                    if (my !== gen) return;
                    slots[d.id].pre.textContent = 'unavailable: ' + e.message;
                    slots[d.id].n.textContent = 'ERR';
                }
            }
        };
        refresh();
        const timer = api.interval(refresh, 5000);

        const onKey = (ev) => {
            const m = /^F([1-8])$/.exec(String(ev.key));
            if (!m) return;
            ev.preventDefault();
            const idx = parseInt(m[1], 10);
            if (idx === 5) { refresh(); return; }              // F5 = refresh, as labelled
            const pane = panes.querySelector('[data-pane="' + idx + '"]');
            if (!pane) return;
            pane.scrollIntoView({ block: 'nearest' });
            pane.style.outline = '1px solid var(--accent-color)';
            setTimeout(() => { pane.style.outline = ''; }, 900);
        };
        document.addEventListener('keydown', onKey);

        return () => { gen++; document.removeEventListener('keydown', onKey); api.clearInterval(timer); };
    }
}