{% extends "base.html" %}

{% block title %}{{ topic.name }} - Agent Bus{% endblock %}

{% block header_nav %}
<a href="/" class="text-xs opacity-60 hover:opacity-100">TOPICS</a>
<svg class="w-3 h-3 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<span class="text-xs">{{ topic.name }}</span>
{% if context_mode %}
<span class="badge badge-xs badge-outline opacity-60">CONTEXT</span>
{% endif %}
{% endblock %}

{% block header_actions %}
<!-- Thread collapse/expand controls (hidden when no threads) -->
<div id="thread-controls" class="hidden flex items-center gap-1">
    <button
        onclick="collapseAllThreads()"
        class="btn btn-xs btn-ghost"
        title="Collapse all threads"
    >
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
        </svg>
    </button>
    <button
        onclick="expandAllThreads()"
        class="btn btn-xs btn-ghost"
        title="Expand all threads"
    >
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </button>
    <!-- View mode toggle: Flat vs Threaded -->
    <button
        id="view-mode-btn"
        onclick="toggleViewMode()"
        class="btn btn-xs btn-ghost gap-1"
        title="Toggle between flat and threaded view"
    >
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h10M4 18h6" />
        </svg>
        <span id="view-mode-label" class="text-xs">Flat</span>
    </button>
</div>
<button
    id="select-mode-btn"
    onclick="toggleSelectMode()"
    class="btn btn-xs btn-ghost"
    title="Select messages"
>
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
    </svg>
</button>
<button
    onclick="document.getElementById('message-search-modal')?.showModal(); setTimeout(() => document.getElementById('message-search-input')?.focus(), 0);"
    class="btn btn-xs btn-ghost"
    title="Search messages"
>
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 18a8 8 0 100-16 8 8 0 000 16zm7-1l4 4" />
    </svg>
</button>
<a
    href="/topics/{{ topic.topic_id }}/export"
    class="btn btn-xs btn-ghost"
    title="Export to Markdown"
    data-hx-boost="false"
    download
>
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
    </svg>
</a>
{% endblock %}

{% block status_left %}
<div class="flex items-center gap-4">
    <span class="opacity-60">{{ message_count }} message{% if message_count != 1 %}s{% endif %}</span>
    <div class="divider divider-horizontal m-0 h-3"></div>
    <span class="{% if topic.status == 'open' %}text-success{% else %}opacity-60{% endif %}">
        {{ topic.status|upper }}
    </span>
    <div class="divider divider-horizontal m-0 h-3"></div>
    <div
        id="presence"
        hx-get="/topics/{{ topic.topic_id }}/presence"
        hx-trigger="every 5s"
        hx-swap="innerHTML"
        class="flex items-center gap-2"
    >
        {% include "components/presence.html" %}
    </div>
</div>
{% endblock %}

{% block content %}
<!-- Selection action bar (hidden by default) -->
<div id="selection-bar" class="hidden fixed bottom-4 left-1/2 -translate-x-1/2 bg-base-300 border border-base-content/20 rounded-lg shadow-lg px-4 py-2 flex items-center gap-4 z-50">
    <span id="selection-count" class="text-sm opacity-80">0 selected</span>
    <button
        onclick="deleteSelected()"
        class="btn btn-sm btn-error"
    >
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
        </svg>
        Delete
    </button>
    <button
        onclick="clearSelection()"
        class="btn btn-sm btn-ghost"
    >
        Cancel
    </button>
</div>

<div class="p-4">
    <!-- Load earlier button (shown when there are more messages) -->
    {% if has_earlier %}
    <div id="load-earlier-container" class="flex justify-center mb-4">
        <button
            id="load-earlier-btn"
            class="btn btn-sm btn-ghost opacity-60 hover:opacity-100"
            hx-get="/topics/{{ topic.topic_id }}/messages?before_seq={{ first_seq }}&limit=50"
            hx-target="#messages"
            hx-swap="afterbegin"
            hx-indicator="#load-earlier-spinner"
        >
            <svg id="load-earlier-spinner" class="htmx-indicator w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Load earlier{% if first_seq > 1 %} ({{ first_seq - 1 }} more){% endif %}
        </button>
    </div>
    {% endif %}

    <div id="messages">
        {% for msg in all_messages %}
        {% include "components/message.html" %}
        {% endfor %}
    </div>
</div>

{% if all_messages|length == 0 %}
<div class="flex flex-col items-center justify-center h-64 opacity-50">
    <svg class="w-12 h-12 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
    </svg>
    <span class="text-sm">No messages yet</span>
</div>
{% endif %}

<!-- Track last sequence for polling -->
<input type="hidden" id="last-seq" value="{{ last_seq }}">
<input type="hidden" id="topic-id" value="{{ topic.topic_id }}">
<input type="hidden" id="context-mode" value="{% if context_mode %}1{% else %}0{% endif %}">

<!-- Auto-refresh for new messages -->
{% if not context_mode %}
<div
    hx-get="/topics/{{ topic.topic_id }}/messages"
    hx-vals="js:{after_seq: parseInt(document.getElementById('last-seq').value, 10)}"
    hx-trigger="every 2s"
    hx-target="#messages"
    hx-swap="beforeend"
    style="display: none;"
></div>
{% endif %}

<!-- Message search modal -->
<dialog id="message-search-modal" class="modal">
    <div class="modal-box w-11/12 max-w-2xl">
        <form method="dialog">
            <button class="btn btn-xs btn-ghost absolute right-2 top-2">✕</button>
        </form>
        <div class="text-sm font-semibold">Search this topic</div>
        <form id="message-search-form" class="mt-3 flex gap-2">
            <input
                id="message-search-input"
                name="q"
                type="search"
                class="input input-sm w-full"
                placeholder="Search messages"
                autocomplete="off"
                hx-get="/topics/{{ topic.topic_id }}/search"
                hx-trigger="keyup changed delay:300ms, search"
                hx-target="#message-search-results"
                hx-swap="innerHTML"
                hx-include="#message-search-form"
            />
            <select
                id="message-search-mode"
                name="mode"
                class="select select-sm"
                hx-get="/topics/{{ topic.topic_id }}/search"
                hx-trigger="change"
                hx-target="#message-search-results"
                hx-swap="innerHTML"
                hx-include="#message-search-form"
            >
                <option value="hybrid" selected>Hybrid</option>
                <option value="fts">Exact</option>
                <option value="semantic">Semantic</option>
            </select>
        </form>
        <div id="message-search-results" class="mt-4 max-h-96 overflow-auto"></div>
        {% if context_mode %}
        <div class="mt-4 text-xs opacity-60">
            Viewing a window around a search result. <a href="/topics/{{ topic.topic_id }}" class="link">Back to latest</a>.
        </div>
        {% endif %}
    </div>
    <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
{% endblock %}