import { h, PageHeader, Tabs, esc, definePage, renderGuard, modelFetch, getModel } from '/static/hoover/index.js?v=7';

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({
    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) =>
            h('div', { class: 'log-line', key: i }, esc(line))
        );

        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' }),
            h('div', { class: 'card', key: 'log-card' },
                tabsBody,
                h('div', { class: 'card-header' },
                    h('span', null, tab.label),
                    h('button', {
                        class: 'btn btn-sm btn-outline',
                        style: 'float:right;',
                        'on:click': () => modelFetch('logs', state.activeTab),
                     }, '\u21BB'),
                ),
                h('div', { class: 'card-body log-body' },
                    h('pre', null, lineVnodes),
                ),
            ),
        ];
    },
});