{% extends "base.html" %}
{% block title %}Usage{% endblock %}
{% block content %}

<h1>Usage</h1>
<p class="subtitle">Token consumption and cost broken down by provider and model.</p>

<div class="card card-gap-lg">
    <h2>Summary</h2>
    <div id="usage-summary" class="mt-md">
        <p class="text-small">Loading...</p>
    </div>
</div>

<div class="grid-2">
    <div class="card">
        <h2>By Provider</h2>
        <div id="usage-by-provider">
            <p class="text-small">Loading...</p>
        </div>
    </div>
    <div class="card">
        <h2>By Model</h2>
        <div id="usage-by-model">
            <p class="text-small">Loading...</p>
        </div>
    </div>
</div>

<script>
async function loadUsage() {
    const key = sessionStorage.getItem('phi_api_key');
    if (!key) {
        document.querySelectorAll('[id^="usage-"]').forEach(el =>
            el.innerHTML = '<p class="text-small">Set your API key to view usage.</p>');
        return;
    }
    try {
        const resp = await fetch('/v1/usage', { headers: { 'Authorization': `Bearer ${key}` }});
        const data = await resp.json();

        document.getElementById('usage-summary').innerHTML = `
            <div class="stat-grid" style="margin-bottom:0;">
                <div class="stat"><div class="val">${(data.total_requests || 0).toLocaleString()}</div><div class="lbl">Requests</div></div>
                <div class="stat"><div class="val">${(data.total_input_tokens || 0).toLocaleString()}</div><div class="lbl">Input Tokens</div></div>
                <div class="stat"><div class="val">${(data.total_output_tokens || 0).toLocaleString()}</div><div class="lbl">Output Tokens</div></div>
                <div class="stat"><div class="val">$${(data.total_cost_usd || 0).toFixed(4)}</div><div class="lbl">Total Cost</div></div>
            </div>`;

        const byProvider = data.by_provider || [];
        document.getElementById('usage-by-provider').innerHTML = byProvider.length
            ? `<table><thead><tr><th>Provider</th><th>Requests</th><th>Cost (USD)</th></tr></thead>
               <tbody>${byProvider.map(p => `<tr><td>${p.provider}</td><td>${p.requests.toLocaleString()}</td><td>$${p.cost_usd.toFixed(6)}</td></tr>`).join('')}</tbody></table>`
            : '<p class="text-small">No data yet.</p>';

        const byModel = data.by_model || [];
        document.getElementById('usage-by-model').innerHTML = byModel.length
            ? `<table><thead><tr><th>Model</th><th>Requests</th><th>Cost (USD)</th></tr></thead>
               <tbody>${byModel.map(m => `<tr><td class="mono">${m.model}</td><td>${m.requests.toLocaleString()}</td><td>$${m.cost_usd.toFixed(6)}</td></tr>`).join('')}</tbody></table>`
            : '<p class="text-small">No data yet.</p>';

    } catch(e) {
        document.getElementById('usage-summary').innerHTML =
            '<p class="text-small">Failed to load usage data.</p>';
    }
}
loadUsage();
</script>
{% endblock %}