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

{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold text-white">Combos</h1>
    <button onclick="document.getElementById('combo-modal').classList.remove('hidden')"
            class="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2 text-sm font-medium transition-colors">
        + Add Combo
    </button>
</div>

<div id="combos-list">
    {% include "combos_partial.html" %}
</div>

<!-- Add/Edit Combo Modal -->
<div id="combo-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60">
    <div class="bg-gray-800 rounded-xl border border-gray-700 p-6 max-w-2xl w-full mx-4">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold text-white" id="combo-modal-title">Add Combo</h2>
            <button onclick="document.getElementById('combo-modal').classList.add('hidden')"
                    class="text-gray-400 hover:text-white text-xl">&times;</button>
        </div>
        <form id="combo-form" class="space-y-4"
              hx-post="/dashboard/api/combos" hx-target="#combos-list"
              onsubmit="setTimeout(() => document.getElementById('combo-modal').classList.add('hidden'), 100)">
            <div>
                <label class="block text-gray-400 text-sm mb-1">Name</label>
                <input type="text" name="name" id="c-name" required
                       class="w-full bg-gray-900 text-white rounded-lg px-3 py-2 border border-gray-700 text-sm">
            </div>
            <div>
                <label class="block text-gray-400 text-sm mb-1">Models (comma-separated, e.g. openai/gpt-4o, anthropic/claude-sonnet-4-20250514)</label>
                <input type="text" name="models" id="c-models" required
                       class="w-full bg-gray-900 text-white rounded-lg px-3 py-2 border border-gray-700 text-sm">
            </div>
            {% if wired_providers %}
            <div>
                <div class="flex items-center justify-between mb-1">
                    <label class="block text-gray-400 text-sm">Connected providers — click a model to add it</label>
                    <input type="text" id="wired-filter" placeholder="Filter models…"
                           oninput="filterWiredModels(this.value)"
                           class="bg-gray-900 text-white rounded px-2 py-1 border border-gray-700 text-xs w-40">
                </div>
                <div id="wired-providers" class="max-h-56 overflow-y-auto rounded-lg border border-gray-700 bg-gray-900 divide-y divide-gray-800">
                    {% for p in wired_providers %}
                    <details class="wired-provider" data-prefix="{{ p.prefix }}">
                        <summary class="cursor-pointer px-3 py-2 text-sm text-gray-300 hover:bg-gray-800 flex items-center justify-between">
                            <span class="font-medium text-white">{{ p.prefix }}</span>
                            <span class="text-xs text-gray-500">{{ p.models | length }} model{{ "s" if p.models | length != 1 }}{% if p.accounts > 1 %} &middot; {{ p.accounts }} accounts{% endif %}</span>
                        </summary>
                        <div class="px-3 pb-2 flex flex-wrap gap-1">
                            {% for m in p.models %}
                            <button type="button"
                                    class="wired-model bg-gray-800 hover:bg-blue-700 text-gray-300 hover:text-white rounded px-2 py-0.5 text-xs transition-colors"
                                    data-model="{{ p.prefix }}/{{ m }}">{{ m }}</button>
                            {% endfor %}
                            {% if not p.models %}
                            <span class="text-xs text-gray-600 italic">no models listed — type the id manually</span>
                            {% endif %}
                        </div>
                    </details>
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <p class="text-xs text-gray-500">No providers with credentials yet — add one on the Providers page first.</p>
            {% endif %}
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2 text-sm font-medium transition-colors">
                Create Combo
            </button>
        </form>
    </div>
</div>

<script>
function editCombo(id, name, models) {
    document.getElementById('combo-modal-title').textContent = 'Edit Combo';
    document.getElementById('c-name').value = name;
    document.getElementById('c-models').value = models;
    var form = document.getElementById('combo-form');
    form.onsubmit = function(e) {
        e.preventDefault();
        var formData = new URLSearchParams(new FormData(form));
        fetch('/dashboard/api/combos/' + id, {
            method: 'PUT',
            body: formData,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(r => r.text()).then(html => {
            document.getElementById('combos-list').innerHTML = html;
            document.getElementById('combo-modal').classList.add('hidden');
            document.getElementById('combo-modal-title').textContent = 'Add Combo';
            form.onsubmit = null;
            form.reset();
        }).catch(err => {
            janusToast('Failed to update combo: ' + err.message, 'error');
        });
    };
    document.getElementById('combo-modal').classList.remove('hidden');
}

document.addEventListener('click', function(e) {
    var btn = e.target.closest('.edit-combo-btn');
    if (!btn) return;
    editCombo(btn.dataset.id, btn.dataset.name, btn.dataset.models);
});

function resetComboForm() {
    var form = document.getElementById('combo-form');
    form.onsubmit = null;
    form.reset();
    document.getElementById('combo-modal-title').textContent = 'Add Combo';
}

function closeComboModal() {
    document.getElementById('combo-modal').classList.add('hidden');
    resetComboForm();
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeComboModal();
});

document.getElementById('combo-modal').addEventListener('click', function(e) {
    if (e.target === this) closeComboModal();
});

// Click a wired-provider model chip to append it to the models input.
document.addEventListener('click', function(e) {
    var chip = e.target.closest('.wired-model');
    if (!chip) return;
    var input = document.getElementById('c-models');
    var current = input.value.split(',').map(function(s) { return s.trim(); }).filter(Boolean);
    if (current.indexOf(chip.dataset.model) === -1) {
        current.push(chip.dataset.model);
    }
    input.value = current.join(', ');
});

function filterWiredModels(q) {
    q = q.trim().toLowerCase();
    document.querySelectorAll('#wired-providers .wired-provider').forEach(function(det) {
        var anyVisible = false;
        det.querySelectorAll('.wired-model').forEach(function(chip) {
            var match = !q || chip.dataset.model.toLowerCase().indexOf(q) !== -1;
            chip.classList.toggle('hidden', !match);
            if (match) anyVisible = true;
        });
        var prefixMatch = !q || det.dataset.prefix.toLowerCase().indexOf(q) !== -1;
        det.classList.toggle('hidden', !(anyVisible || prefixMatch));
        if (q && anyVisible) det.setAttribute('open', '');
        if (!q) det.removeAttribute('open');
    });
}
</script>
{% endblock %}