{# Collapsible "Ask about this run" panel for run results pages.
   Required context: assist_configured, assist_prompts, findings, run_id #}

{% if assist_configured %}
<div class="mt-6">
    <div class="collapse collapse-arrow panel"
         id="assist-panel-collapse">
        <input type="checkbox" id="assist-panel-toggle" />
        <div class="collapse-title text-sm font-semibold"
             style="color: #06b6d4; min-height: 2.5rem; padding-top: 0.6rem;">
            Ask about this run
        </div>
        <div class="collapse-content">
            <div id="assist-panel-messages" class="overflow-y-auto mb-3 space-y-2 pr-1"
                 style="max-height: 400px;">
            </div>

            <div id="assist-panel-prompts" class="flex flex-wrap gap-2 mb-3">
                {% for prompt in assist_prompts %}
                <button type="button" class="assist-chip"
                        onclick="sendPanelPrompt(this.textContent.trim())">{{ prompt }}</button>
                {% endfor %}
            </div>

            <form id="assist-panel-form" class="flex gap-2"
                  onsubmit="return handlePanelSubmit(event)">
                <input type="text" id="assist-panel-input"
                       class="input input-bordered input-sm flex-1"
                       placeholder="Ask about these findings..."
                       autocomplete="off" />
                <button type="submit" id="assist-panel-send"
                        class="btn btn-sm btn-outline btn-primary">
                    Send
                </button>
            </form>
        </div>
    </div>
</div>

<script>
(function() {
    var toggle = document.getElementById("assist-panel-toggle");
    var messagesEl = document.getElementById("assist-panel-messages");
    var inputEl = document.getElementById("assist-panel-input");
    var sendBtn = document.getElementById("assist-panel-send");
    var promptsEl = document.getElementById("assist-panel-prompts");

    var wsUrl = (location.protocol === "https:" ? "wss://" : "ws://")
                + location.host + "/ws/assist";
    var socket = null;
    var currentBubble = null;
    var currentText = "";
    var isStreaming = false;
    var connected = false;
    var findingsContext = "";

    // Build findings context from the page data
    var findingsRows = document.querySelectorAll("[data-finding-json]");
    if (findingsRows.length > 0) {
        var items = [];
        findingsRows.forEach(function(el) {
            items.push(el.dataset.findingJson);
        });
        findingsContext = "[" + items.join(",") + "]";
    }

    // Fallback: if no data attributes, use run_id as structured context
    if (!findingsContext) {
        findingsContext = JSON.stringify({run_id: {{ run_id | tojson }}});
    }

    function connectWs() {
        if (socket && (socket.readyState === WebSocket.CONNECTING
                       || socket.readyState === WebSocket.OPEN)) return;
        socket = new WebSocket(wsUrl);
        socket.onopen = function() { connected = true; };
        socket.onmessage = function(e) {
            var data = JSON.parse(e.data);
            handleMsg(data);
        };
        socket.onclose = function() {
            connected = false;
            if (isStreaming) {
                removePanelTyping();
                currentBubble = null;
                currentText = "";
                isStreaming = false;
                setPanelInputEnabled(true);
            }
            setTimeout(connectWs, 2000);
        };
        socket.onerror = function() {};
    }

    function handleMsg(data) {
        switch (data.type) {
            case "assist_token":
                if (!currentBubble) {
                    removePanelTyping();
                    currentBubble = addPanelMessage("assistant", "");
                    currentText = "";
                }
                currentText += data.token;
                currentBubble.querySelector(".chat-bubble").innerHTML = DOMPurify.sanitize(marked.parse(currentText));
                var panelCopyBtn = currentBubble.querySelector(".assist-copy-btn");
                if (panelCopyBtn) panelCopyBtn.dataset.raw = currentText;
                messagesEl.scrollTop = messagesEl.scrollHeight;
                break;
            case "assist_done":
                if (currentBubble) {
                    var copyBtn = currentBubble.querySelector(".assist-copy-btn");
                    if (copyBtn) copyBtn.dataset.raw = currentText;
                }
                currentBubble = null;
                currentText = "";
                isStreaming = false;
                setPanelInputEnabled(true);
                break;
            case "assist_error":
                removePanelTyping();
                addPanelMessage("error", data.message || "An error occurred.");
                currentBubble = null;
                currentText = "";
                isStreaming = false;
                setPanelInputEnabled(true);
                break;
        }
    }

    function makePanelCopyBtn(rawText, position) {
        var btn = document.createElement("button");
        btn.className = "assist-copy-btn " + position;
        btn.type = "button";
        btn.title = "Copy";
        btn.setAttribute("aria-label", "Copy message");
        btn.dataset.raw = rawText;
        btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"'
            + ' viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"'
            + ' stroke-linecap="round" stroke-linejoin="round">'
            + '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>'
            + '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
        btn.onclick = function() {
            navigator.clipboard.writeText(btn.dataset.raw);
            btn.classList.add("copied");
            setTimeout(function() { btn.classList.remove("copied"); }, 1500);
        };
        return btn;
    }

    function addPanelMessage(role, text) {
        var wrapper = document.createElement("div");
        var bubble = document.createElement("div");
        if (role === "user") {
            wrapper.className = "chat chat-end";
            bubble.className = "chat-bubble chat-bubble-primary text-sm";
        } else if (role === "assistant") {
            wrapper.className = "chat chat-start";
            bubble.className = "chat-bubble assist-bubble text-sm";
        } else {
            wrapper.className = "chat chat-start";
            bubble.className = "chat-bubble chat-bubble-error text-sm";
        }
        if (role === "assistant") {
            bubble.innerHTML = text ? DOMPurify.sanitize(marked.parse(text)) : "";
        } else {
            bubble.textContent = text;
        }
        var container = document.createElement("div");
        container.className = "assist-bubble-wrap";
        container.appendChild(bubble);
        if (role === "user") {
            container.appendChild(makePanelCopyBtn(text, "bottom-right"));
        } else if (role === "assistant") {
            container.appendChild(makePanelCopyBtn(text, "bottom-left"));
        }
        wrapper.appendChild(container);
        messagesEl.appendChild(wrapper);
        messagesEl.scrollTop = messagesEl.scrollHeight;
        return wrapper;
    }

    function addPanelTyping() {
        var wrapper = document.createElement("div");
        wrapper.className = "chat chat-start";
        wrapper.id = "assist-panel-typing";
        var bubble = document.createElement("div");
        bubble.className = "chat-bubble assist-bubble text-sm";
        bubble.innerHTML = '<span class="assist-typing-dots">'
            + '<span></span><span></span><span></span></span>';
        wrapper.appendChild(bubble);
        messagesEl.appendChild(wrapper);
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }

    function removePanelTyping() {
        var el = document.getElementById("assist-panel-typing");
        if (el) el.remove();
    }

    function setPanelInputEnabled(enabled) {
        inputEl.disabled = !enabled;
        sendBtn.disabled = !enabled;
        if (enabled) inputEl.focus();
    }

    function sendPanelMessage(text) {
        if (!text || isStreaming) return false;
        if (!socket || socket.readyState !== WebSocket.OPEN) return false;

        isStreaming = true;
        setPanelInputEnabled(false);
        if (promptsEl) promptsEl.style.display = "none";

        addPanelMessage("user", text);
        addPanelTyping();

        socket.send(JSON.stringify({
            type: "assist_query",
            message: text,
            context: {findings: findingsContext}
        }));
        return true;
    }

    window.handlePanelSubmit = function(e) {
        e.preventDefault();
        var text = inputEl.value.trim();
        if (!text) return false;
        if (sendPanelMessage(text)) {
            inputEl.value = "";
        }
        return false;
    };

    window.sendPanelPrompt = function(text) {
        sendPanelMessage(text);
    };

    // Connect when panel is opened
    toggle.addEventListener("change", function() {
        if (toggle.checked && !connected) {
            connectWs();
        }
        if (toggle.checked) {
            setTimeout(function() { inputEl.focus(); }, 100);
        }
    });
})();
</script>
{% else %}
<div class="mt-6">
    <div class="panel p-4">
        <p class="text-sm" style="opacity: 0.5;">
            <a href="/settings#assistant" style="color: #06b6d4; text-decoration: underline;">Configure the assistant</a>
            to ask questions about this run.
        </p>
    </div>
</div>
{% endif %}