// Chat Bot Functionality - Complete Working Version

console.log('Main.js loaded successfully');

// Make all chat functions globally available
window.openChatBot = function() {
    console.log('openChatBot function called!');
    
    // Check if modal already exists
    const existingModal = document.querySelector('.chat-modal');
    if (existingModal) {
        console.log('Chat modal already exists, removing it first');
        existingModal.remove();
    }
    
    // Create chat modal
    const chatModal = document.createElement('div');
    chatModal.className = 'chat-modal';
    console.log('Creating chat modal...');
    chatModal.innerHTML = `
        <div class="chat-container">
            <div class="chat-header">
                <h5><i class="fas fa-robot me-2"></i>مساعد M-AUTO</h5>
                <button class="btn-close-chat" onclick="closeChatBot()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="chat-body">
                <div class="chat-messages" id="chatMessages">
                    <div class="bot-message">
                        <div class="message-content">
                            مرحباً بك في M-AUTO! 👋<br>
                            كيف يمكنني مساعدتك اليوم؟
                        </div>
                    </div>
                </div>
                <div class="quick-options">
                    <button class="quick-btn" onclick="sendQuickMessage('أريد شراء سيارة')">
                        🚗 شراء سيارة
                    </button>
                    <button class="quick-btn" onclick="sendQuickMessage('أريد حجز صيانة')">
                        🔧 حجز صيانة
                    </button>
                    <button class="quick-btn" onclick="sendQuickMessage('أريد معرفة الأسعار')">
                        💰 الأسعار
                    </button>
                    <button class="quick-btn" onclick="sendQuickMessage('أريد التواصل مع خدمة العملاء')">
                        📞 خدمة العملاء
                    </button>
                </div>
            </div>
            <div class="chat-footer">
                <div class="chat-input-container">
                    <input type="text" id="chatInput" placeholder="اكتب رسالتك هنا..." onkeypress="handleChatKeyPress(event)">
                    <button onclick="sendMessage()" class="send-btn">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    
    document.body.appendChild(chatModal);
    console.log('Chat modal added to body');
    
    // Focus on input
    setTimeout(() => {
        const chatInput = document.getElementById('chatInput');
        if (chatInput) {
            chatInput.focus();
            console.log('Chat input focused');
        } else {
            console.log('Chat input not found!');
        }
    }, 100);
};

window.closeChatBot = function() {
    console.log('closeChatBot function called!');
    const chatModal = document.querySelector('.chat-modal');
    if (chatModal) {
        chatModal.remove();
        console.log('Chat modal removed');
    } else {
        console.log('No chat modal found to remove');
    }
};

window.handleChatKeyPress = function(event) {
    if (event.key === 'Enter') {
        sendMessage();
    }
};

window.sendMessage = function() {
    const input = document.getElementById('chatInput');
    const message = input.value.trim();
    
    if (message) {
        addUserMessage(message);
        input.value = '';
        
        // Simulate bot response
        setTimeout(() => {
            getBotResponse(message);
        }, 1000);
    }
};

window.sendQuickMessage = function(message) {
    addUserMessage(message);
    setTimeout(() => {
        getBotResponse(message);
    }, 1000);
};

function addUserMessage(message) {
    const chatMessages = document.getElementById('chatMessages');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'user-message';
    messageDiv.innerHTML = `
        <div class="message-content">
            ${message}
        </div>
    `;
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

function addBotMessage(message) {
    const chatMessages = document.getElementById('chatMessages');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'bot-message';
    messageDiv.innerHTML = `
        <div class="message-content">
            ${message}
        </div>
    `;
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

function getBotResponse(userMessage) {
    let response = '';
    
    const message = userMessage.toLowerCase();
    
    if (message.includes('سيارة') || message.includes('شراء')) {
        response = `
            ممتاز! يمكنك تصفح مجموعة السيارات المتوفرة لدينا:<br>
            <a href="cars.php" class="chat-link">🚗 عرض جميع السيارات</a><br><br>
            أو يمكنك التواصل معنا مباشرة على:<br>
            📞 <a href="tel:+201234567890" class="chat-link">01234567890</a>
        `;
    } else if (message.includes('صيانة')) {
        response = `
            يمكنك حجز موعد صيانة بسهولة:<br>
            <a href="maintenance.php" class="chat-link">🔧 حجز صيانة</a><br><br>
            أو التواصل معنا على:<br>
            📞 <a href="tel:+201234567890" class="chat-link">01234567890</a>
        `;
    } else if (message.includes('أسعار') || message.includes('سعر')) {
        response = `
            يمكنك استخدام حاسبة الأقساط لمعرفة التكلفة:<br>
            <a href="calculator.php" class="chat-link">💰 حاسبة الأقساط</a><br><br>
            أو تصفح العروض الحالية:<br>
            <a href="index.php#offers" class="chat-link">🎯 العروض الحالية</a>
        `;
    } else if (message.includes('خدمة العملاء') || message.includes('تواصل')) {
        response = `
            يمكنك التواصل معنا بعدة طرق:<br>
            📞 هاتف: <a href="tel:+201234567890" class="chat-link">01234567890</a><br>
            📧 إيميل: <a href="mailto:info@m-auto.com" class="chat-link">info@m-auto.com</a><br>
            📍 <a href="branches.php" class="chat-link">مواقع الفروع</a><br>
            💬 <a href="https://wa.me/201234567890" target="_blank" class="chat-link">واتساب</a>
        `;
    } else {
        response = `
            شكراً لتواصلك معنا! 😊<br>
            يمكنني مساعدتك في:<br>
            • شراء السيارات<br>
            • حجز الصيانة<br>
            • معرفة الأسعار<br>
            • التواصل مع خدمة العملاء<br><br>
            أو يمكنك التواصل معنا مباشرة على:<br>
            📞 <a href="tel:+201234567890" class="chat-link">01234567890</a>
        `;
    }
    
    addBotMessage(response);
}

// Initialize chat button functionality when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing chat button...');
    
    const chatButton = document.getElementById('chat-button');
    console.log('Chat button found:', chatButton);
    
    if (chatButton) {
        console.log('Adding click event to chat button');
        chatButton.addEventListener('click', function(e) {
            e.preventDefault();
            console.log('Chat button clicked!');
            window.openChatBot();
        });
        console.log('Chat button event listener added successfully');
    } else {
        console.log('Chat button not found!');
    }
});

console.log('All chat functions defined and ready');