const API_URL = '/api';
let currentMode = 'flash';
let enableSearch = false;

// عناصر DOM
const chatMessages = document.getElementById('chatMessages');
const userInput = document.getElementById('userInput');
const sendBtn = document.getElementById('sendBtn');
const flashBtn = document.getElementById('flashBtn');
const proBtn = document.getElementById('proBtn');
const searchToggle = document.getElementById('searchToggle');
const statusBar = document.getElementById('status');

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

function addMessage(text, isUser = false, parsedResponse = null, searchUsed = false) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;
    
    const avatar = document.createElement('div');
    avatar.className = 'avatar';
    avatar.textContent = isUser ? '👤' : '🤖';
    
    const content = document.createElement('div');
    content.className = 'content';
    
    if (isUser) {
        content.textContent = text;
    } else {
        if (searchUsed) {
            const searchBadge = document.createElement('div');
            searchBadge.className = 'search-indicator';
            searchBadge.innerHTML = '🔍 تم البحث في الإنترنت';
            content.appendChild(searchBadge);
        }
        
        if (parsedResponse && Array.isArray(parsedResponse)) {
            parsedResponse.forEach(part => {
                if (part.type === 'thought') {
                    const thoughtDiv = document.createElement('div');
                    thoughtDiv.className = 'thought-container';
                    thoughtDiv.innerHTML = `
                        <div class="thought-header">
                            <span>🧠</span>
                            <span>تفكير النموذج (genisi thought)</span>
                        </div>
                        <div>${escapeHtml(part.content)}</div>
                    `;
                    content.appendChild(thoughtDiv);
                } else if (part.type === 'text' && part.content) {
                    const textDiv = document.createElement('div');
                    textDiv.textContent = part.content;
                    content.appendChild(textDiv);
                }
            });
        } else {
            content.textContent = text;
        }
    }
    
    messageDiv.appendChild(avatar);
    messageDiv.appendChild(content);
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

function showLoading() {
    const loadingDiv = document.createElement('div');
    loadingDiv.className = 'message bot';
    loadingDiv.id = 'loadingMessage';
    loadingDiv.innerHTML = `
        <div class="avatar">🤖</div>
        <div class="content">
            <div class="loading"></div>
            <div style="margin-top: 5px;">جاري المعالجة...</div>
        </div>
    `;
    chatMessages.appendChild(loadingDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

function hideLoading() {
    const loading = document.getElementById('loadingMessage');
    if (loading) loading.remove();
}

function updateStatus(text, isError = false) {
    statusBar.textContent = text;
    statusBar.style.color = isError ? '#dc3545' : '#666';
    setTimeout(() => {
        if (!isError) {
            const searchText = enableSearch ? 'مفعل' : 'غير مفعل';
            statusBar.textContent = `✅ جاهز | الوضع: ${currentMode === 'flash' ? 'فلاش' : 'برو'} | البحث: ${searchText}`;
            statusBar.style.color = '#666';
        }
    }, 3000);
}

async function setMode(mode) {
    try {
        const response = await fetch(`${API_URL}/mode`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ mode })
        });
        
        if (response.ok) {
            currentMode = mode;
            if (mode === 'flash') {
                flashBtn.classList.add('active');
                proBtn.classList.remove('active');
                updateStatus('✅ تم التبديل إلى وضع الفلاش - ردود سريعة بدون تفكير');
            } else {
                proBtn.classList.add('active');
                flashBtn.classList.remove('active');
                updateStatus('✅ تم التبديل إلى وضع البرو - تفكير عميق مع genisi thought');
            }
        }
    } catch (error) {
        console.error('Error:', error);
        updateStatus('❌ فشل تغيير الوضع', true);
    }
}

async function sendMessage() {
    const message = userInput.value.trim();
    if (!message) return;
    
    addMessage(message, true);
    userInput.value = '';
    showLoading();
    updateStatus('🤔 جاري المعالجة...');
    
    try {
        const response = await fetch(`${API_URL}/chat`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ 
                message, 
                mode: currentMode,
                enableSearch: enableSearch
            })
        });
        
        hideLoading();
        
        if (response.ok) {
            const data = await response.json();
            if (data.success) {
                addMessage('', false, data.response, data.searchUsed);
                const searchMsg = data.searchUsed ? ` (تم البحث - ${data.searchResultsCount} نتيجة)` : '';
                updateStatus(`✅ تم الرد${searchMsg}`);
            } else {
                addMessage('عذراً، حدث خطأ. حاول مرة أخرى.', false);
                updateStatus('❌ خطأ في الاستجابة', true);
            }
        } else {
            throw new Error('Connection error');
        }
    } catch (error) {
        hideLoading();
        console.error('Error:', error);
        addMessage('عذراً، لا يمكن الاتصال بالخادم.', false);
        updateStatus('❌ فشل الاتصال', true);
    }
}

// أحداث
sendBtn.addEventListener('click', sendMessage);
flashBtn.addEventListener('click', () => setMode('flash'));
proBtn.addEventListener('click', () => setMode('pro'));
searchToggle.addEventListener('change', (e) => {
    enableSearch = e.target.checked;
    updateStatus(enableSearch ? '🔍 تم تفعيل البحث في الإنترنت' : '🔍 تم إيقاف البحث في الإنترنت');
});

userInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
});

async function loadCurrentMode() {
    try {
        const response = await fetch(`${API_URL}/mode`);
        if (response.ok) {
            const data = await response.json();
            currentMode = data.mode;
            if (currentMode === 'flash') {
                flashBtn.classList.add('active');
            } else {
                proBtn.classList.add('active');
            }
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

loadCurrentMode();
updateStatus('✅ جاهز للحديث!');