{% 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>

<div class="bg-gray-800 rounded-xl p-5 border border-gray-700 mb-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
        <div>
            <h2 class="text-lg font-semibold text-white">Quick setup</h2>
            <p class="text-gray-400 text-sm">Point OpenCode, Cursor, Claude Code, or any OpenAI-compatible client here.</p>
        </div>
        <a href="/dashboard/tools" class="text-sm text-blue-400 hover:text-blue-300 shrink-0">Full tool setup →</a>
    </div>
    <div class="bg-gray-900 rounded-lg border border-gray-700 flex items-center gap-3 p-3">
        <code id="janus-base-url" class="flex-1 min-w-0 text-sm text-green-300 font-mono break-all">{{ base_url }}</code>
        <button type="button" id="copy-base-url-btn"
                class="shrink-0 px-3 py-1.5 text-xs font-medium border border-gray-600 rounded text-gray-300 hover:bg-gray-700 hover:text-white cursor-pointer">
            Copy
        </button>
    </div>
</div>

<!-- 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>

<script>
(function() {
    var btn = document.getElementById('copy-base-url-btn');
    var el = document.getElementById('janus-base-url');
    if (!btn || !el) return;
    btn.addEventListener('click', function() {
        var text = el.textContent.trim();
        var done = function() {
            var orig = btn.textContent;
            btn.textContent = 'Copied!';
            setTimeout(function() { btn.textContent = orig; }, 1500);
        };
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(done);
            return;
        }
        var ta = document.createElement('textarea');
        ta.value = text;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        done();
    });
})();
</script>
{% endblock %}