{% extends "base.html" %}
{% block title %}Overview - Janus{% endblock %}
{% block overview_active %}bg-gray-700 text-white{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-white mb-6">Overview</h1>

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <div class="bg-gray-800 rounded-xl p-5 border border-gray-700">
        <p class="text-gray-400 text-sm font-medium mb-1">Total Requests</p>
        <p class="text-3xl font-bold text-white">{{ stats.total_requests }}</p>
    </div>
    <div class="bg-gray-800 rounded-xl p-5 border border-gray-700">
        <p class="text-gray-400 text-sm font-medium mb-1">Input Tokens</p>
        <p class="text-3xl font-bold text-white">{{ "{:,}".format(stats.total_input_tokens) }}</p>
    </div>
    <div class="bg-gray-800 rounded-xl p-5 border border-gray-700">
        <p class="text-gray-400 text-sm font-medium mb-1">Output Tokens</p>
        <p class="text-3xl font-bold text-white">{{ "{:,}".format(stats.total_output_tokens) }}</p>
    </div>
    <div class="bg-gray-800 rounded-xl p-5 border border-gray-700">
        <p class="text-gray-400 text-sm font-medium mb-1">Enabled Providers</p>
        <p class="text-3xl font-bold text-white">{{ provider_count }}</p>
    </div>
</div>

<!-- Today's Spend + Budget -->
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-8">
    <div class="flex items-center justify-between mb-3">
        <h2 class="text-lg font-semibold text-white">Today's Spend</h2>
        <span class="text-2xl font-bold text-green-400">${{ "%.4f"|format(today_cost) }}</span>
    </div>
    {% if global_budget %}
    <div class="flex items-center gap-3">
        <div class="flex-1 bg-gray-700 rounded-full h-3">
            <div class="h-3 rounded-full {% if global_budget.status == 'exceeded' %}bg-red-500{% elif global_budget.status == 'warning' %}bg-yellow-500{% else %}bg-green-500{% endif %}"
                 style="width: {{ [global_budget.pct_used, 100] | min }}%"></div>
        </div>
        <span class="text-sm text-gray-400 whitespace-nowrap">
            ${{ "%.2f"|format(global_budget.today_spend) }} / ${{ "%.2f"|format(global_budget.daily_limit) }} ({{ "%.0f"|format(global_budget.pct_used) }}%)
        </span>
    </div>
    {% else %}
    <p class="text-gray-500 text-sm">No global budget set. <a href="/dashboard/budgets" class="text-blue-400 hover:underline">Create one</a></p>
    {% endif %}
</div>

<!-- Active Combos -->
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
    <h2 class="text-lg font-semibold text-white mb-4">Active Combos</h2>
    {% if combos %}
    <div class="space-y-3">
        {% for name, models in combos.items() %}
        <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
            <div class="flex items-center justify-between mb-2">
                <span class="text-white font-medium">{{ name }}</span>
                <span class="text-gray-500 text-sm">{{ models|length }} models</span>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                {% for model in models %}
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-900 text-blue-200">{{ model }}</span>
                {% if not loop.last %}
                <span class="text-gray-500 text-sm">→</span>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-gray-500 text-sm">No combos configured.</p>
    {% endif %}
</div>
{% endblock %}