{% extends "base.html" %}
{% block title %}q-ai — Assistant{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto px-6 py-6 flex flex-col" style="height: calc(100vh - 68px);">

{% if not assist_configured %}
    {# ── Setup card: pick provider & model ── #}
    <div class="flex-1 flex items-center justify-center">
        <div class="panel p-8 w-full max-w-md">
            <h2 class="text-xl font-semibold mb-2" style="color: #f1f5f9;">Configure Assistant</h2>
            <p class="text-sm mb-6" style="opacity: 0.7;">
                Select a provider and model to start using the assistant.
            </p>
            <form id="assist-setup-form"
                  class="grid grid-cols-1 gap-4"
                  onsubmit="return saveAssistSetup(event)">

                {% set selector_id = "assist-setup" %}
                {% set providers = assist_providers %}
                {% include "partials/model_selector.html" %}

                <div id="assist-setup-apikey-field" class="form-control" style="display:none;">
                    <label class="label"><span class="label-text">API Key</span></label>
                    <input type="password" id="assist-setup-apikey"
                           class="input input-bordered input-sm w-full"
                           placeholder="sk-...">
                    <p id="assist-setup-apikey-hint" class="text-xs mt-1" style="opacity: 0.5;"></p>
                </div>

                <div id="assist-setup-baseurl-field" class="form-control" style="display:none;">
                    <label class="label"><span class="label-text">Base URL</span></label>
                    <input type="text" id="assist-setup-baseurl"
                           class="input input-bordered input-sm w-full"
                           placeholder="http://localhost:11434">
                </div>

                <div class="flex items-center gap-2 mt-2">
                    <button type="submit" class="btn btn-sm btn-outline btn-primary">
                        Save &amp; Start
                    </button>
                    <span id="assist-setup-msg" class="text-xs"></span>
                </div>
            </form>
        </div>
    </div>

    <script>
    (function() {
        var SID = "assist-setup";
        var ASSIST_SETUP_PROVIDERS = {{ assist_providers | tojson }};
        var providerMap = {};
        ASSIST_SETUP_PROVIDERS.forEach(function(p) { providerMap[p.name] = p; });

        var provSel = document.getElementById(SID + "-provider");
        var keyI = document.getElementById(SID + "-apikey");
        var urlI = document.getElementById(SID + "-baseurl");

        if (provSel) {
            provSel.addEventListener("change", function() {
                toggleSetupFields(this.value);
            });
        }

        /* Trigger model fetch when the relevant credential field changes. */
        if (keyI) {
            keyI.addEventListener("change", function() {
                var info = providerMap[(provSel && provSel.value) || ""] || {};
                if (info.type === "cloud" && this.value.trim()) {
                    qaiRefetchModels(SID);
                }
            });
        }
        if (urlI) {
            urlI.addEventListener("change", function() {
                var info = providerMap[(provSel && provSel.value) || ""] || {};
                if ((info.type === "local" || info.type === "custom") && this.value.trim()) {
                    qaiRefetchModels(SID);
                }
            });
        }

        function toggleSetupFields(name) {
            var info = providerMap[name] || {};
            var ptype = info.type || "";
            var keyF = document.getElementById(SID + "-apikey-field");
            var urlF = document.getElementById(SID + "-baseurl-field");
            var hint = document.getElementById(SID + "-apikey-hint");

            var isCloud = ptype === "cloud";
            var isLocal = ptype === "local";
            var isCustom = ptype === "custom";
            var isAggregator = isCloud && !info.has_models_endpoint;

            /* Clear values from previous provider selection. */
            keyI.value = "";
            urlI.value = "";

            /* Aggregators need an API key but not the models endpoint. */
            keyF.style.display = (isCloud || isLocal || isCustom) ? "" : "none";
            urlF.style.display = (isLocal || isCustom) ? "" : "none";

            if (isCloud) {
                keyI.required = !isAggregator;
                hint.textContent = "Required";
            } else {
                keyI.required = false;
                hint.textContent = isLocal || isCustom ? "Optional" : "";
            }
            if (isLocal && info.default_base_url) {
                urlI.value = info.default_base_url;
            }
            if (isCustom) {
                urlI.required = true;
            } else {
                urlI.required = false;
            }

            /* Fetch models or show context-aware placeholder. */
            if (isLocal && info.default_base_url) {
                qaiRefetchModels(SID);
            } else if (isAggregator || isCustom) {
                qaiRefetchModels(SID);
            } else if (isCloud) {
                qaiResetModelArea(SID, "Enter API key to load models");
            } else if (isLocal) {
                qaiResetModelArea(SID, "Enter URL to load models");
            } else {
                qaiResetModelArea(SID, "Select a provider first");
            }
        }

        window.saveAssistSetup = function(e) {
            e.preventDefault();
            var form = document.getElementById("assist-setup-form");
            var fd = new FormData(form);
            var provider = fd.get("provider") || "";
            var model = fd.get("model") || "";
            var msg = document.getElementById("assist-setup-msg");

            if (!provider || !model) {
                msg.className = "text-xs text-error";
                msg.textContent = "Select a provider and model.";
                return false;
            }

            var apiKey = document.getElementById("assist-setup-apikey").value.trim();
            var baseUrl = document.getElementById("assist-setup-baseurl").value.trim();

            var info = providerMap[provider] || {};
            if (info.type === "cloud" && !apiKey) {
                msg.className = "text-xs text-error";
                msg.textContent = "API key is required for cloud providers.";
                return false;
            }
            if (info.type === "custom" && !baseUrl) {
                msg.className = "text-xs text-error";
                msg.textContent = "Base URL is required for custom providers.";
                return false;
            }

            var settingsData = {
                "assist.provider": provider,
                "assist.model": model,
                "assist.base_url": baseUrl
            };

            function saveSettings() {
                return fetch("/api/settings/defaults", {
                    method: "POST",
                    headers: {"Content-Type": "application/json"},
                    body: JSON.stringify(settingsData)
                }).then(function(r) { return r.json(); });
            }

            function saveCredential() {
                if (!apiKey) return Promise.resolve({status: "saved"});
                return fetch("/api/settings/assist/credential", {
                    method: "POST",
                    headers: {"Content-Type": "application/json"},
                    body: JSON.stringify({provider: provider, api_key: apiKey})
                }).then(function(r) { return r.json(); });
            }

            Promise.all([saveSettings(), saveCredential()]).then(function(results) {
                var settingsOk = results[0].status === "saved";
                var credOk = results[1].status === "saved";
                if (settingsOk && credOk) {
                    window.location.reload();
                } else {
                    msg.className = "text-xs text-error";
                    msg.textContent = results[0].detail || results[1].detail || "Error saving.";
                }
            }).catch(function() {
                msg.className = "text-xs text-error";
                msg.textContent = "Request failed.";
            });
            return false;
        };
    })();
    </script>

{% else %}
    {# ── Chat interface ── #}
    <div class="flex-1 relative overflow-hidden">
        <div id="assist-chat-messages" class="h-full overflow-y-auto space-y-2 pr-1" style="padding-bottom: 1rem;">
            {# Messages rendered here by JS #}
            <div id="assist-welcome" class="flex items-center justify-center h-full">
                <p class="text-2xl font-medium" style="color: #94a3b8;">
                    Ask about findings, plan workflows, or explore capabilities.
                </p>
            </div>
        </div>
        <button type="button" id="assist-jump-bottom"
                class="assist-jump-bottom"
                aria-label="Jump to bottom"
                onclick="document.getElementById('assist-chat-messages').scrollTop = document.getElementById('assist-chat-messages').scrollHeight"
                style="display: none;">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                 viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="6 9 12 15 18 9"/>
            </svg>
        </button>
    </div>

    {# ── Streaming status bar ── #}
    <div id="assist-streaming-bar" class="assist-streaming-bar" style="display: none;">
        <span class="assist-typing-dots"><span></span><span></span><span></span></span>
        <span>Thinking...</span>
    </div>

    {# ── Suggested prompts ── #}
    <div id="assist-prompts" class="flex flex-wrap gap-2 mb-3" style="padding-left: 44px;">
        {% for prompt in suggested_prompts %}
        <button type="button" class="assist-chip"
                onclick="sendSuggestedPrompt(this.textContent.trim())">{{ prompt }}</button>
        {% endfor %}
    </div>

    {# ── Input area ── #}
    <form id="assist-input-form" class="relative" onsubmit="return handleAssistSubmit(event)">
        <button type="button" id="assist-new-chat-btn"
                class="btn btn-sm btn-outline btn-square assist-new-chat-btn"
                title="New Chat"
                aria-label="New chat"
                onclick="resetChat()"
                style="position: absolute; left: 0; top: 50%; transform: translateY(-50%);">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
            </svg>
        </button>
        <input type="text" id="assist-input"
               class="input input-bordered input-sm w-full"
               placeholder="Ask the assistant..."
               autocomplete="off"
               style="padding-left: 44px; padding-right: 68px;" />
        <button type="submit" id="assist-send-btn"
                class="btn btn-sm btn-outline btn-primary"
                style="position: absolute; right: 0; top: 50%; transform: translateY(-50%);">
            Send
        </button>
    </form>

    <script>
    (function() {
        var messagesEl = document.getElementById("assist-chat-messages");
        var inputEl = document.getElementById("assist-input");
        var sendBtn = document.getElementById("assist-send-btn");
        var promptsEl = document.getElementById("assist-prompts");
        var streamingBar = document.getElementById("assist-streaming-bar");
        var wsUrl = (location.protocol === "https:" ? "wss://" : "ws://")
                    + location.host + "/ws/assist";
        var socket = null;
        var currentAssistantBubble = null;
        var currentAssistantText = "";
        var isStreaming = false;
        var currentStreamId = 0;
        var activeStreamId = 0;

        function connectWs() {
            socket = new WebSocket(wsUrl);
            socket.onopen = function() {};
            socket.onmessage = function(e) {
                var data = JSON.parse(e.data);
                handleWsMessage(data);
            };
            socket.onclose = function() {
                if (isStreaming) {
                    removeTypingIndicator();
                    currentAssistantBubble = null;
                    currentAssistantText = "";
                    isStreaming = false;
                    streamingBar.style.display = "none";
                    setInputEnabled(true);
                }
                setTimeout(connectWs, 2000);
            };
            socket.onerror = function() {};
        }

        function handleWsMessage(data) {
            switch (data.type) {
                case "assist_token":
                    if (activeStreamId !== currentStreamId) break;
                    if (!currentAssistantBubble) {
                        removeTypingIndicator();
                        currentAssistantBubble = addMessage("assistant", "");
                        currentAssistantText = "";
                    }
                    currentAssistantText += data.token;
                    var contentEl = currentAssistantBubble.querySelector(".chat-bubble");
                    contentEl.innerHTML = DOMPurify.sanitize(marked.parse(currentAssistantText));
                    var copyBtn = currentAssistantBubble.querySelector(".assist-copy-btn");
                    if (copyBtn) copyBtn.dataset.raw = currentAssistantText;
                    if (isNearBottom()) {
                        scrollToBottom();
                    } else {
                        jumpBtn.style.display = "block";
                    }
                    break;
                case "assist_done":
                    if (activeStreamId !== currentStreamId) break;
                    if (currentAssistantBubble) {
                        var doneBtn = currentAssistantBubble.querySelector(".assist-copy-btn");
                        if (doneBtn) doneBtn.dataset.raw = currentAssistantText;
                    }
                    currentAssistantBubble = null;
                    currentAssistantText = "";
                    isStreaming = false;
                    streamingBar.style.display = "none";
                    setInputEnabled(true);
                    break;
                case "assist_error":
                    if (activeStreamId !== currentStreamId) break;
                    removeTypingIndicator();
                    addMessage("error", data.message || "An error occurred.");
                    currentAssistantBubble = null;
                    currentAssistantText = "";
                    isStreaming = false;
                    streamingBar.style.display = "none";
                    setInputEnabled(true);
                    break;
                case "assist_reset_done":
                    break;
            }
        }

        function makeCopyBtn(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 addMessage(role, text) {
            var wrapper = document.createElement("div");
            if (role === "user") {
                wrapper.className = "chat chat-end";
                var container = document.createElement("div");
                container.className = "assist-bubble-wrap";
                var bubble = document.createElement("div");
                bubble.className = "chat-bubble chat-bubble-primary";
                bubble.textContent = text;
                container.appendChild(bubble);
                container.appendChild(makeCopyBtn(text, "bottom-right"));
                wrapper.appendChild(container);
            } else if (role === "assistant") {
                wrapper.className = "chat chat-start";
                var container = document.createElement("div");
                container.className = "assist-bubble-wrap";
                var bubble = document.createElement("div");
                bubble.className = "chat-bubble assist-bubble";
                bubble.innerHTML = text ? DOMPurify.sanitize(marked.parse(text)) : "";
                container.appendChild(bubble);
                container.appendChild(makeCopyBtn(text, "bottom-left"));
                wrapper.appendChild(container);
            } else {
                wrapper.className = "chat chat-start";
                var bubble = document.createElement("div");
                bubble.className = "chat-bubble chat-bubble-error";
                bubble.textContent = text;
                wrapper.appendChild(bubble);
            }
            messagesEl.appendChild(wrapper);
            scrollToBottom();
            return wrapper;
        }

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

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

        function scrollToBottom() {
            messagesEl.scrollTop = messagesEl.scrollHeight;
        }

        function isNearBottom() {
            var gap = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight;
            return gap <= 120;
        }

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

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

            currentStreamId++;
            activeStreamId = currentStreamId;
            isStreaming = true;
            setInputEnabled(false);

            // Hide prompts and welcome after first message
            if (promptsEl) promptsEl.style.display = "none";
            var welcome = document.getElementById("assist-welcome");
            if (welcome) welcome.remove();

            addMessage("user", text);
            addTypingIndicator();
            streamingBar.style.display = "";

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

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

        window.sendSuggestedPrompt = function(text) {
            sendMessage(text);
        };

        window.resetChat = function() {
            currentStreamId++;
            messagesEl.innerHTML = '<div id="assist-welcome" class="flex items-center justify-center h-full">'
                + '<p class="text-2xl font-medium" style="color: #94a3b8;">'
                + 'Ask about findings, plan workflows, or explore capabilities.</p></div>';
            currentAssistantBubble = null;
            currentAssistantText = "";
            isStreaming = false;
            streamingBar.style.display = "none";
            jumpBtn.style.display = "none";
            setInputEnabled(true);
            if (promptsEl) promptsEl.style.display = "";
            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send(JSON.stringify({type: "assist_reset"}));
            }
        };

        var jumpBtn = document.getElementById("assist-jump-bottom");
        messagesEl.addEventListener("scroll", function() {
            var hasMessages = messagesEl.querySelector(".chat") !== null;
            var gap = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight;
            jumpBtn.style.display = (hasMessages && gap > 120) ? "" : "none";
        });

        connectWs();
        inputEl.focus();
    })();
    </script>
{% endif %}
</div>
{% endblock %}