{% extends "base.html" %}

{% block title %}agentbridge chat{% endblock %}

{% block page_styles %}
        :root {
            --danger-bg: #fff1f0;
            --shadow: 0 18px 50px rgba(18, 27, 27, 0.08);
        }

        button {
            border: 0;
            cursor: pointer;
        }

        .app {
            grid-template-rows: var(--header-height) 1fr;
        }

        .header-actions {
            min-width: 0;
            justify-content: flex-end;
        }

        .field {
            height: 36px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--surface);
            color: var(--text);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0 10px;
        }

        .field span {
            color: var(--muted);
            font-size: 12px;
            white-space: nowrap;
        }

        .field input,
        .field select {
            height: 30px;
            min-width: 0;
            border: 0;
            outline: 0;
            color: var(--text);
            background: transparent;
        }

        .field-model {
            flex: 0 1 310px;
        }

        .field-model select {
            width: 100%;
            font-size: 12px;
        }

        .status {
            min-width: 82px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 7px 10px;
            color: var(--muted);
            background: var(--surface);
            font-size: 12px;
            white-space: nowrap;
        }

        .status::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--muted);
        }

        .status.ok {
            color: var(--ok);
            border-color: rgba(27, 128, 106, 0.28);
            background: rgba(27, 128, 106, 0.06);
        }

        .status.ok::before { background: var(--ok); }

        .status.error {
            color: var(--danger);
            border-color: var(--danger-border);
            background: var(--danger-bg);
        }

        .status.error::before { background: var(--danger); }

        .main {
            min-height: 0;
            display: grid;
            grid-template-rows: 1fr auto;
            width: min(980px, 100%);
            margin: 0 auto;
            padding: 22px 18px;
            gap: 16px;
        }

        .messages {
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding-right: 4px;
        }

        .empty {
            margin: auto;
            color: var(--muted);
            text-align: center;
            line-height: 1.5;
        }

        .empty strong {
            display: block;
            margin-bottom: 4px;
            color: var(--text);
            font-size: 16px;
        }

        .message {
            max-width: 760px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            padding: 12px 14px;
            box-shadow: 0 1px 0 rgba(18, 27, 27, 0.03);
        }

        .message.user {
            align-self: flex-end;
            background: #eef8f6;
            border-color: rgba(22, 133, 117, 0.22);
        }

        .message.assistant {
            align-self: flex-start;
        }

        .message.error {
            align-self: stretch;
            max-width: none;
            border-color: var(--danger-border);
            background: var(--danger-bg);
        }

        .message-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 7px;
            color: var(--muted);
            font-size: 12px;
        }

        .message-role {
            font-weight: 650;
        }

        .message-actions {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .message-info {
            width: 24px;
            height: 24px;
            border: 1px solid var(--border);
            border-radius: 6px;
            display: none;
            align-items: center;
            justify-content: center;
            color: var(--muted);
            background: var(--surface);
            text-decoration: none;
        }

        .message-info:hover {
            color: var(--accent-strong);
            border-color: rgba(22, 133, 117, 0.3);
            background: rgba(22, 133, 117, 0.06);
        }

        .message-info.available {
            display: inline-flex;
        }

        .model-badge {
            min-width: 0;
            max-width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--surface-muted);
            color: var(--muted);
            padding: 3px 7px;
            font-family: var(--mono);
            font-size: 11px;
        }

        .message-body {
            white-space: pre-wrap;
            line-height: 1.5;
        }

        .message-body.typing {
            min-width: 52px;
            white-space: normal;
        }

        .typing-indicator {
            height: 20px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .typing-indicator span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--muted);
            animation: typingPulse 1s ease-in-out infinite;
        }

        .typing-indicator span:nth-child(2) {
            animation-delay: 0.14s;
        }

        .typing-indicator span:nth-child(3) {
            animation-delay: 0.28s;
        }

        .message-body.markdown {
            white-space: normal;
        }

        .message-body.markdown > :first-child {
            margin-top: 0;
        }

        .message-body.markdown > :last-child {
            margin-bottom: 0;
        }

        .message-body.markdown p,
        .message-body.markdown ul,
        .message-body.markdown ol,
        .message-body.markdown blockquote,
        .message-body.markdown pre {
            margin: 0 0 10px;
        }

        .message-body.markdown ul,
        .message-body.markdown ol {
            padding-left: 22px;
        }

        .message-body.markdown li + li {
            margin-top: 4px;
        }

        .message-body.markdown h1,
        .message-body.markdown h2,
        .message-body.markdown h3 {
            margin: 14px 0 8px;
            color: var(--text);
            line-height: 1.25;
        }

        .message-body.markdown h1 {
            font-size: 18px;
        }

        .message-body.markdown h2 {
            font-size: 16px;
        }

        .message-body.markdown h3 {
            font-size: 14px;
        }

        .message-body.markdown blockquote {
            border-left: 3px solid var(--border-strong);
            padding-left: 12px;
            color: var(--muted);
        }

        .message-body.markdown a {
            color: var(--accent);
            text-decoration: none;
        }

        .message-body.markdown a:hover {
            text-decoration: underline;
        }

        .message-body.markdown code {
            border: 1px solid var(--border);
            border-radius: 5px;
            background: var(--surface-muted);
            padding: 1px 4px;
            font-family: var(--mono);
            font-size: 12px;
        }

        .message-body.markdown pre code {
            display: block;
            border: 0;
            background: transparent;
            padding: 0;
            white-space: pre;
        }

        .message-files {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
        }

        .file-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            max-width: 240px;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 4px 7px;
            background: var(--surface);
            color: var(--muted);
            font-size: 12px;
        }

        .file-pill span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .error-title {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--danger);
            font-weight: 700;
        }

        .error-summary {
            margin: 2px 0 10px;
            color: var(--text);
        }

        .error-actions {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }

        .error-details {
            margin-top: 10px;
            border-top: 1px solid var(--danger-border);
            padding-top: 10px;
        }

        .error-details summary {
            width: fit-content;
            cursor: pointer;
            color: var(--danger);
            font-size: 12px;
        }

        pre {
            margin: 10px 0 0;
            max-height: 240px;
            overflow: auto;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: #fbfbfb;
            padding: 10px;
            color: #263030;
            font-family: var(--mono);
            font-size: 12px;
            line-height: 1.45;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .composer {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .drop-hint {
            display: none;
            margin: 10px 10px 0;
            border: 1px dashed rgba(22, 133, 117, 0.5);
            border-radius: 7px;
            padding: 10px;
            color: var(--accent-strong);
            background: rgba(22, 133, 117, 0.06);
            text-align: center;
            font-size: 13px;
        }

        .composer.dragging .drop-hint {
            display: block;
        }

        .attached-files {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 10px 10px 0;
        }

        .remove-file {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: transparent;
            color: var(--muted);
            line-height: 18px;
            padding: 0;
        }

        .remove-file:hover {
            background: var(--surface-muted);
            color: var(--text);
        }

        .input-row {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 10px;
            padding: 6px 10px 10px;
        }

        textarea {
            width: 100%;
            min-height: 24px;
            max-height: 180px;
            resize: none;
            overflow-y: hidden;
            border: 0;
            outline: 0;
            color: var(--text);
            line-height: 1.5;
            padding: 1px 0;
            box-sizing: border-box;
        }

        textarea::placeholder {
            color: #9aa2a2;
        }

        .icon-button,
        .secondary,
        .primary {
            height: 36px;
            border-radius: 7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            white-space: nowrap;
        }

        .icon-button {
            width: 36px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--muted);
        }

        .icon-button:hover {
            color: var(--text);
            background: var(--surface-muted);
        }

        .primary {
            width: 40px;
            min-width: 40px;
            background: var(--accent);
            color: #ffffff;
            padding: 0;
            font-weight: 650;
        }

        .primary svg {
            flex: none;
        }

        .primary:hover {
            background: var(--accent-strong);
        }

        .primary:disabled {
            cursor: not-allowed;
            opacity: 0.62;
        }

        .secondary {
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--muted);
            padding: 0 10px;
            font-size: 12px;
        }

        .secondary:hover {
            color: var(--text);
            background: var(--surface-muted);
        }

        .hidden-input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        @keyframes typingPulse {
            0%, 70%, 100% { opacity: 0.35; transform: translateY(0); }
            35% { opacity: 1; transform: translateY(-2px); }
        }

        @media (max-width: 1180px) {
            body { overflow: auto; }
            .app {
                min-height: 100vh;
                height: auto;
                grid-template-rows: auto 1fr;
            }
            .topbar {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                height: auto;
                min-height: var(--header-height);
                padding: 12px 14px;
            }
            .main-nav,
            .header-actions {
                justify-self: stretch;
            }
            .header-actions {
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: stretch;
            }
            .field-model {
                min-width: 260px;
                max-width: none;
                flex: 1 1 260px;
            }
            .status {
                flex: 0 0 auto;
            }
            .main {
                min-height: calc(100vh - 178px);
            }
        }

        @media (max-width: 820px) {
            .brand,
            .status {
                min-width: 0;
            }
            .field-model,
            .status {
                width: 100%;
                flex: 1 1 100%;
            }
            .main {
                min-height: calc(100vh - 160px);
                padding: 14px;
            }
            .nav-item {
                min-width: 0;
                flex: 1;
            }
            .input-row {
                grid-template-columns: auto minmax(0, 1fr) auto;
            }
            .secondary {
                width: 100%;
            }
        }
{% endblock %}

