{% extends "base.html" %}
{% import "_macros.html" as macros %}

{% block title %}Agents - Memorizz{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Agents</h1>
    <p>{{ agents|length }} agent{% if agents|length != 1 %}s{% endif %} found</p>
</div>

<div class="page-actions page-actions--split">
    <form method="get" action="/agents" class="agents-sort-controls">
        <label for="agent-sort">Sort by</label>
        <select id="agent-sort" name="sort_by" onchange="this.form.submit()">
            <option value="last_run" {% if sort_by == 'last_run' %}selected{% endif %}>Last run</option>
            <option value="last_created" {% if sort_by == 'last_created' %}selected{% endif %}>Last created</option>
        </select>
    </form>
    <a href="/agents/new" class="btn btn-primary">Create Agent</a>
</div>

{% if agents %}
<div class="agents-grid">
    {% for agent in agents %}
    {% set agent_id_value = agent.agent_id|string %}
    {% set agent_display_name = agent.name if agent.name else (agent.persona.name if agent.persona and agent.persona.name else 'Agent') %}
    {% set agent_is_favorite = agent.is_favorite if agent and agent.is_favorite is not none else false %}
    {% set thread_rows = agent_threads.get(agent_id_value, []) %}
    {% set selected_memory_id = agent_default_memory_ids.get(agent_id_value, '') %}
    {% set meta_items = [] %}
    {% if agent.memory_ids %}
        {% set _ = meta_items.append({'label': 'Memories:', 'value': agent.memory_ids|length}) %}
    {% endif %}
    {% if agent.persona and agent.persona.role %}
        {% set _ = meta_items.append({'label': 'Role:', 'value': agent.persona.role}) %}
    {% endif %}
    {% if agent.max_steps %}
        {% set _ = meta_items.append({'label': 'Max Tool Iterations:', 'value': agent.max_steps}) %}
    {% endif %}
    {% set _ = meta_items.append({'label': 'Tools:', 'value': agent_tool_counts.get(agent_id_value, (agent.tools or [])|length)}) %}
    {% if agent.whatsapp_enabled %}
        {% set whatsapp_active = agent_id_value == active_whatsapp_agent_id %}
        {% set _ = meta_items.append({'label': 'WhatsApp:', 'value': 'Active' if whatsapp_active else 'Enabled', 'class': 'badge badge-success' if whatsapp_active else 'badge'}) %}
    {% endif %}
    {% call macros.agent_card(
        agent,
        agent_id_value,
        agent_display_name,
        icon='robot-svg',
        favorite=agent_is_favorite,
        favorite_redirect=request.url.path ~ (('?' ~ request.url.query) if request.url.query else ''),
        meta_items=meta_items,
        footer_links=[
            {'href': '/agents/' ~ agent_id_value ~ '/playground', 'class': 'btn btn-primary', 'label': 'Playground →'},
            {'href': '/agents/' ~ agent_id_value ~ '/edit', 'class': 'btn', 'label': 'Edit'},
        ]
    ) %}
        <!-- Inline mini-chat -->
        <div class="agent-inline-chat" id="chat-{{ agent_id_value }}">
            <div class="inline-chat-toolbar">
                {% if thread_rows|length > 1 %}
                <label class="inline-thread-label" for="thread-{{ agent_id_value }}">Thread</label>
                <select
                    id="thread-{{ agent_id_value }}"
                    class="inline-thread-select"
                    onchange="switchInlineThread('{{ agent_id_value }}', this.value)"
                >
                    {% for thread in thread_rows %}
                    {% set option_memory_id = thread.memory_id|string %}
                    <option value="{{ option_memory_id }}" {% if option_memory_id == selected_memory_id %}selected{% endif %}>
                        {% if loop.first %}Latest{% else %}Thread {{ loop.index }}{% endif %} · {{ thread.message_count }} msg{% if thread.message_count != 1 %}s{% endif %}
                    </option>
                    {% endfor %}
                </select>
                {% elif selected_memory_id %}
                <span class="inline-thread-chip" title="{{ selected_memory_id }}">Latest thread</span>
                {% endif %}
            </div>

            <div class="inline-chat-messages" id="messages-{{ agent_id_value }}" data-memory-id="{{ selected_memory_id }}">
                {% set recent = agent_recent_messages.get(agent_id_value, []) %}
                {% if recent %}
                    {% for msg in recent %}
                    <div class="inline-msg inline-msg--{{ msg.role }}">{{ msg.content or msg.get('text', '') }}</div>
                    {% endfor %}
                {% else %}
                <div class="inline-chat-placeholder">Send a message to start chatting&hellip;</div>
                {% endif %}
            </div>
            <form class="inline-chat-form" onsubmit="return sendInlineChat(event, '{{ agent_id_value }}')">
                <input type="text" class="inline-chat-input" id="input-{{ agent_id_value }}"
                       placeholder="Ask {{ agent_display_name }} something…"
                       autocomplete="off">
                <button type="submit" class="inline-chat-send" id="send-{{ agent_id_value }}">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                </button>
            </form>
        </div>
    {% endcall %}
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <div class="empty-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <rect x="4" y="7" width="16" height="12" rx="3"/>
            <path d="M12 3v4"/>
            <path d="M9 12h.01"/>
            <path d="M15 12h.01"/>
            <path d="M8 16h8"/>
        </svg>
    </div>
    <h3>No Agents Found</h3>
    <p>There are no agents stored in this memory provider.</p>
</div>
{% endif %}

<script>
const _activeStreams = {};

function getSelectedInlineMemoryId(agentId) {
    const selector = document.getElementById('thread-' + agentId);
    if (selector && selector.value) {
        return selector.value.trim();
    }
    const messagesEl = document.getElementById('messages-' + agentId);
    if (messagesEl && messagesEl.dataset && messagesEl.dataset.memoryId) {
        return messagesEl.dataset.memoryId.trim();
    }
    return '';
}

function renderInlineMessages(agentId, messages) {
    const messagesEl = document.getElementById('messages-' + agentId);
    if (!messagesEl) return;

    messagesEl.innerHTML = '';
    if (!Array.isArray(messages) || !messages.length) {
        const placeholder = document.createElement('div');
        placeholder.className = 'inline-chat-placeholder';
        placeholder.innerHTML = 'Send a message to start chatting&hellip;';
        messagesEl.appendChild(placeholder);
        return;
    }

    messages.forEach(function(msg) {
        const role = (msg && msg.role ? String(msg.role) : '').toLowerCase();
        if (role !== 'user' && role !== 'assistant') return;
        const content = (msg && msg.content ? String(msg.content) : '').trim();
        if (!content) return;
        const bubble = document.createElement('div');
        bubble.className = 'inline-msg inline-msg--' + role;
        bubble.textContent = content;
        messagesEl.appendChild(bubble);
    });

    if (!messagesEl.children.length) {
        const placeholder = document.createElement('div');
        placeholder.className = 'inline-chat-placeholder';
        placeholder.innerHTML = 'No user/assistant messages in this thread yet.';
        messagesEl.appendChild(placeholder);
    }
}

async function switchInlineThread(agentId, memoryId) {
    const messagesEl = document.getElementById('messages-' + agentId);
    if (!messagesEl) return;

    const normalizedMemoryId = (memoryId || '').trim();
    messagesEl.dataset.memoryId = normalizedMemoryId;
    messagesEl.innerHTML = '<div class="inline-chat-placeholder">Loading thread&hellip;</div>';

    if (!normalizedMemoryId) {
        renderInlineMessages(agentId, []);
        return;
    }

    try {
        const response = await fetch(
            '/agents/' + agentId + '/playground/thread?memory_id=' + encodeURIComponent(normalizedMemoryId)
        );
        if (!response.ok) throw new Error('HTTP ' + response.status);
        const payload = await response.json();
        const previewMessages = (Array.isArray(payload.messages) ? payload.messages : [])
            .filter(function(msg) {
                const role = (msg && msg.role ? String(msg.role) : '').toLowerCase();
                return role === 'user' || role === 'assistant';
            })
            .map(function(msg) {
                const content = (msg && msg.content ? String(msg.content) : '').trim();
                return {
                    role: (msg && msg.role ? String(msg.role) : '').toLowerCase(),
                    content: content.length > 280 ? (content.slice(0, 277) + '...') : content,
                };
            })
            .filter(function(msg) {
                return !!msg.content;
            })
            .slice(-5);
        renderInlineMessages(agentId, previewMessages);
    } catch (err) {
        messagesEl.innerHTML = '';
        const error = document.createElement('div');
        error.className = 'inline-msg inline-msg--error';
        error.textContent = 'Failed to load thread: ' + err.message;
        messagesEl.appendChild(error);
    }

    messagesEl.scrollTop = messagesEl.scrollHeight;
}

async function sendInlineChat(e, agentId) {
    e.preventDefault();
    if (_activeStreams[agentId]) return false;

    const input = document.getElementById('input-' + agentId);
    const messagesEl = document.getElementById('messages-' + agentId);
    const sendBtn = document.getElementById('send-' + agentId);
    const query = input.value.trim();
    if (!query) return false;

    // Clear placeholder on first message
    const placeholder = messagesEl.querySelector('.inline-chat-placeholder');
    if (placeholder) placeholder.remove();

    // Append user bubble
    const userBubble = document.createElement('div');
    userBubble.className = 'inline-msg inline-msg--user';
    userBubble.textContent = query;
    messagesEl.appendChild(userBubble);

    input.value = '';
    input.disabled = true;
    sendBtn.disabled = true;
    _activeStreams[agentId] = true;

    // Create assistant bubble
    const asstBubble = document.createElement('div');
    asstBubble.className = 'inline-msg inline-msg--assistant';
    asstBubble.innerHTML = '<span class="inline-cursor"></span>';
    messagesEl.appendChild(asstBubble);
    messagesEl.scrollTop = messagesEl.scrollHeight;

    let fullText = '';
    try {
        const formData = new FormData();
        formData.append('query', query);
        const selectedMemoryId = getSelectedInlineMemoryId(agentId);
        if (selectedMemoryId) {
            formData.append('memory_id', selectedMemoryId);
        }

        const response = await fetch('/agents/' + agentId + '/playground/stream', {
            method: 'POST',
            body: formData,
        });

        if (!response.ok) throw new Error('HTTP ' + response.status);

        // SSE plumbing lives in the shared readSseStream() (static/js/app.js).
        await readSseStream(response, function(payload) {
            if (payload === '[DONE]') return;

            try {
                const data = JSON.parse(payload);
                if (typeof data === 'string') {
                    // Error message
                    fullText += data;
                } else if (data.type === 'content' && data.content) {
                    fullText += data.content;
                } else if (data.type === 'done' && data.content) {
                    fullText = data.content;
                } else if (data.type === 'tool_call') {
                    // skip tool calls in mini-chat
                }
            } catch (_) {}
            asstBubble.textContent = fullText || '…';
            messagesEl.scrollTop = messagesEl.scrollHeight;
        });

        if (!fullText.trim()) {
            asstBubble.textContent = '(no response)';
        } else {
            asstBubble.textContent = fullText;
        }
    } catch (err) {
        asstBubble.textContent = 'Error: ' + err.message;
        asstBubble.classList.add('inline-msg--error');
    } finally {
        _activeStreams[agentId] = false;
        input.disabled = false;
        sendBtn.disabled = false;
        input.focus();
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }
    return false;
}

// Scroll pre-loaded message containers to the bottom on page load
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.inline-chat-messages').forEach(function(el) {
        el.scrollTop = el.scrollHeight;
    });
});
</script>
{% endblock %}