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

export default function UsageSection() {
    const [usage, setUsage] = useState(null);
    const [pricing, setPricing] = useState([]);
    const [loading, setLoading] = useState(true);

    const load = useCallback(async () => {
        try {
            const [u, p] = await Promise.all([
                sw.api.admin.usage.get(),
                sw.api.admin.pricing.list().catch(() => []),
            ]);
            setUsage(u);
            setPricing(p || []);
        } catch (e) { sw.toast(e.message, 'error'); }
        finally { setLoading(false); }
    }, []);

    useEffect(() => { load(); }, []);

    async function deletePricing(provId, modelId) {
        try {
            await sw.api.admin.pricing.del(provId, modelId);
            sw.toast('Pricing entry removed', 'success');
            load();
        } catch (e) { sw.toast(e.message, 'error'); }
    }

    function fmtNum(n) {
        if (n == null) return '\u2014';
        return n.toLocaleString();
    }

    if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;

    return html`
        <div>
            ${usage?.totals && html`
                <div class="stat-cards-grid" style="margin-bottom:16px;">
                    <div class="stat-card"><div class="stat-value">${fmtNum(usage.totals.total_tokens)}</div><div class="stat-label">Total Tokens</div></div>
                    <div class="stat-card"><div class="stat-value">${fmtNum(usage.totals.total_requests)}</div><div class="stat-label">Total Requests</div></div>
                    <div class="stat-card"><div class="stat-value">$${(usage.totals.total_cost || 0).toFixed(2)}</div><div class="stat-label">Total Cost</div></div>
                </div>
            `}

            ${usage?.results && usage.results.length > 0 && html`
                <h4 style="margin:16px 0 8px;">Usage by Day</h4>
                <div class="admin-list">
                    ${usage.results.map((r, i) => html`
                        <div class="admin-surface-row" key=${i}>
                            <span style="width:100px;">${r.date || r.day || '\u2014'}</span>
                            <span style="flex:1;">${fmtNum(r.tokens)} tokens</span>
                            <span class="text-muted" style="font-size:12px;">${r.requests || 0} requests</span>
                            <span class="text-muted" style="font-size:12px;">$${(r.cost || 0).toFixed(2)}</span>
                        </div>
                    `)}
                </div>
            `}

            <h4 style="margin:24px 0 8px;">Pricing Table</h4>
            ${pricing.length === 0
                ? html`<div class="empty-hint">No custom pricing entries</div>`
                : html`
                    <div class="admin-list">
                        <div class="admin-surface-row" style="font-weight:600;font-size:12px;">
                            <span style="flex:1;">Model</span>
                            <span style="width:100px;">Input/M</span>
                            <span style="width:100px;">Output/M</span>
                            <span style="width:80px;">Currency</span>
                            <span style="width:60px;"></span>
                        </div>
                        ${pricing.map(p => html`
                            <div class="admin-surface-row" key=${p.model_id + p.provider_config_id}>
                                <span style="flex:1;">${p.model_id}</span>
                                <span style="width:100px;">$${(p.input_per_m || 0).toFixed(2)}</span>
                                <span style="width:100px;">$${(p.output_per_m || 0).toFixed(2)}</span>
                                <span style="width:80px;">${p.currency || 'USD'}</span>
                                <button class="btn-small btn-danger" style="width:60px;" onClick=${() => deletePricing(p.provider_config_id, p.model_id)}>Del</button>
                            </div>
                        `)}
                    </div>
                `
            }
        </div>
    `;
}
