<!-- Stat Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
{% from "components/card.html" import stat_card %}
{{ stat_card(
    label="Total Commands",
    value=usage.total_commands|default(0)|int,
    icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>'
) }}

{{ stat_card(
    label="Total Sessions",
    value=usage.total_sessions|default(0)|int,
    icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
) }}

{{ stat_card(
    label="Total Cost",
    value="$" ~ (tokens.total_cost|default(0.0)|float|round(2)),
    icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
) }}

{{ stat_card(
    label="Cache Savings",
    value="$" ~ (tokens.cache_savings|default(0.0)|float|round(2)),
    icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
) }}
</div>

<!-- Usage Overview Table -->
{% from "components/table.html" import responsive_table %}
<div class="mt-8">
{% call responsive_table(title="Usage Overview") %}
<thead class="bg-gray-50">
    <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Metric</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Value</th>
    </tr>
</thead>
<tbody class="divide-y divide-gray-200">
    <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">Commands</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ usage.total_commands|default(0)|int }}</td>
    </tr>
    <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">Sessions</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ usage.total_sessions|default(0)|int }}</td>
    </tr>
    <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">Messages</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ usage.total_messages|default(0)|int }}</td>
    </tr>
    <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">Active Projects</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ usage.total_projects|default(0)|int }}</td>
    </tr>
    <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">Avg Commands per Day</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ usage.avg_commands_per_day|default(0)|float|round(1) }}</td>
    </tr>
</tbody>
{% endcall %}
</div>

<!-- Token Summary Table -->
<div class="mt-8">
{% call responsive_table(title="Token Summary") %}
<thead class="bg-gray-50">
    <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Token Type</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Count</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Cost</th>
    </tr>
</thead>
<tbody class="divide-y divide-gray-200">
    <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">Input Tokens</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ tokens.input_tokens|default(0)|int }}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${{ tokens.input_cost|default(0)|float|round(2) }}</td>
    </tr>
    <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">Output Tokens</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ tokens.output_tokens|default(0)|int }}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${{ tokens.output_cost|default(0)|float|round(2) }}</td>
    </tr>
    <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">Cache Creation</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ tokens.cache_creation_tokens|default(0)|int }}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${{ tokens.cache_creation_cost|default(0)|float|round(2) }}</td>
    </tr>
    <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">Cache Reads</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ tokens.cache_read_tokens|default(0)|int }}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${{ tokens.cache_read_cost|default(0)|float|round(2) }}</td>
    </tr>
    <tr class="bg-gray-50">
        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-[#0770E3]">Total Cost</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">-</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-[#0770E3]">${{ tokens.total_cost|default(0)|float|round(2) }}</td>
    </tr>
</tbody>
{% endcall %}
</div>

<!-- Top 5 Projects -->
<div class="mt-8">
{% if projects.projects %}
{% call responsive_table(title="Top 5 Projects") %}
<thead class="bg-gray-50">
    <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Project Name</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Commands</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Sessions</th>
    </tr>
</thead>
<tbody class="divide-y divide-gray-200">
    {% for project in projects.projects[:5] %}
    <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">{{ project.name }}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ project.commands|default(0)|int }}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ project.sessions|default(0)|int }}</td>
    </tr>
    {% endfor %}
</tbody>
{% endcall %}
{% endif %}
</div>

<!-- Model Usage Card -->
{% if models and models.models %}
<div class="mt-8">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold text-gray-900">Model Usage</h3>
            <a href="/tokens" class="text-sm text-[#0770E3] hover:underline">View details</a>
        </div>
        <div class="p-6">
            <div class="space-y-4">
                {% for model in models.models[:3] %}
                <div class="flex items-center justify-between">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-medium text-gray-900 truncate">{{ model.model_name }}</span>
                            <span class="text-sm font-semibold text-[#0770E3]">${{ model.cost|default(0.0)|float|round(2) }}</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-[#0770E3] h-2 rounded-full transition-all" style="width: {{ model.cost_percentage|default(0) }}%"></div>
                        </div>
                        <div class="flex justify-between mt-1">
                            <span class="text-xs text-gray-500">{{ model.total_tokens|default(0)|int }} tokens</span>
                            <span class="text-xs text-gray-500">{{ model.cost_percentage|default(0)|float|round(1) }}%</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% if models.total_models > 3 %}
            <div class="mt-4 pt-4 border-t border-gray-200 text-center">
                <span class="text-sm text-gray-500">+{{ models.total_models - 3 }} more model{% if models.total_models - 3 > 1 %}s{% endif %}</span>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}

<!-- Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
    {% include 'partials/dashboard_charts.html' %}
</div>

<!-- Cost Trend Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
    {% include 'partials/cost_trend_charts.html' %}
</div>
