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

{% block content %}
<div class="flex flex-wrap items-start justify-between gap-4 mb-6">
    <div>
        <h1 class="text-2xl font-bold text-white mb-2">Routing &amp; Rotation</h1>
        <p class="text-gray-400 text-sm max-w-3xl">{{ overview.rotation_note }}</p>
    </div>
    <a href="/dashboard/inventory/keys"
       class="px-4 py-2 border border-gray-600 text-gray-300 hover:text-white hover:border-gray-500 rounded-lg text-sm">
        Manage keys
    </a>
</div>

{% if overview.cooldown_count > 0 %}
<div class="mb-6 bg-amber-900/30 border border-amber-700 rounded-lg p-4 text-amber-200 text-sm">
    {{ overview.cooldown_count }} account(s) are in cooldown after recent errors and are skipped until the timer expires.
</div>
{% endif %}

{% if overview.quota_warnings %}
<div class="mb-6 bg-amber-900/30 border border-amber-700 rounded-lg p-4 text-amber-200 text-sm">
    <p class="font-medium mb-2">Subscription quota near or at limit</p>
    <ul class="list-disc list-inside space-y-1">
        {% for p in overview.quota_warnings %}
        <li><span class="font-mono">{{ p.prefix }}</span>:
            {{ "{:,}".format(p.quota.used) }} / {{ "{:,}".format(p.quota.limit) }} {{ p.quota.metric }}
            ({{ p.quota.status }}) · resets in {{ p.quota.resets_in }}</li>
        {% endfor %}
    </ul>
</div>
{% endif %}

<div class="space-y-6 mb-8">
    <h2 class="text-lg font-bold text-white">Provider account pools</h2>
    <div id="routing-pools"
         hx-get="/dashboard/api/routing/partial"
         hx-trigger="load, every 8s"
         hx-swap="innerHTML">
        {% include "routing_partial.html" %}
    </div>
</div>

<div class="space-y-4">
    <h2 class="text-lg font-bold text-white">Combo fallback chains</h2>
    <p class="text-gray-400 text-sm">When a client sends <code class="text-gray-300">model: "combo-name"</code>, models are tried left-to-right.</p>
    {% if overview.combos %}
    <div class="grid gap-4 md:grid-cols-2">
        {% for combo in overview.combos %}
        <div class="bg-gray-800 rounded-xl border border-gray-700 p-5">
            <h3 class="text-white font-semibold mb-3 font-mono">{{ combo.name }}</h3>
            <ol class="space-y-2">
                {% for model in combo.models %}
                <li class="flex items-center gap-3">
                    <span class="text-xs font-bold text-blue-300 w-5">{{ loop.index }}</span>
                    <code class="text-sm text-gray-300 bg-gray-900 px-2 py-1 rounded">{{ model }}</code>
                    {% if not loop.last %}
                    <span class="text-gray-600 text-xs">→ fallback</span>
                    {% endif %}
                </li>
                {% endfor %}
            </ol>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="bg-gray-800 rounded-xl border border-gray-700 px-6 py-8 text-center text-gray-500 text-sm">
        No combos configured. <a href="/dashboard/combos" class="text-blue-400 hover:text-blue-300">Create one</a>.
    </div>
    {% endif %}
</div>

<div id="key-detail-modal" class="hidden">
    {% include "inventory_key_detail_modal.html" %}
</div>
<script>
(function() {
    function tickCooldowns() {
        document.querySelectorAll('.cooldown-timer[data-cooldown-secs]').forEach(function(el) {
            var secs = parseInt(el.getAttribute('data-cooldown-secs'), 10);
            if (secs > 0) {
                secs -= 1;
                el.setAttribute('data-cooldown-secs', secs);
                el.textContent = 'cooldown ~' + secs + 's';
            }
        });
    }
    setInterval(tickCooldowns, 1000);
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        if (evt.detail.target && evt.detail.target.id === 'routing-pools') tickCooldowns();
    });
})();
</script>
{% endblock %}