import { html, PageHeader, Tabs, esc, definePage, renderGuard, modelFetch, getModel } from '/static/hoover/index.js';

const logTabs = [
    { key: 'journal', label: 'Journal' },
    { key: 'nginx-access', label: 'Nginx Access' },
    { key: 'nginx-error', label: 'Nginx Error' },
    { key: 'dnsmasq', label: 'Dnsmasq' },
    { key: 'app', label: 'App' },
];

export default definePage({
    title: 'Logs - Vacuum Wall',
    init() {
        return {
            logs: getModel('logs'),
            activeTab: 'journal',
        };
    },
    render(state) {
        const logData = state.logs.data;
        const stale = logData?.tab !== state.activeTab;
        const guard = renderGuard(state.logs, 'Logs', 'System and service logs', stale ? undefined : logData?.data);
        if (guard) return guard;

        const lines = logData.data || [];
        const tab = logTabs.find(t => t.key === state.activeTab) || logTabs[0];
        const lineVnodes = lines.map((line, i) =>
            html`<div class="log-line" key=${i}>${esc(line)}</div>`
        );

        const tabsBody = Tabs({
            state,
            tabs: logTabs.map(t => t.key),
            formatLabel: (k) => {
                const t = logTabs.find(t => t.key === k);
                return t ? t.label : k.charAt(0).toUpperCase() + k.slice(1);
            },
            onTabClick: (key) => modelFetch('logs', key),
        });

        return [
            PageHeader({ title: 'Logs', subtitle: 'System and service logs' }),
            html`<div class="card" key="log-card">
                ${tabsBody}
                <div class="card-header">
                    <span>${tab.label}</span>
                    <button class="btn btn-sm btn-outline" style="float:right"
                        onClick=${() => modelFetch('logs', state.activeTab)}>\u21BB</button>
                </div>
                <div class="card-body log-body">
                    <pre>${lineVnodes}</pre>
                </div>
            </div>`,
        ];
    },
});