{% extends "base.html" %}
{% block title %}چت - LAZARUS{% endblock %}
{% block content %}
<h1>💬 چت</h1>

<div id="chat" style="height:calc(100vh - 200px);overflow-y:auto;padding:16px;background:#161b22;border:1px solid #30363d;border-radius:12px;margin-bottom:12px;"></div>

<div class="row">
    <input type="text" id="msg" placeholder="پیام..." onkeydown="if(event.key==='Enter')sendMsg()">
    <button class="btn" onclick="sendMsg()">ارسال</button>
</div>

<script>
function addMessage(text, type) {
    const chat = document.getElementById('chat');
    const div = document.createElement('div');
    div.style.cssText = 'margin:8px 0;max-width:80%;word-wrap:break-word;';
    const span = document.createElement('span');
    span.style.cssText = 'padding:10px 14px;border-radius:12px;display:inline-block;white-space:pre-wrap;';
    if (type === 'user') {
        div.style.marginRight = 'auto';
        div.style.textAlign = 'right';
        span.style.background = '#1f6feb';
        span.style.color = 'white';
    } else {
        div.style.marginLeft = 'auto';
        div.style.textAlign = 'left';
        span.style.background = '#21262d';
        span.style.color = '#e6edf3';
    }
    span.textContent = text;
    div.appendChild(span);
    chat.appendChild(div);
    chat.scrollTop = chat.scrollHeight;
}

function sendMsg() {
    const input = document.getElementById('msg');
    const msg = input.value.trim();
    if (!msg) return;
    addMessage(msg, 'user');
    addMessage('⏳ داره فکر میکنه...', 'bot');
    input.value = '';
    fetch('/api/chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({message:msg})})
    .then(r=>r.json()).then(data=>{
        const loading = document.getElementById('chat').lastChild;
        loading.remove();
        addMessage(data.error || data.response || JSON.stringify(data), 'bot');
    }).catch(err=>{
        const loading = document.getElementById('chat').lastChild;
        loading.remove();
        addMessage('❌ ' + err, 'bot');
    });
}

// Load chat history from server
fetch('/api/chat-history').then(r=>r.json()).then(data=>{
    if(data.history) {
        data.history.forEach(m => addMessage(m.content, m.role === 'user' ? 'user' : 'bot'));
    }
}).catch(()=>{});
</script>
{% endblock %}