{% extends "base.html" %}
{% block title %}Chat — AI Agentic Hub{% endblock %}
{% block extra_style %}
    #chat-box { height: 500px; overflow-y: auto; background: #0f1117; border: 1px solid #2a2b35; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
    .msg { margin-bottom: 12px; }
    .msg-user { text-align: right; }
    .msg-user .bubble { background: #7c5cfc; display: inline-block; padding: 8px 14px; border-radius: 12px 12px 0 12px; max-width: 70%; }
    .msg-assistant .bubble { background: #1a1b23; border: 1px solid #2a2b35; display: inline-block; padding: 8px 14px; border-radius: 12px 12px 12px 0; max-width: 70%; white-space: pre-wrap; }
    .msg-tool { font-size: 12px; color: #8b8d98; padding: 4px 0; }
    .msg-tool .tool-name { color: #e5c07b; }
    #input-row { display: flex; gap: 8px; }
    #input-row input { flex: 1; }
    .typing-indicator { color: #8b8d98; font-size: 12px; padding: 4px 0; }
{% endblock %}
{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
    <h1 id="agent-title">Chat</h1>
    <div>
        <button class="btn btn-danger btn-sm" onclick="clearChat()">Clear History</button>
        <a href="/agents" class="btn btn-sm" style="background:#2a2b35; color:#e1e1e6; text-decoration:none;">Back</a>
    </div>
</div>

<div id="chat-box"></div>

<div id="input-row">
    <input id="user-input" placeholder="Type your message..." onkeydown="if(event.key==='Enter')sendMessage()">
    <button class="btn btn-primary" id="send-btn" onclick="sendMessage()">Send</button>
</div>

{% endblock %}
{% block scripts %}
<script>
const agentId = {{ agent_id }};
let currentBubble = null;

async function loadAgent() {
    const resp = await fetch(`/api/agents/${agentId}`);
    const agent = await resp.json();
    document.getElementById('agent-title').textContent = `Chat with ${agent.name}`;
}

function scrollToBottom() {
    const box = document.getElementById('chat-box');
    box.scrollTop = box.scrollHeight;
}

async function sendMessage() {
    const input = document.getElementById('user-input');
    const sendBtn = document.getElementById('send-btn');
    const message = input.value.trim();
    if (!message) return;

    input.value = '';
    sendBtn.disabled = true;
    sendBtn.textContent = '...';

    const box = document.getElementById('chat-box');

    box.innerHTML += `<div class="msg msg-user"><div class="bubble">${message}</div></div>`;
    scrollToBottom();

    box.innerHTML += `<div class="msg msg-assistant"><div class="bubble" id="stream-bubble"></div></div>`;
    currentBubble = document.getElementById('stream-bubble');

    try {
        const resp = await fetch(`/api/agents/${agentId}/chat/stream`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ message }),
        });

        const reader = resp.body.getReader();
        const decoder = new TextDecoder();
        let buffer = '';
        let toolCallsHTML = '';

        while (true) {
            const { done, value } = await reader.read();
            if (done) break;

            buffer += decoder.decode(value, { stream: true });
            const lines = buffer.split('\n');
            buffer = lines.pop();

            for (const line of lines) {
                if (!line.startsWith('data: ')) continue;
                try {
                    const data = JSON.parse(line.slice(6));

                    if (data.type === 'token') {
                        currentBubble.textContent += data.content;
                        scrollToBottom();
                    } else if (data.type === 'tool_call') {
                        const toolDiv = document.createElement('div');
                        toolDiv.className = 'msg-tool';
                        toolDiv.innerHTML = `<span class="tool-name">&rarr; ${data.tool}</span>(${JSON.stringify(data.args)})`;
                        const bubbleParent = currentBubble.closest('.msg');
                        if (bubbleParent) {
                            box.insertBefore(toolDiv, bubbleParent);
                        } else {
                            box.appendChild(toolDiv);
                        }
                        scrollToBottom();
                    } else if (data.type === 'tool_result') {
                        const toolDivs = box.querySelectorAll('.msg-tool');
                        const lastTool = toolDivs[toolDivs.length - 1];
                        if (lastTool) {
                            lastTool.innerHTML += `<div style="margin-left: 16px; color: #6b6d78;">${data.result.substring(0, 200)}</div>`;
                        }
                        scrollToBottom();
                    } else if (data.type === 'error') {
                        currentBubble.innerHTML = `<span style="color: #e5484d;">${data.content}</span>`;
                        scrollToBottom();
                    } else if (data.type === 'done') {
                        if (!currentBubble.textContent && data.content) {
                            currentBubble.textContent = data.content;
                        }
                        scrollToBottom();
                    }
                } catch (e) {}
            }
        }
    } catch (e) {
        if (currentBubble) {
            currentBubble.innerHTML = `<span style="color: #e5484d;">Error: ${e.message}</span>`;
        }
    }

    currentBubble = null;
    sendBtn.disabled = false;
    sendBtn.textContent = 'Send';
    input.focus();
}

async function clearChat() {
    await fetch(`/api/agents/${agentId}/clear`, { method: 'POST' });
    document.getElementById('chat-box').innerHTML = '';
}

loadAgent();
document.getElementById('user-input').focus();
</script>
{% endblock %}