{% extends "base.html" %}
{% set active_page = "agents" %}
{% block title %}Agent Chat{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-xl font-semibold text-white">Agent Chat</h1>
    <p class="text-sm text-gray-500 mt-1">Talk to any agent directly — no project context required</p>
</div>

<!-- Agent selector -->
<div class="flex gap-2 mb-6 flex-wrap">
    {% for a in agents %}
    <a href="/agents?agent={{ a }}"
       class="px-3 py-1.5 text-xs rounded-lg border transition
              {% if request.query_params.get('agent', 'devops-agent') == a %}
              bg-blue-600 border-blue-500 text-white
              {% else %}
              border-gray-700 text-gray-400 hover:border-gray-500
              {% endif %}">
        {{ a }}
    </a>
    {% endfor %}
</div>

{% set selected_agent = request.query_params.get('agent', 'devops-agent') %}

<!-- Chat area -->
<div class="card rounded-lg p-5 mb-6">
    <div class="space-y-4 max-h-[60vh] overflow-y-auto mb-4" id="chat-area">
        {% for msg in messages if msg.target_agent == selected_agent %}
        <div class="border-b border-gray-800/50 pb-4">
            <!-- Operator message -->
            <div class="flex items-start gap-3 mb-3">
                <div class="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-xs text-white font-bold flex-shrink-0">O</div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="text-xs text-blue-400 font-medium">Operator</span>
                        <span class="text-xs text-gray-600">{{ msg.created_at | timeago }}</span>
                    </div>
                    <p class="text-sm text-gray-200 whitespace-pre-wrap">{{ msg.instruction }}</p>
                </div>
            </div>
            <!-- Agent response -->
            {% if msg.response %}
            <div class="flex items-start gap-3 ml-9">
                <div class="w-6 h-6 rounded-full bg-green-700 flex items-center justify-center text-xs text-white font-bold flex-shrink-0">A</div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="text-xs text-green-400 font-medium">{{ msg.target_agent }}</span>
                        <span class="badge badge-{% if msg.status.value == 'completed' %}green{% elif msg.status.value == 'pending' %}yellow{% else %}blue{% endif %}">
                            {{ msg.status.value }}
                        </span>
                    </div>
                    <div class="text-sm text-gray-300 whitespace-pre-wrap prose prose-invert prose-sm max-w-none">{{ msg.response }}</div>
                </div>
            </div>
            {% elif msg.status.value == 'pending' %}
            <div class="ml-9 text-xs text-yellow-500 animate-pulse">Waiting for response...</div>
            {% elif msg.status.value == 'acknowledged' %}
            <div class="ml-9 text-xs text-blue-400 animate-pulse">Agent is working on it...</div>
            {% endif %}
        </div>
        {% endfor %}

        {% if not messages %}
        <p class="text-center text-gray-600 py-8">No messages yet. Start a conversation with {{ selected_agent }}.</p>
        {% endif %}
    </div>

    <!-- Send form -->
    <form method="POST" action="/agents/send" class="flex gap-3">
        <input type="hidden" name="agent" value="{{ selected_agent }}">
        <textarea name="message" rows="2" placeholder="Type a message to {{ selected_agent }}..."
            class="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2.5 text-sm text-gray-200 placeholder-gray-600 resize-none focus:border-blue-500 focus:outline-none"></textarea>
        <button type="submit"
            class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition self-end">
            Send
        </button>
    </form>
</div>

<script>
// Auto-scroll to bottom
var chat = document.getElementById('chat-area');
if (chat) chat.scrollTop = chat.scrollHeight;

// Poll for new responses via AJAX instead of full page reload
setInterval(async function() {
    // Don't refresh if textarea has focus
    if (document.activeElement && document.activeElement.tagName === 'TEXTAREA') return;
    try {
        var resp = await fetch(location.href, {headers: {'X-Requested-With': 'XMLHttpRequest'}});
        var html = await resp.text();
        var parser = new DOMParser();
        var doc = parser.parseFromString(html, 'text/html');
        var newChat = doc.getElementById('chat-area');
        if (newChat && chat && newChat.innerHTML !== chat.innerHTML) {
            chat.innerHTML = newChat.innerHTML;
            chat.scrollTop = chat.scrollHeight;
        }
    } catch(e) {}
}, 10000);
</script>
{% endblock %}