{% 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: 460px; color: #555; font-family: monospace; font-size: 12px; }
.agent-overall { font-weight: 600; }
.agent-actions { margin: 0 0 12px; }
details.agent-json { margin-top: 4px; }
details.agent-json pre { white-space: pre-wrap; max-width: 640px; }
</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="Text, key, phone">
    </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_layer">Layer</label>
      <input id="id_layer" type="text" name="layer" value="{{ layer_filter }}" placeholder="supervisor, wallet, …">
    </div>
    <div>
      <label for="id_kind">Kind</label>
      <select id="id_kind" name="kind">
        <option value="">All</option>
        <option value="profile"{% if kind_filter == "profile" %} selected{% endif %}>Profile</option>
        <option value="semantic"{% if kind_filter == "semantic" %} selected{% endif %}>Semantic</option>
        <option value="episodes"{% if kind_filter == "episodes" %} selected{% endif %}>Episodes</option>
        <option value="playbook"{% if kind_filter == "playbook" %} selected{% endif %}>Playbook</option>
        <option value="prompt"{% if kind_filter == "prompt" %} selected{% endif %}>Prompt overlay</option>
      </select>
    </div>
    <div>
      <input type="submit" value="Filter" class="default">
      <a href="{% url 'admin:ai_agent_agentmemory_changelist' %}" class="button">Clear</a>
    </div>
  </form>

  <p>
    <a href="{% url 'admin:ai_agent_agentprompt_changelist' %}">Prompt overlays (global + history)</a>
  </p>

  <form method="post" id="memory-changelist-form">
    {% csrf_token %}
    {% if query_string %}<input type="hidden" name="next" value="?{{ query_string }}">{% endif %}
    {% if can_delete and memories %}
    <div class="actions agent-actions">
      <label>
        Action:
        <select name="action">
          <option value="">---------</option>
          <option value="delete">Delete selected memories</option>
        </select>
      </label>
      <button type="submit" class="button">Go</button>
    </div>
    {% endif %}

    <div class="module">
      <table>
        <thead>
          <tr>
            {% if can_delete and memories %}
            <th class="action-checkbox-column">
              <input type="checkbox" id="action-toggle" title="Select all">
            </th>
            {% endif %}
            <th>User</th>
            <th>Layer</th>
            <th>Kind</th>
            <th>Key</th>
            <th>Updated</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {% for item in memories %}
          <tr>
            {% if can_delete %}
            <td class="action-checkbox">
              <input type="checkbox" name="selected" value="{{ item.item_id }}" class="action-select">
            </td>
            {% endif %}
            <td>
              {% if item.user %}
                <a href="{% url 'admin:ai_agent_agentmemory_user' item.user.pk %}">{{ item.user.get_username }}</a>
              {% elif item.user_id %}
                {{ item.user_id }}
              {% else %}
                —
              {% endif %}
            </td>
            <td>
              {% if item.layer == supervisor_layer %}
                <span class="agent-overall">{{ item.layer_display }}</span>
              {% else %}
                {{ item.layer_display }}
              {% endif %}
            </td>
            <td>{{ item.kind|default:"—" }}</td>
            <td>{{ item.key }}</td>
            <td>{{ item.updated_at|default:item.created_at|default:"—" }}</td>
            <td class="agent-preview">
              {{ item.preview }}
              <details class="agent-json">
                <summary>JSON</summary>
                <pre>{{ item.value_json }}</pre>
              </details>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="7">{% if error %}No memories loaded.{% else %}No memories 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 }} memories)
    {% 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 %}