<style>
    #forge-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 8rem);
        max-width: 900px;
        margin: 0 auto;
    }
    #forge-messages {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        scroll-behavior: smooth;
    }
    .forge-msg {
        margin-bottom: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        max-width: 85%;
        line-height: 1.6;
        font-size: 0.95rem;
    }
    .forge-msg.user {
        background: linear-gradient(135deg, rgba(255,107,53,0.15), rgba(78,205,196,0.15));
        border: 1px solid rgba(168,85,247,0.3);
        margin-left: auto;
        text-align: right;
    }
    .forge-msg.assistant {
        background: rgba(45,45,45,0.8);
        border: 1px solid rgba(78,205,196,0.2);
        margin-right: auto;
    }
    .forge-msg.assistant pre {
        background: rgba(0,0,0,0.4);
        padding: 0.75rem;
        border-radius: 0.5rem;
        overflow-x: auto;
        margin: 0.5rem 0;
        font-size: 0.85rem;
    }
    .forge-msg.assistant code {
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
    }
    .forge-citations {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(78,205,196,0.2);
        font-size: 0.8rem;
        color: #888;
    }
    #forge-input-area {
        padding: 1rem;
        border-top: 1px solid rgba(78,205,196,0.2);
    }
    #forge-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(168,85,247,0.3);
        background: rgba(45,45,45,0.6);
        color: #e8f4f8;
        font-size: 1rem;
        resize: none;
        outline: none;
        transition: border-color 0.2s;
    }
    #forge-input:focus {
        border-color: rgba(168,85,247,0.6);
    }
    #forge-send {
        margin-top: 0.5rem;
        padding: 0.5rem 1.5rem;
        background: linear-gradient(135deg, #FF6B35, #A855F7, #4ECDC4);
        color: white;
        border: none;
        border-radius: 0.5rem;
        font-weight: 600;
        cursor: pointer;
        float: right;
        transition: opacity 0.2s;
    }
    #forge-send:disabled { opacity: 0.4; cursor: not-allowed; }
    #forge-send:hover:not(:disabled) { opacity: 0.9; }
    .forge-welcome {
        text-align: center;
        padding: 3rem 1rem;
        color: #888;
    }
    .forge-welcome h2 {
        font-size: 1.5rem;
        font-weight: 700;
        background: linear-gradient(135deg, #FF6B35, #A855F7, #4ECDC4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
    }
    .forge-welcome p {
        max-width: 500px;
        margin: 0.5rem auto;
        line-height: 1.6;
    }
    .forge-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 1.5rem;
    }
    .forge-suggestion {
        padding: 0.5rem 1rem;
        border: 1px solid rgba(168,85,247,0.3);
        border-radius: 2rem;
        font-size: 0.85rem;
        color: #a8dadc;
        cursor: pointer;
        transition: all 0.2s;
        background: transparent;
    }
    .forge-suggestion:hover {
        border-color: rgba(168,85,247,0.6);
        background: rgba(168,85,247,0.1);
    }
</style>

<div id="forge-container">
    <div id="forge-messages">
        <div class="forge-welcome" id="forge-welcome">
            <h2>🔥 The Forge</h2>
            <p>Ask me anything about Firefrost Gaming — infrastructure, procedures, server configs, policies, or history.</p>
            <p style="font-size: 0.8rem; color: #666;">Powered by Gemma 4 on TX1 • Responses may take 30-60 seconds</p>
            <div class="forge-suggestions">
                <button class="forge-suggestion" onclick="askForge('How do I restart Arbiter?')">How do I restart Arbiter?</button>
                <button class="forge-suggestion" onclick="askForge('What servers are on TX1?')">What servers are on TX1?</button>
                <button class="forge-suggestion" onclick="askForge('What is the Sovereign tier?')">What is the Sovereign tier?</button>
                <button class="forge-suggestion" onclick="askForge('What is the cancellation policy?')">Cancellation policy?</button>
            </div>
        </div>
    </div>
    
    <div id="forge-input-area">
        <textarea id="forge-input" rows="2" placeholder="Ask The Forge..." onkeydown="if(event.key==='Enter' && !event.shiftKey){event.preventDefault();sendForge();}"></textarea>
        <button id="forge-send" onclick="sendForge()">Ask The Forge</button>
        <div style="clear:both;"></div>
    </div>
