{% extends "themis/base.html" %}

{% block title %}Usage History{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Usage History</h1>
</div>

<!-- Totals -->
{% if totals %}
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="stat bg-base-200 rounded-box shadow py-3">
        <div class="stat-title text-xs">Input Tokens</div>
        <div class="stat-value text-lg">{{ totals.total_input|default:"0" }}</div>
    </div>
    <div class="stat bg-base-200 rounded-box shadow py-3">
        <div class="stat-title text-xs">Output Tokens</div>
        <div class="stat-value text-lg">{{ totals.total_output|default:"0" }}</div>
    </div>
    <div class="stat bg-base-200 rounded-box shadow py-3">
        <div class="stat-title text-xs">Cached Tokens</div>
        <div class="stat-value text-lg">{{ totals.total_cached|default:"0" }}</div>
    </div>
    <div class="stat bg-base-200 rounded-box shadow py-3">
        <div class="stat-title text-xs">Total Cost</div>
        <div class="stat-value text-lg">${{ totals.total_cost|default:"0"|floatformat:4 }}</div>
    </div>
</div>
{% endif %}

{% if usage_records %}
<div class="overflow-x-auto">
    <table class="table table-zebra table-sm w-full">
        <thead>
            <tr>
                <th>Timestamp</th>
                <th>Model</th>
                <th>API</th>
                <th>Input</th>
                <th>Output</th>
                <th>Cached</th>
                <th>Cost</th>
                <th>Purpose</th>
                <th>Session</th>
            </tr>
        </thead>
        <tbody>
        {% for u in usage_records %}
        <tr>
            <td class="text-xs">{{ u.timestamp|date:"Y-m-d H:i:s" }}</td>
            <td class="font-mono text-xs">{{ u.model.name }}</td>
            <td class="text-xs">{{ u.model.api.name }}</td>
            <td>{{ u.input_tokens }}</td>
            <td>{{ u.output_tokens }}</td>
            <td>{{ u.cached_tokens }}</td>
            <td class="text-xs">${{ u.total_cost|floatformat:4 }}</td>
            <td><span class="badge badge-ghost badge-xs">{{ u.get_purpose_display }}</span></td>
            <td class="font-mono text-xs max-w-[8rem] truncate">{{ u.session_id|default:"—" }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="alert alert-info">No usage records yet.</div>
{% endif %}

<div class="mt-4">
    <a href="{% url 'llm_manager:dashboard' %}" class="btn btn-ghost btn-sm">&larr; Dashboard</a>
</div>
{% endblock %}