{% extends "admin/change_list.html" %}

{% block object-tools %}
<div class="object-tools">
  <ul>
    <li>
      <button type="button" class="button" data-click="checkLlmStatus">LLM Status</button>
      <span id="llm-status-text" style="margin-left: 8px; font-size: 12px;"></span>
    </li>
    <li>
      <form method="post" action="{% url 'admin:collect_translation_keys' %}" style="display:inline-block;">
        {% csrf_token %}
        <button type="submit" class="button" data-click="confirm"
                data-confirm-text="Collect error and notification keys from all services?">Collect keys</button>
      </form>
    </li>
    <li>
      <form method="post" action="{% url 'admin:set_translation_lang' %}" style="display:inline-block;">
        {% csrf_token %}
        <label for="lang-selector" style="margin-right: 8px;">Language:</label>
        <select id="lang-selector" name="language" data-change="submitOwnForm">
          {% for code, name in languages %}
          <option value="{{ code }}" {% if code == current_language %}selected{% endif %}>{{ name }}</option>
          {% endfor %}
        </select>
      </form>
    </li>
  </ul>
</div>
{{ block.super }}
{% endblock %}

{% block extrahead %}
{{ block.super }}
{% include "dashboard/_safe_dom.html" %}
<script{% if csp_nonce %} nonce="{{ csp_nonce }}"{% endif %}>
function llmStatusLine(color, text) {
    const span = stapelDom.el('span', null, text);
    span.style.color = color;
    stapelDom.replace('llm-status-text', span);
}

function checkLlmStatus() {
    fetch('llm_status/')
        .then(response => response.json())
        .then(data => {
            if (data.status === 'running') {
                llmStatusLine('orange', `⏳ Running: ${data.completed}/${data.total} (${data.translated} ok, ${data.errors} errors)`);
                // Auto-refresh while running
                setTimeout(checkLlmStatus, 3000);
            } else if (data.status === 'completed') {
                llmStatusLine('green', `✓ Done: ${data.translated} translated, ${data.errors} errors`);
            } else {
                llmStatusLine('gray', 'Idle');
            }
        })
        .catch(err => {
            llmStatusLine('red', `Error: ${err}`);
        });
}

stapelDom.register({checkLlmStatus: checkLlmStatus});

// Check status on page load
document.addEventListener('DOMContentLoaded', checkLlmStatus);
</script>
{% endblock %}