{% extends "admin/base_site.html" %}
{% load i18n %}

{% block extrahead %}
{{ block.super }}
<style>
.agent-banner { margin: 10px 0; padding: 10px 12px; border: 1px solid #ba2121; background: #fff8f8; }
.agent-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 12px 0 16px; }
.agent-filters label { display: block; font-weight: 600; margin-bottom: 4px; }
.agent-preview { max-width: 420px; color: #555; }
.agent-child { color: #888; font-size: 11px; }
.agent-actions { margin: 0 0 12px; }
</style>
{% endblock %}

{% block content %}
<div id="content-main">
  {% if error %}
  <p class="agent-banner">{{ error }}</p>
  {% endif %}

  <form method="get" class="agent-filters">
    <div>
      <label for="id_q">Search</label>
      <input id="id_q" type="text" name="q" value="{{ q }}" placeholder="Thread id, phone, message">
    </div>
    <div>
      <label for="id_user">User</label>
      <input id="id_user" type="text" name="user" value="{{ user_filter }}" placeholder="User id or phone">
    </div>
    <div>
      <label for="id_include_children">
        <input id="id_include_children" type="checkbox" name="include_children" value="1"{% if include_children %} checked{% endif %}>
        Include subagent threads
      </label>
    </div>
    <div>
      <input type="submit" value="Filter" class="default">
      <a href="{% url 'admin:ai_agent_agentthread_changelist' %}" class="button">Clear</a>
    </div>
  </form>

  <form method="post" id="thread-changelist-form">
    {% csrf_token %}
    {% if query_string %}<input type="hidden" name="next" value="?{{ query_string }}">{% endif %}
    {% if can_delete and threads %}
    <div class="actions agent-actions">
      <label>
        Action:
        <select name="action">
          <option value="">---------</option>
          <option value="delete">Delete selected threads</option>
        </select>
      </label>
      <button type="submit" class="button">Go</button>
      <span class="help">Deleting a parent also removes nested subagent threads.</span>
    </div>
    {% endif %}

    <div class="module">
      <table>
        <thead>
          <tr>
            {% if can_delete and threads %}
            <th class="action-checkbox-column">
              <input type="checkbox" id="action-toggle" title="Select all">
            </th>
            {% endif %}
            <th>Thread</th>
            <th>User</th>
            <th>Status</th>
            <th>Messages</th>
            <th>Updated</th>
            <th>Preview</th>
          </tr>
        </thead>
        <tbody>
          {% for thread in threads %}
          <tr>
            {% if can_delete %}
            <td class="action-checkbox">
              <input type="checkbox" name="selected" value="{{ thread.thread_id }}" class="action-select">
            </td>
            {% endif %}
            <td>
              <a href="{% url 'admin:ai_agent_agentthread_change' thread.thread_id %}">{{ thread.thread_id }}</a>
              {% if thread.is_child %}
              <div class="agent-child">subagent{% if thread.child_label %} · {{ thread.child_label }}{% endif %}</div>
              {% endif %}
            </td>
            <td>
              {% if thread.user %}
                {{ thread.user.get_username }}
                {% if thread.user.get_full_name %}
                  ({{ thread.user.get_full_name }})
                {% endif %}
              {% elif thread.owner_id %}
                {{ thread.owner_id }}
              {% else %}
                —
              {% endif %}
            </td>
            <td>{{ thread.status|default:"—" }}</td>
            <td>{{ thread.message_count }}</td>
            <td>{{ thread.updated_at|default:thread.created_at|default:"—" }}</td>
            <td class="agent-preview">{{ thread.last_message_preview|default:"—" }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="7">{% if error %}No threads loaded.{% else %}No threads found.{% endif %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </form>

  {% if paginator.num_pages > 1 %}
  <p class="paginator">
    {% if page_obj.has_previous %}
      <a href="?{% if query_string %}{{ query_string }}&amp;{% endif %}p={{ page_obj.previous_page_number }}">Previous</a>
    {% endif %}
    Page {{ page_obj.number }} of {{ paginator.num_pages }} ({{ paginator.count }} threads)
    {% if page_obj.has_next %}
      <a href="?{% if query_string %}{{ query_string }}&amp;{% endif %}p={{ page_obj.next_page_number }}">Next</a>
    {% endif %}
  </p>
  {% endif %}
</div>
<script>
(function () {
  var toggle = document.getElementById("action-toggle");
  if (!toggle) return;
  toggle.addEventListener("change", function () {
    document.querySelectorAll(".action-select").forEach(function (box) {
      box.checked = toggle.checked;
    });
  });
})();
</script>
{% endblock %}