</div>

<script>
let conversationId = '';
let isStreaming = false;

function askForge(text) {
    document.getElementById('forge-input').value = text;
    sendForge();
}

async function sendForge() {
    const input = document.getElementById('forge-input');
    const query = input.value.trim();
    if (!query || isStreaming) return;

    const welcome = document.getElementById('forge-welcome');
    if (welcome) welcome.style.display = 'none';

    const messages = document.getElementById('forge-messages');
    const userDiv = document.createElement('div');
    userDiv.className = 'forge-msg user';
    userDiv.textContent = query;
    messages.appendChild(userDiv);

    const msgId = 'msg-' + Date.now();
    const assistDiv = document.createElement('div');
    assistDiv.className = 'forge-msg assistant';
    assistDiv.id = msgId;
    assistDiv.innerHTML = '<span style="color:#888;">🔥 The Forge is thinking...</span>';
    messages.appendChild(assistDiv);
    messages.scrollTop = messages.scrollHeight;

    input.value = '';
    isStreaming = true;
    document.getElementById('forge-send').disabled = true;

    try {
        const response = await fetch('/admin/forge/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'CSRF-Token': '<%= csrfToken %>'
            },
            body: JSON.stringify({ query, conversation_id: conversationId })
        });

        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let rawAnswer = '';
        let buffer = '';
        const msgEl = document.getElementById(msgId);

        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;
                const jsonStr = line.substring(6).trim();
                if (!jsonStr) continue;
                
                try {
                    const data = JSON.parse(jsonStr);
                    
                    if (data.event === 'message' && data.answer) {
                        rawAnswer += data.answer;
                        
                        let display = rawAnswer;
                        display = display.replace(/<think>[\s\S]*?<\/think>/g, '');
                        display = display.replace(/<think>[\s\S]*/g, '');
                        display = display.trim();
                        
                        if (display) {
                            msgEl.innerHTML = renderMarkdown(display);
                        }
                        messages.scrollTop = messages.scrollHeight;
                        
                        if (data.conversation_id) {
                            conversationId = data.conversation_id;
                        }
                    }
                    
                    if (data.event === 'message_end') {
                        if (data.metadata && data.metadata.retriever_resources) {
                            const sources = data.metadata.retriever_resources.map(function(r) { return r.document_name; });
                            const unique = [...new Set(sources)];
                            if (unique.length > 0) {
                                msgEl.innerHTML += '<div class="forge-citations">📄 Sources: ' + unique.join(', ') + '</div>';
                            }
                        }
                    }
                    
                    if (data.event === 'error') {
                        msgEl.innerHTML = '<span style="color:#ff6b35;">⚠️ ' + escapeHtml(data.message || 'Something went wrong.') + '</span>';
                    }
                } catch (e) {}
            }
        }

        let finalDisplay = rawAnswer.replace(/<think>[\s\S]*?<\/think>/g, '').trim();
        if (finalDisplay) {
            msgEl.innerHTML = renderMarkdown(finalDisplay);
        } else if (!rawAnswer) {
            msgEl.innerHTML = '<span style="color:#888;">No response received. The model may be loading.</span>';
        }

    } catch (err) {
        document.getElementById(msgId).innerHTML = '<span style="color:#ff6b35;">⚠️ Connection failed: ' + escapeHtml(err.message) + '</span>';
    }

    isStreaming = false;
    document.getElementById('forge-send').disabled = false;
    input.focus();
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function renderMarkdown(text) {
    let html = escapeHtml(text);
    html = html.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
    html = html.replace(/`([^`]+)`/g, '<code style="background:rgba(0,0,0,0.3);padding:0.1rem 0.3rem;border-radius:3px;">$1</code>');
    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
    html = html.replace(/^### (.+)$/gm, '<h4 style="color:#4ECDC4;margin:0.5rem 0;">$1</h4>');
    html = html.replace(/^## (.+)$/gm, '<h3 style="color:#4ECDC4;margin:0.5rem 0;">$1</h3>');
    html = html.replace(/^- (.+)$/gm, '• $1');
    html = html.replace(/\n/g, '<br>');
    return html;
}
</script>