{% block header_actions %}
    <input id="base-url" type="hidden" value="/api/v1">
    <label class="field field-model">
        <span>Model</span>
        <select id="model">
            {% for model in available_models %}
            <option value="{{ model.slug }}"{% if model.slug == default_model %} selected{% endif %}>{{ model.slug }}</option>
            {% endfor %}
        </select>
    </label>
    <div id="status" class="status">Checking</div>
{% endblock %}

{% block content %}
        <main class="main">
            <section id="messages" class="messages" aria-live="polite">
                <div class="empty">
                    <strong>Send a test message</strong>
                    Use a model namespace, attach files if needed, and inspect any server error inline.
                </div>
            </section>

            <section id="composer" class="composer">
                <div class="drop-hint">Drop files to attach</div>
                <div id="attached-files" class="attached-files"></div>
                <div class="input-row">
                    <button id="attach-button" class="icon-button" title="Attach files" type="button" aria-label="Attach files">
                        <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" aria-hidden="true">
                            <path d="M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
                        </svg>
                    </button>
                    <textarea id="prompt" placeholder="Send a test message..." rows="1"></textarea>
                    <button id="send" class="primary" type="button" aria-label="Send message" title="Send message">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="m5 12 7-7 7 7"></path>
                            <path d="M12 19V5"></path>
                        </svg>
                    </button>
                </div>
                <input id="file-input" class="hidden-input" type="file" multiple accept="image/*,application/pdf,text/plain,.txt">
            </section>
        </main>
{% endblock %}

