import { html, PageHeader, definePage, getModel, renderGuard, ServiceStatus, StatCard } from '/static/hoover/index.js?v=7';

export default definePage({
    init() {
        return {
            status: getModel('status'),
        };
    },
    render(state) {
        const guard = renderGuard(state.status, 'Dashboard', 'System overview', state.status.data);
        if (guard) return guard;

        const d = state.status.data;
        const fwZones = (d.firewall?.zones) || {};
        const net = d.net || {};
        const nCount = Object.keys(net).length;
        const upI = Object.values(net).filter(i => i.state === 'up');
        const upC = upI.length;
        const certs = d.certs || [];
        const certW = certs.filter(c => c.expired || c.days_remaining <= 30);
        const dmsk = d.dnsmasq?.status || {};
        const wP = (d.wg || {}).peers || [];

        const stats = html`<div class="grid grid-4">
            <${StatCard} label="Active Zones" value=${Object.keys(fwZones).length}
                meta=${Object.keys(fwZones).join(', ') || 'None'} />
            <${StatCard} label="Interfaces Up" value=${upC + '/' + nCount}
                meta=${upI.map(i => i.name).join(', ') || 'None up'} />
            <${StatCard} label="WireGuard" value=${String((d.wg?.status?.up) ? 'up' : 'down')}
                meta=${wP.length + ' peers'} />
            <${StatCard} label="Certificates" value=${certs.length}
                meta=${certW.length + ' expiring/expired'} />
        </div>`;

        const services = html`<div class="grid grid-2">
            <div class="card">
                <div class="card-header">Services</div>
                <div class="card-body">
                    <ul class="service-list">
                        <li><${ServiceStatus} state=${dmsk.service_active ? 'up' : 'down'} label="Dnsmasq" /></li>
                        <li><${ServiceStatus} state=${(d.wg?.status?.up) ? 'up' : 'down'} label="WireGuard" /></li>
                    </ul>
                </div>
            </div>
        </div>`;

        return [
            PageHeader({ title: 'Dashboard', subtitle: 'System overview' }),
            stats,
            services,
        ];
    },
});