// retoor <retoor@molodetz.nl>

import { Http } from "./Http.js";
import { DateFormat } from "./DateFormat.js";

class UserAiUsage {
    constructor() {
        this.card = document.querySelector("[data-ai-usage]");
        if (!this.card) return;
        this.uid = this.card.dataset.uid || "";
        this.body = this.card.querySelector("[data-ai-usage-body]");
        this.updated = this.card.querySelector("[data-ai-usage-updated]");
        this.load();
    }

    async load() {
        if (!this.uid) return;
        try {
            const data = await Http.getJson(`/admin/users/${this.uid}/ai-usage?hours=24`);
            this.render(data);
        } catch {
            this.body.innerHTML = '<p class="ai-usage-empty">Usage unavailable.</p>';
        }
    }

    render(data) {
        if (!data || !data.requests) {
            this.body.innerHTML = '<p class="ai-usage-empty">No AI usage in the last 24 hours.</p>';
            if (this.updated) this.updated.textContent = "";
            return;
        }
        const cost = data.cost || {};
        const tokens = data.tokens || {};
        const latency = data.latency || {};
        const cards = [
            ["API requests", String(data.requests)],
            ["Success", `${data.success_pct}%`],
            ["Errors", `${data.error_pct}%`],
            ["Cost 24h", this.money(cost.window_usd)],
            ["Projected 30d", this.money(cost.projected_30d_usd)],
            ["Cost / request", this.money(cost.per_request_usd)],
            ["Cost / hour", this.money(cost.per_hour_usd)],
            ["Total tokens", this.count(tokens.total)],
            ["Prompt tokens", this.count(tokens.prompt)],
            ["Completion tokens", this.count(tokens.completion)],
            ["Avg latency", `${Math.round(latency.avg_ms || 0)} ms`],
            ["Avg tokens/s", String(latency.avg_tps || 0)],
        ];
        const grid = cards
            .map(([label, value]) => `<div class="ai-usage-stat"><span class="ai-usage-value">${value}</span><span class="ai-usage-label">${label}</span></div>`)
            .join("");
        const models = (data.by_model || [])
            .map((m) => `<tr><td>${this.escape(m.key)}</td><td>${m.requests}</td><td>${this.count(m.total_tokens)}</td><td>${this.money(m.cost_usd)}</td></tr>`)
            .join("");
        const modelTable = models
            ? `<table class="ai-usage-table"><thead><tr><th>Model</th><th>Requests</th><th>Tokens</th><th>Cost</th></tr></thead><tbody>${models}</tbody></table>`
            : "";
        this.body.innerHTML = `<div class="ai-usage-grid">${grid}</div>${this.spark(data.hourly)}${modelTable}`;
        if (this.updated) {
            this.updated.textContent = `last used ${this.when(data.last_used)}`;
        }
    }

    spark(hourly) {
        const rows = hourly || [];
        if (!rows.length) return "";
        const peak = Math.max(...rows.map((h) => h.cost_usd || 0)) || 1;
        const bars = rows
            .map((h) => {
                const height = Math.max(2, Math.round((h.cost_usd || 0) / peak * 100));
                return `<span class="ai-usage-bar" style="height:${height}%" title="${h.hour}: ${this.money(h.cost_usd)} / ${h.requests} req"></span>`;
            })
            .join("");
        return `<div class="ai-usage-spark-wrap"><span class="ai-usage-spark-label">Cost per hour</span><div class="ai-usage-spark">${bars}</div></div>`;
    }

    money(value) {
        const amount = Number(value || 0);
        if (amount > 0 && amount < 0.0001) return "<$0.0001";
        return `$${amount.toFixed(4)}`;
    }

    count(value) {
        return Number(value || 0).toLocaleString();
    }

    when(value) {
        return DateFormat.format(value, true);
    }

    escape(text) {
        const div = document.createElement("div");
        div.textContent = String(text == null ? "" : text);
        return div.innerHTML;
    }
}

window.UserAiUsage = UserAiUsage;
export { UserAiUsage };
