/**
 * Admin > Monitoring > Stats
 */
const { html } = window;
const { useState, useEffect } = hooks;

export default function StatsSection() {
    const [stats, setStats] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        sw.api.admin.stats()
            .then(d => setStats(d))
            .catch(e => sw.toast(e.message, 'error'))
            .finally(() => setLoading(false));
    }, []);

    if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
    if (!stats) return html`<div class="empty-hint">No stats available</div>`;

    const cards = [
        { label: 'Users', value: stats.users },
        { label: 'Channels', value: stats.channels },
        { label: 'Messages', value: stats.messages },
        { label: 'Models', value: stats.models },
        { label: 'Providers', value: stats.providers },
        { label: 'Personas', value: stats.personas },
    ];

    return html`
        <div class="stat-cards-grid">
            ${cards.map(c => html`
                <div class="stat-card" key=${c.label}>
                    <div class="stat-value">${c.value != null ? c.value.toLocaleString() : '\u2014'}</div>
                    <div class="stat-label">${c.label}</div>
                </div>
            `)}
        </div>
    `;
}