{% extends "base.html" %}
{% block title %}المستشار الذكي - {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-serif font-bold text-white flex items-center gap-3">
                <span class="text-gold-400">&#9670;</span> المستشار الذكي
            </h1>
            <p class="text-sm text-slate-400 mt-1">{{ report.project_name }} — شريكك في اتخاذ القرارات</p>
        </div>
        <div class="flex gap-3">
            <button onclick="clearChat()" class="text-xs text-red-400/60 hover:text-red-400 transition px-3 py-1.5 rounded-lg hover:bg-red-500/10">مسح المحادثة</button>
            <a href="{{ url_for('study.view', report_id=report.id) }}" class="text-sm text-slate-400 hover:text-gold-400">&#8592; العودة للتقرير</a>
        </div>
    </div>

    <!-- Chat Container -->
    <div class="glass rounded-2xl overflow-hidden flex flex-col" style="height: 65vh;">
        <!-- Messages -->
        <div id="chatMessages" class="flex-1 overflow-y-auto p-6 space-y-4">
            {% if not messages %}
            <div class="text-center py-8">
                <div class="text-4xl mb-3 opacity-30">&#129302;</div>
                <p class="text-slate-400 text-sm mb-4">مرحباً! أنا مستشارك الذكي لمشروع "{{ report.project_name }}"</p>
                <p class="text-slate-500 text-xs">اسألني عن أي شيء: التسعير، التسويق، التوظيف، المنافسة، التمويل...</p>
                <div class="flex flex-wrap justify-center gap-2 mt-4">
                    <button onclick="sendQuick('كيف أسعّر منتجي؟')" class="text-xs bg-white/5 text-slate-400 px-3 py-1.5 rounded-lg hover:bg-white/10 transition">كيف أسعّر منتجي؟</button>
                    <button onclick="sendQuick('ما أفضل استراتيجية تسويق للبداية؟')" class="text-xs bg-white/5 text-slate-400 px-3 py-1.5 rounded-lg hover:bg-white/10 transition">استراتيجية تسويق</button>
                    <button onclick="sendQuick('متى أحتاج أوظف أول موظف؟')" class="text-xs bg-white/5 text-slate-400 px-3 py-1.5 rounded-lg hover:bg-white/10 transition">متى أوظف؟</button>
                    <button onclick="sendQuick('كيف أتعامل مع المنافسين؟')" class="text-xs bg-white/5 text-slate-400 px-3 py-1.5 rounded-lg hover:bg-white/10 transition">التعامل مع المنافسين</button>
                </div>
            </div>
            {% endif %}

            {% for msg in messages %}
            <div class="flex {% if msg.role == 'user' %}justify-end{% else %}justify-start{% endif %}">
                <div class="max-w-[80%] p-4 rounded-2xl text-sm
                    {% if msg.role == 'user' %}bg-gold-500/20 text-white rounded-br-sm
                    {% else %}bg-white/5 text-slate-300 rounded-bl-sm{% endif %}">
                    <div class="whitespace-pre-wrap">{{ msg.content }}</div>
                    <div class="text-xs {% if msg.role == 'user' %}text-gold-400/50{% else %}text-slate-600{% endif %} mt-2">{{ msg.created_at.strftime('%H:%M') }}</div>
                </div>
            </div>
            {% endfor %}

            <div id="typingIndicator" class="hidden flex justify-start">
                <div class="bg-white/5 p-4 rounded-2xl rounded-bl-sm">
                    <div class="flex gap-1">
                        <div class="w-2 h-2 bg-slate-500 rounded-full animate-bounce" style="animation-delay: 0ms"></div>
                        <div class="w-2 h-2 bg-slate-500 rounded-full animate-bounce" style="animation-delay: 150ms"></div>
                        <div class="w-2 h-2 bg-slate-500 rounded-full animate-bounce" style="animation-delay: 300ms"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Input -->
        <div class="border-t border-white/5 p-4">
            <div class="flex gap-3">
                <input type="text" id="chatInput" placeholder="اكتب سؤالك هنا..."
                    class="flex-1 bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-gold-500/50 transition"
                    onkeydown="if(event.key==='Enter') sendMessage()">
                <button onclick="sendMessage()" id="sendBtn" class="bg-gold-500 text-black px-6 py-3 rounded-xl font-bold hover:bg-gold-400 transition text-sm">
                    &#8592; إرسال
                </button>
            </div>
        </div>
    </div>
</div>

<script>
const chatBox = document.getElementById('chatMessages');
chatBox.scrollTop = chatBox.scrollHeight;

function sendQuick(text) {
    document.getElementById('chatInput').value = text;
    sendMessage();
}

function sendMessage() {
    const input = document.getElementById('chatInput');
    const msg = input.value.trim();
    if (!msg) return;

    // Add user message to UI
    const userDiv = document.createElement('div');
    userDiv.className = 'flex justify-end';
    userDiv.innerHTML = '<div class="max-w-[80%] p-4 rounded-2xl rounded-br-sm text-sm bg-gold-500/20 text-white"><div class="whitespace-pre-wrap">' + msg.replace(/</g, '&lt;') + '</div></div>';
    chatBox.appendChild(userDiv);

    input.value = '';
    input.disabled = true;
    document.getElementById('sendBtn').disabled = true;
    document.getElementById('typingIndicator').classList.remove('hidden');
    chatBox.scrollTop = chatBox.scrollHeight;

    fetch('{{ url_for("advisor.send_message", report_id=report.id) }}', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({message: msg})
    })
    .then(r => r.json())
    .then(data => {
        document.getElementById('typingIndicator').classList.add('hidden');
        if (data.reply) {
            const botDiv = document.createElement('div');
            botDiv.className = 'flex justify-start';
            botDiv.innerHTML = '<div class="max-w-[80%] p-4 rounded-2xl rounded-bl-sm text-sm bg-white/5 text-slate-300"><div class="whitespace-pre-wrap">' + data.reply.replace(/</g, '&lt;') + '</div></div>';
            chatBox.appendChild(botDiv);
        }
        input.disabled = false;
        document.getElementById('sendBtn').disabled = false;
        input.focus();
        chatBox.scrollTop = chatBox.scrollHeight;
    })
    .catch(() => {
        document.getElementById('typingIndicator').classList.add('hidden');
        input.disabled = false;
        document.getElementById('sendBtn').disabled = false;
        alert('حدث خطأ');
    });
}

function clearChat() {
    if (!confirm('هل تريد مسح كل المحادثة؟')) return;
    fetch('{{ url_for("advisor.clear_chat", report_id=report.id) }}', {method: 'POST'})
        .then(() => location.reload());
}
</script>
{% endblock %}