static/js/ai_chat.js

document.addEventListener('DOMContentLoaded', () => {
    // Inject Chat HTML
    const chatHTML = `
        <button class="taribot-trigger" id="taribot-trigger">
            🤖
        </button>
        <div class="taribot-window" id="taribot-window">
            <div class="taribot-header">
                <h3>🤖 Taribot</h3>
                <button class="close-chat" id="close-chat">×</button>
            </div>
            <div class="taribot-messages" id="taribot-messages">
                <div class="message bot">
                    Ahlan! I'm Taribot, your personal Egypt guide. Ask me anything about your trip!
                </div>
            </div>
            <div class="taribot-input-area">
                <input type="text" id="taribot-input" placeholder="Type a message...">
                <button id="taribot-send">➤</button>
            </div>
        </div>
    `;

    const chatContainer = document.createElement('div');
    chatContainer.innerHTML = chatHTML;
    document.body.appendChild(chatContainer);

    // Elements
    const trigger = document.getElementById('taribot-trigger');
    const window = document.getElementById('taribot-window');
    const closeBtn = document.getElementById('close-chat');
    const input = document.getElementById('taribot-input');
    const sendBtn = document.getElementById('taribot-send');
    const messages = document.getElementById('taribot-messages');

    // Toggle Window
    trigger.addEventListener('click', () => {
        window.style.display = window.style.display === 'flex' ? 'none' : 'flex';
    });

    closeBtn.addEventListener('click', () => {
        window.style.display = 'none';
    });

    // --- Knowledge Base ---
    const experiences = [
        { id: 1, title: "From Stone to Sky", keywords: ["pyramid", "stone", "sky", "giza", "evolution"], price: "Contact for Price", desc: "See the pyramids the way history intended." },
        { id: 2, title: "One Street, Three Faiths", keywords: ["faith", "religion", "church", "mosque", "coptic", "old cairo"], price: "Contact for Price", desc: "Experience centuries of coexistence in Old Cairo." },
        { id: 3, title: "Breakfast on Wheels", keywords: ["food", "foul", "breakfast", "eat", "cart"], price: "Contact for Price", desc: "Foul isn’t just food—it’s a daily ritual." },
        { id: 4, title: "Money Talks", keywords: ["money", "currency", "history", "wallet", "banknote"], price: "Contact for Price", desc: "Your cash is a hidden guidebook." }
    ];

    // Send Message Logic
    async function sendMessage() {
        const text = input.value.trim();
        if (!text) return;

        // User Message
        appendMessage(text, 'user');
        input.value = '';

        // Loading State
        const loadingId = appendMessage('Thinking...', 'bot', true);

        // Simulate Network Delay
        setTimeout(() => {
            removeMessage(loadingId);

            let responseText = "Sorry this feature is not available right now. It will be available soon.";
            const lowerText = text.toLowerCase();

            // Helper to find experience by keyword OR title
            const findExperience = (inputText) => {
                return experiences.find(exp =>
                    exp.keywords.some(k => inputText.includes(k)) ||
                    exp.title.toLowerCase().includes(inputText)
                );
            };

            // 1. Check for "Booking" intent
            if (lowerText.includes('book')) {
                const experienceToBook = findExperience(lowerText);

                if (experienceToBook) {
                    // Perform Booking
                    let currentBookings = JSON.parse(sessionStorage.getItem('tarist_bookings') || '[]');
                    // Avoid duplicates for demo
                    if (!currentBookings.find(b => b.id === experienceToBook.id)) {
                        currentBookings.push(experienceToBook);
                        sessionStorage.setItem('tarist_bookings', JSON.stringify(currentBookings));
                        responseText = `Done! I've booked "<strong>${experienceToBook.title}</strong>" for you. It's now on your Dashboard.`;
                    } else {
                        responseText = `You already have "<strong>${experienceToBook.title}</strong>" booked!`;
                    }
                } else {
                    responseText = "Which experience would you like to book? (Pyramids, Faiths, Food, or Money)";
                }
            }
            // 2. Check for "Knowledge" intent (Details/Price)
            else {
                const foundExp = findExperience(lowerText);

                if (foundExp) {
                    responseText = `<strong>${foundExp.title}</strong><br>${foundExp.desc}<br>Price: ${foundExp.price}.<br><br>Would you like me to <strong>book</strong> this for you?`;
                } else if (lowerText.includes('hello') || lowerText.includes('hi') || lowerText.includes('ahlan')) {
                    responseText = "Ahlan! I can help you book experiences or tell you about them. Ask me about Pyramids, Old Cairo, Food, or Money!";
                } else {
                    // Default Fallback as requested
                    responseText = "Sorry this feature is not available right now. It will be available soon.";
                }
            }

            appendMessage(responseText, 'bot');
        }, 1000);
    }

    sendBtn.addEventListener('click', sendMessage);
    input.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') sendMessage();
    });

    function appendMessage(text, sender, isLoading = false) {
        const msgDiv = document.createElement('div');
        msgDiv.classList.add('message', sender);
        if (isLoading) {
            msgDiv.id = 'loading-msg';
            msgDiv.style.fontStyle = 'italic';
            msgDiv.style.opacity = '0.7';
        }
        msgDiv.innerHTML = text; // Changed to innerHTML for bold tags
        messages.appendChild(msgDiv);
        messages.scrollTop = messages.scrollHeight;
        return msgDiv.id; // Return ID for removal if needed
    }

    function removeMessage(id) {
        if (!id) return;
        const msg = document.getElementById(id);
        if (msg) msg.remove();
    }
});