{% block scripts %}
    <script>
        (function() {
            var baseUrlEl = document.getElementById("base-url");
            var modelEl = document.getElementById("model");
            var statusEl = document.getElementById("status");
            var messagesEl = document.getElementById("messages");
            var composerEl = document.getElementById("composer");
            var attachedFilesEl = document.getElementById("attached-files");
            var fileInputEl = document.getElementById("file-input");
            var attachButtonEl = document.getElementById("attach-button");
            var promptEl = document.getElementById("prompt");
            var sendEl = document.getElementById("send");
            var attachedFiles = [];
            var conversationMessages = [];
            var renderedMessages = [];
            var chatStateKey = "agentbridge.chat.state.v1";

            function endpoint(path) {
                return baseUrlEl.value.replace(/\/$/, "") + path;
            }

            function setStatus(kind, label) {
                statusEl.classList.remove("ok", "error");
                if (kind) statusEl.classList.add(kind);
                statusEl.textContent = label;
            }

            function autosizePrompt() {
                promptEl.style.height = "auto";
                var maxHeight = 180;
                var nextHeight = Math.min(promptEl.scrollHeight, maxHeight);
                promptEl.style.height = nextHeight + "px";
                promptEl.style.overflowY = promptEl.scrollHeight > maxHeight ? "auto" : "hidden";
            }

            function clearEmptyState() {
                var empty = messagesEl.querySelector(".empty");
                if (empty) empty.remove();
            }

            function escapeHtml(value) {
                return String(value)
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#39;");
            }

            function safeLinkUrl(value) {
                var url = String(value || "").trim();
                return /^(https?:\/\/|mailto:)/i.test(url) ? url : "#";
            }

            function renderInlineMarkdown(text) {
                var codeTokens = [];
                var html = escapeHtml(text).replace(/`([^`]+)`/g, function(match, code) {
                    var token = "\u0000CODE" + codeTokens.length + "\u0000";
                    codeTokens.push("<code>" + code + "</code>");
                    return token;
                });

                html = html.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, function(match, label, url) {
                    var href = escapeHtml(safeLinkUrl(url));
                    var rel = href === "#" ? "" : " rel=\"noreferrer\" target=\"_blank\"";
                    return "<a href=\"" + href + "\"" + rel + ">" + label + "</a>";
                });
                html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
                html = html.replace(/\*([^*]+)\*/g, "<em>$1</em>");

                codeTokens.forEach(function(tokenHtml, index) {
                    html = html.replace("\u0000CODE" + index + "\u0000", tokenHtml);
                });
                return html;
            }

            function markdownToHtml(markdown) {
                var lines = String(markdown || "").replace(/\r\n?/g, "\n").split("\n");
                var html = [];
                var paragraph = [];
                var listItems = [];
                var listType = null;
                var codeLines = [];
                var inCode = false;

                function flushParagraph() {
                    if (!paragraph.length) return;
                    html.push("<p>" + renderInlineMarkdown(paragraph.join(" ")) + "</p>");
                    paragraph = [];
                }

                function flushList() {
                    if (!listItems.length) return;
                    html.push("<" + listType + ">" + listItems.join("") + "</" + listType + ">");
                    listItems = [];
                    listType = null;
                }

                function flushCode() {
                    html.push("<pre><code>" + escapeHtml(codeLines.join("\n")) + "</code></pre>");
                    codeLines = [];
                }

                lines.forEach(function(line) {
                    var fenceMatch = line.match(/^```/);
                    var headingMatch = line.match(/^(#{1,3})\s+(.+)$/);
                    var listMatch = line.match(/^\s*([-*+]|\d+[.)])\s+(.+)$/);
                    var quoteMatch = line.match(/^>\s?(.*)$/);

                    if (fenceMatch) {
                        if (inCode) {
                            flushCode();
                            inCode = false;
                        } else {
                            flushParagraph();
                            flushList();
                            inCode = true;
                        }
                        return;
                    }

                    if (inCode) {
                        codeLines.push(line);
                        return;
                    }

                    if (!line.trim()) {
                        flushParagraph();
                        flushList();
                        return;
                    }

                    if (headingMatch) {
                        flushParagraph();
                        flushList();
                        var level = headingMatch[1].length;
                        html.push("<h" + level + ">" + renderInlineMarkdown(headingMatch[2]) + "</h" + level + ">");
                        return;
                    }

                    if (listMatch) {
                        flushParagraph();
                        var nextType = /^\d/.test(listMatch[1]) ? "ol" : "ul";
                        if (listType && listType !== nextType) flushList();
                        listType = nextType;
                        listItems.push("<li>" + renderInlineMarkdown(listMatch[2]) + "</li>");
                        return;
                    }

                    if (quoteMatch) {
                        flushParagraph();
                        flushList();
                        html.push("<blockquote>" + renderInlineMarkdown(quoteMatch[1]) + "</blockquote>");
                        return;
                    }

                    flushList();
                    paragraph.push(line.trim());
                });

                if (inCode) flushCode();
                flushParagraph();
                flushList();
                return html.join("");
            }

            function renderAssistantMarkdown(target, text) {
                target.classList.remove("typing");
                target.classList.add("markdown");
                target.removeAttribute("aria-label");
                target.removeAttribute("role");
                target.dataset.rawMarkdown = text || "";
                target.innerHTML = markdownToHtml(text);
            }

            function renderAssistantTyping(target) {
                target.classList.remove("markdown");
                target.classList.add("typing");
                target.dataset.rawMarkdown = "";
                target.setAttribute("role", "status");
                target.setAttribute("aria-label", "Assistant is typing");
                target.innerHTML = '<span class="typing-indicator" aria-hidden="true"><span></span><span></span><span></span></span>';
            }

            function removeMessageBody(target) {
                var article = target && target.closest ? target.closest(".message") : null;
                if (article) article.remove();
            }

            function messageFileNames(files) {
                return (files || []).map(function(file) {
                    return typeof file === "string" ? file : file.name;
                }).filter(Boolean);
            }

            function saveChatState() {
                try {
                    sessionStorage.setItem(chatStateKey, JSON.stringify({
                        model: modelEl.value,
                        conversationMessages: conversationMessages,
                        renderedMessages: renderedMessages
                    }));
                } catch (e) {
                    try {
                        sessionStorage.setItem(chatStateKey, JSON.stringify({
                            model: modelEl.value,
                            conversationMessages: [],
                            renderedMessages: renderedMessages
                        }));
                    } catch (fallbackError) {
                        // Attachments can exceed sessionStorage quota; keep the live chat usable.
                    }
                }
            }

            function updateRenderedMessage(target, values) {
                var article = target && target.closest ? target.closest(".message") : null;
                if (!article || article.dataset.chatIndex === undefined) return;
                var index = Number(article.dataset.chatIndex);
                if (!renderedMessages[index]) return;
                Object.keys(values).forEach(function(key) {
                    renderedMessages[index][key] = values[key];
                });
                saveChatState();
            }

            function appendAssistantDelta(target, delta) {
                renderAssistantMarkdown(target, (target.dataset.rawMarkdown || "") + delta);
                messagesEl.scrollTop = messagesEl.scrollHeight;
            }

            function appendMessage(role, text, files, options) {
                options = options || {};
                clearEmptyState();
                var article = document.createElement("article");
                article.className = "message " + role;
                if (options.persist !== false) {
                    article.dataset.chatIndex = String(renderedMessages.length);
                    renderedMessages.push({
                        role: role,
                        text: text || "",
                        model: options.model || null,
                        requestId: options.requestId || null,
                        files: messageFileNames(files)
                    });
                }
                var header = document.createElement("div");
                header.className = "message-header";

                var roleLabel = document.createElement("span");
                roleLabel.className = "message-role";
                roleLabel.textContent = role === "user" ? "You" : "Assistant";
                header.appendChild(roleLabel);

                var actions = document.createElement("div");
                actions.className = "message-actions";

                if (role === "assistant" && options.model) {
                    var modelBadge = document.createElement("span");
                    modelBadge.className = "model-badge";
                    modelBadge.title = "Model used for this response";
                    modelBadge.textContent = options.model;
                    actions.appendChild(modelBadge);
                }

                if (role === "user" || role === "assistant") {
                    var infoLink = document.createElement("a");
                    infoLink.className = "message-info";
                    infoLink.title = "View request in Monitor";
                    infoLink.setAttribute("aria-label", "View request in Monitor");
                    infoLink.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.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>';
                    actions.appendChild(infoLink);
                    article.dataset.requestLinkReady = "false";
                }

                header.appendChild(actions);

                var body = document.createElement("div");
                body.className = "message-body";
                if (role === "assistant" && options.loading) {
                    renderAssistantTyping(body);
                } else if (role === "assistant") {
                    renderAssistantMarkdown(body, text || "");
                } else {
                    body.textContent = text || "";
                }
                article.appendChild(header);
                article.appendChild(body);

                if (files && files.length) {
                    var fileWrap = document.createElement("div");
                    fileWrap.className = "message-files";
                    files.forEach(function(file) {
                        fileWrap.appendChild(filePill(file.name, false));
                    });
                    article.appendChild(fileWrap);
                }

                messagesEl.appendChild(article);
                messagesEl.scrollTop = messagesEl.scrollHeight;
                if (options.persist !== false) {
                    saveChatState();
                }
                return body;
            }

            function setMessageRequestId(target, requestId) {
                if (!target || !requestId) return;
                var article = target.closest ? target.closest(".message") : null;
                if (!article) return;
                article.dataset.requestId = requestId;
                article.dataset.requestLinkReady = "true";
                var infoLink = article.querySelector(".message-info");
                if (!infoLink) return;
                infoLink.href = "/dashboard?request_id=" + encodeURIComponent(requestId);
                infoLink.classList.add("available");
                updateRenderedMessage(target, { requestId: requestId });
            }

            function restoreChatState() {
                var raw = null;
                try {
                    raw = sessionStorage.getItem(chatStateKey);
                } catch (e) {
                    return;
                }
                if (!raw) return;
                try {
                    var state = JSON.parse(raw);
                    if (!state || !Array.isArray(state.renderedMessages)) return;
                    conversationMessages = Array.isArray(state.conversationMessages) ? state.conversationMessages : [];
                    if (state.model) {
                        var hasSavedModel = Array.from(modelEl.options).some(function(option) {
                            return option.value === state.model;
                        });
                        if (hasSavedModel) modelEl.value = state.model;
                    }
                    state.renderedMessages.forEach(function(message) {
                        var body = appendMessage(
                            message.role,
                            message.text || "",
                            (message.files || []).map(function(name) { return { name: name }; }),
                            {
                                model: message.model || null,
                                requestId: message.requestId || null,
                                persist: false
                            }
                        );
                        renderedMessages.push({
                            role: message.role,
                            text: message.text || "",
                            model: message.model || null,
                            requestId: message.requestId || null,
                            files: message.files || []
                        });
                        body.closest(".message").dataset.chatIndex = String(renderedMessages.length - 1);
                        setMessageRequestId(body, message.requestId);
                    });
                    saveChatState();
                } catch (e) {
                    try {
                        sessionStorage.removeItem(chatStateKey);
                    } catch (removeError) {}
                }
            }

            function compactJson(value) {
                try {
                    return JSON.stringify(value, null, 2);
                } catch (e) {
                    return String(value);
                }
            }

            function summarizeError(status, statusText, body, requestId) {
                var err = body && body.error ? body.error : null;
                var title = "Server error";
                var summary = status + (statusText ? " " + statusText : "");
                if (err && err.message) summary = summary + ": " + err.message;
                return {
                    title: title,
                    summary: summary,
                    details: {
                        status: status,
                        statusText: statusText || null,
                        request_id: requestId || null,
                        error: err || body || null
                    }
                };
            }

            function appendError(status, statusText, body, requestId) {
                clearEmptyState();
                var info = summarizeError(status, statusText, body, requestId);
                var article = document.createElement("article");
                article.className = "message error";

                var title = document.createElement("div");
                title.className = "error-title";
                title.textContent = info.title;

                var summary = document.createElement("div");
                summary.className = "error-summary";
                summary.textContent = info.summary;

                var details = document.createElement("details");
                details.className = "error-details";
                details.open = true;
                var detailsSummary = document.createElement("summary");
                detailsSummary.textContent = "Details";
                var pre = document.createElement("pre");
                pre.textContent = compactJson(info.details);
                details.appendChild(detailsSummary);
                details.appendChild(pre);

                var actions = document.createElement("div");
                actions.className = "error-actions";

                var retry = document.createElement("button");
                retry.className = "secondary";
                retry.type = "button";
                retry.textContent = "Retry";
                retry.addEventListener("click", sendMessage);

                var copy = document.createElement("button");
                copy.className = "secondary";
                copy.type = "button";
                copy.textContent = "Copy details";
                copy.addEventListener("click", function() {
                    navigator.clipboard.writeText(compactJson(info.details));
                });

                actions.appendChild(retry);
                actions.appendChild(copy);

                article.appendChild(title);
                article.appendChild(summary);
                article.appendChild(details);
                article.appendChild(actions);
                messagesEl.appendChild(article);
                messagesEl.scrollTop = messagesEl.scrollHeight;
                setStatus("error", "Error");
            }

            function filePill(fileName, removable, index) {
                var pill = document.createElement("span");
                pill.className = "file-pill";

                var name = document.createElement("span");
                name.textContent = fileName;
                pill.appendChild(name);

                if (removable) {
                    var remove = document.createElement("button");
                    remove.className = "remove-file";
                    remove.type = "button";
                    remove.textContent = "x";
                    remove.title = "Remove file";
                    remove.addEventListener("click", function() {
                        attachedFiles.splice(index, 1);
                        renderAttachedFiles();
                    });
                    pill.appendChild(remove);
                }
                return pill;
            }

            function renderAttachedFiles() {
                attachedFilesEl.replaceChildren();
                attachedFiles.forEach(function(file, index) {
                    attachedFilesEl.appendChild(filePill(file.name, true, index));
                });
            }

            function isTextFile(file) {
                return file.type === "text/plain" || /\.txt$/i.test(file.name || "");
            }

            function addFiles(fileList) {
                Array.from(fileList).forEach(function(file) {
                    var fileType = file.type || "";
                    if (!fileType.startsWith("image/") && fileType !== "application/pdf" && !isTextFile(file)) {
                        appendError(0, "Unsupported attachment", {
                            error: {
                                message: file.name + " is not an image, PDF, or TXT file.",
                                type: "invalid_attachment",
                                code: "unsupported_file_type"
                            }
                        }, null);
                        return;
                    }
                    attachedFiles.push(file);
                });
                renderAttachedFiles();
            }

            function fileToDataUrl(file) {
                return new Promise(function(resolve, reject) {
                    var reader = new FileReader();
                    reader.onload = function() { resolve(reader.result); };
                    reader.onerror = function() { reject(reader.error); };
                    reader.readAsDataURL(file);
                });
            }

            function fileToText(file) {
                return new Promise(function(resolve, reject) {
                    var reader = new FileReader();
                    reader.onload = function() { resolve(reader.result || ""); };
                    reader.onerror = function() { reject(reader.error); };
                    reader.readAsText(file);
                });
            }

            async function buildUserContent(text) {
                if (!attachedFiles.length) return text;
                var parts = [];
                if (text) parts.push({ type: "text", text: text });
                for (var i = 0; i < attachedFiles.length; i += 1) {
                    if (isTextFile(attachedFiles[i])) {
                        var fileText = await fileToText(attachedFiles[i]);
                        parts.push({
                            type: "text",
                            text: [
                                '[Attached text file: "' + attachedFiles[i].name + '"]',
                                fileText,
                                '[End attached text file: "' + attachedFiles[i].name + '"]'
                            ].join("\n")
                        });
                    } else {
                        parts.push({
                            type: "image_url",
                            image_url: { url: await fileToDataUrl(attachedFiles[i]) }
                        });
                    }
                }
                return parts;
            }

            function displayTextForMessage(text, files) {
                if (text) return text;
                if (!files || !files.length) return "";
                return files.length === 1 ? "Attached 1 file" : "Attached " + files.length + " files";
            }

            async function parseResponseBody(response) {
                var text = await response.text();
                if (!text) return null;
                try {
                    return JSON.parse(text);
                } catch (e) {
                    return { raw: text };
                }
            }

            function parseSseEvent(buffer, onData) {
                var events = buffer.split(/\n\n/);
                var remainder = events.pop();
                events.forEach(function(event) {
                    var dataLines = event.split(/\n/).filter(function(line) {
                        return line.indexOf("data:") === 0;
                    }).map(function(line) {
                        return line.slice(5).trimStart();
                    });
                    if (dataLines.length) onData(dataLines.join("\n"));
                });
                return remainder;
            }

            async function streamResponse(response, target) {
                var reader = response.body.getReader();
                var decoder = new TextDecoder();
                var buffer = "";

                while (true) {
                    var read = await reader.read();
                    if (read.done) break;
                    buffer += decoder.decode(read.value, { stream: true });
                    buffer = parseSseEvent(buffer, function(data) {
                        if (data === "[DONE]") return;
                        try {
                            var chunk = JSON.parse(data);
                            var choice = chunk.choices && chunk.choices[0];
                            var delta = choice && choice.delta && choice.delta.content;
                            if (delta) {
                                appendAssistantDelta(target, delta);
                            }
                        } catch (e) {
                            appendAssistantDelta(target, data);
                        }
                    });
                }
                if (target.classList.contains("typing")) renderAssistantMarkdown(target, "");
                return target.dataset.rawMarkdown || "";
            }

            async function sendMessage() {
                var text = promptEl.value.trim();
                if (!text && !attachedFiles.length) return;
                var assistantTarget = null;

                sendEl.disabled = true;
                setStatus(null, "Sending");

                try {
                    var content = await buildUserContent(text);
                    var filesForMessage = attachedFiles.slice();
                    var userMessage = { role: "user", content: content };
                    var payload = {
                        model: modelEl.value,
                        messages: conversationMessages.concat([userMessage]),
                        stream: true
                    };

                    var userTarget = appendMessage("user", displayTextForMessage(text, filesForMessage), filesForMessage);
                    assistantTarget = appendMessage("assistant", "", null, { model: payload.model, loading: true });
                    promptEl.value = "";
                    autosizePrompt();
                    attachedFiles = [];
                    renderAttachedFiles();

                    var response = await fetch(endpoint("/chat/completions"), {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(payload)
                    });
                    var requestId = response.headers.get("x-request-id");
                    setMessageRequestId(userTarget, requestId);
                    setMessageRequestId(assistantTarget, requestId);

                    if (!response.ok) {
                        removeMessageBody(assistantTarget);
                        appendError(response.status, response.statusText, await parseResponseBody(response), requestId);
                        return;
                    }

                    setStatus("ok", "Healthy");
                    conversationMessages.push(userMessage);
                    var streamedText = await streamResponse(response, assistantTarget);
                    conversationMessages.push({ role: "assistant", content: streamedText });
                    updateRenderedMessage(assistantTarget, { text: streamedText });
                    saveChatState();
                } catch (error) {
                    removeMessageBody(assistantTarget);
                    appendError(0, "Request failed", {
                        error: {
                            message: error && error.message ? error.message : String(error),
                            type: "network_error",
                            code: "request_failed"
                        }
                    }, null);
                } finally {
                    sendEl.disabled = false;
                }
            }

            async function checkHealth() {
                try {
                    var response = await fetch("/health");
                    setStatus(response.ok ? "ok" : "error", response.ok ? "Healthy" : "Error");
                } catch (e) {
                    setStatus("error", "Offline");
                }
            }

            attachButtonEl.addEventListener("click", function() {
                fileInputEl.click();
            });
            fileInputEl.addEventListener("change", function() {
                addFiles(fileInputEl.files);
                fileInputEl.value = "";
            });
            sendEl.addEventListener("click", sendMessage);
            modelEl.addEventListener("change", saveChatState);
            promptEl.addEventListener("input", autosizePrompt);
            promptEl.addEventListener("keydown", function(e) {
                if (e.key !== "Enter" || e.isComposing) return;
                if (e.altKey) return;
                e.preventDefault();
                sendMessage();
            });

            ["dragenter", "dragover"].forEach(function(eventName) {
                composerEl.addEventListener(eventName, function(e) {
                    e.preventDefault();
                    composerEl.classList.add("dragging");
                });
            });
            ["dragleave", "drop"].forEach(function(eventName) {
                composerEl.addEventListener(eventName, function(e) {
                    e.preventDefault();
                    if (eventName === "drop" && e.dataTransfer && e.dataTransfer.files) {
                        addFiles(e.dataTransfer.files);
                    }
                    composerEl.classList.remove("dragging");
                });
            });

            restoreChatState();
            checkHealth();
            autosizePrompt();
        })();
    </script>
{% endblock %}