document.addEventListener('DOMContentLoaded', function() {
    const chatForm = document.getElementById('chat-form');
    const userInput = document.getElementById('user-input');
    const chatContainer = document.getElementById('chat-container');
    
    chatForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const message = userInput.value.trim();
        if (message) {
            addUserMessage(message);
            userInput.value = '';
            simulateAIResponse(message);
        }
    });
    
    function addUserMessage(message) {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'chat-message user-message mb-4';
        messageDiv.innerHTML = `
            <div class="flex items-start gap-3 justify-end">
                <div class="bg-primary text-white p-2 rounded-full">
                    <i data-feather="user"></i>
                </div>
                <div class="bg-primary text-white p-3 rounded-lg max-w-[80%]">
                    <p>${message}</p>
                </div>
            </div>
        `;
        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
        feather.replace();
    }
    
    function addAIMessage(message) {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'chat-message ai-message mb-4';
        messageDiv.innerHTML = `
            <div class="flex items-start gap-3">
                <div class="bg-secondary text-white p-2 rounded-full">
                    <i data-feather="cpu"></i>
                </div>
                <div class="bg-gray-100 p-3 rounded-lg max-w-[80%]">
                    <p>${message}</p>
                </div>
            </div>
        `;
        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
        feather.replace();
    }
    
    function simulateAIResponse(userMessage) {
        // This would be replaced with actual API calls to AI backend
        setTimeout(() => {
            let response;
            
            if (userMessage.includes('متجر') || userMessage.includes('تسوق')) {
                response = "جاري إنشاء تطبيق متجر إلكتروني لك. سأقوم بإضافة الصفحات الأساسية مثل الصفحة الرئيسية، صفحة المنتجات، وسلة التسوق.";
            } else if (userMessage.includes('تسجيل') || userMessage.includes('دخول')) {
                response = "تم تصميم صفحة تسجيل الدخول بنجاح! هل تريد إضافة أي حقول إضافية مثل تسجيل الدخول عبر وسائل التواصل الاجتماعي؟";
            } else {
                response = "لقد استلمت طلبك: '" + userMessage + "'. جاري المعالجة...";
            }
            
            addAIMessage(response);
        }, 1000);
    }
});