const worker = new Worker('worker.js', { type: 'module' });
const sendBtn = document.getElementById('send-button');
const statusText = document.getElementById('status-text');
const progressBar = document.getElementById('progress-bar-fill');
const chatBox = document.getElementById('chat-box');

// بدء تحميل المحرك من الـ Worker
worker.postMessage({ type: 'load' });

worker.onmessage = (e) => {
    const { type, data, output } = e.data;

    if (type === 'progress') {
        const percent = (data.loaded / data.total) * 100;
        progressBar.style.width = percent + '%';
        statusText.innerText = `جاري التحميل: ${Math.round(percent)}%`;
    } 
    else if (type === 'ready') {
        statusText.innerText = "المحرك جاهز تماماً!";
        sendBtn.disabled = false;
        sendBtn.style.opacity = "1";
    }
    else if (type === 'result') {
        addMessage('assistant', output);
    }
};

function sendMessage() {
    const input = document.getElementById('user-input');
    const text = input.value.trim();
    if (text) {
        addMessage('user', text);
        worker.postMessage({ type: 'generate', text: text });
        input.value = '';
    }
}

function addMessage(role, text) {
    const msgDiv = document.createElement('div');
    msgDiv.className = `message ${role}`;
    msgDiv.innerText = text;
    chatBox.appendChild(msgDiv);
    chatBox.scrollTop = chatBox.scrollHeight;
}