static/script.js

let conversation = [
    { role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know your name?' }
];
let selectedItems = [];

function addMessage(role, message) {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) {
        console.error('Chat messages container not found!');
        return;
    }
    const messageDiv = document.createElement('div');
    messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
    messageDiv.textContent = message;
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    console.log(`Added ${role} message: ${message}`);
}

function sendMessage() {
    const userInput = document.getElementById('userInput');
    if (!userInput) {
        console.error('User input field not found!');
        return;
    }
    const message = userInput.value.trim();
    if (message) {
        addMessage('user', message);
        conversation.push({ role: 'user', message: message });
        userInput.value = '';
        setTimeout(() => handleResponse(message), 500);
    } else {
        console.warn('Empty message!');
    }
}

function handleResponse(userInput) {
    const lowerInput = userInput.toLowerCase();
    let botResponse = '';
    let options = [];

    // First message: Ask for dietary preference after name
    if (conversation.length === 2) {
        botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`;
        options = [
            { text: 'Vegetarian', class: 'green' },
            { text: 'Non-Vegetarian', class: 'red' },
            { text: 'Both', class: 'gray' }
        ];
    }
    // After dietary preference, fetch menu items
    else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
        botResponse = `Great choice! 🍽️ Here are some menu items for ${lowerInput}:`;
        fetchMenuItems(lowerInput); // Fetch from Salesforce based on preference
        return;
    }
    // Otherwise, treat input as a search term for suggestions
    else {
        suggestItems(lowerInput); // Fetch suggestions dynamically
        return;
    }

    addMessage('bot', botResponse);
    if (options.length > 0) {
        displayOptions(options);
    }
}

// Fetch menu items from Salesforce
function fetchMenuItems(dietaryPreference) {
    fetch('/get_menu_items', { method: 'GET' })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
            } else {
                const filteredItems = data.menu_items.filter(item => {
                    if (dietaryPreference === 'both') return true;
                    // Assuming Salesforce has a Category__c field for filtering
                    return dietaryPreference === 'vegetarian' ? item.name.toLowerCase().includes('veg') : !item.name.toLowerCase().includes('veg');
                });
                addMessage('bot', 'Here are some available menu items:');
                displayItemsList(filteredItems, 'menuItemsList');
                console.log(`Menu items fetched for ${dietaryPreference}:`, filteredItems);
            }
        })
        .catch(error => {
            addMessage('bot', `Error: Unable to connect to the database. ${error.message}`);
        });
}

// Fetch suggestions from Salesforce based on user input
function suggestItems(searchTerm) {
    fetch('/suggest_items', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ search_term: searchTerm })
    })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                addMessage('bot', `Sorry, I couldn’t find anything for "${searchTerm}": ${data.error}`);
            } else if (data.suggestions.length > 0) {
                addMessage('bot', `Here are some suggestions for "${searchTerm}":`);
                displayItemsList(data.suggestions, 'suggestionsList');
                console.log(`Suggestions fetched for ${searchTerm}:`, data.suggestions);
            } else {
                addMessage('bot', `No suggestions found for "${searchTerm}". Try something else!`);
            }
        })
        .catch(error => {
            addMessage('bot', `Error fetching suggestions: ${error.message}`);
        });
}

// Fetch item details from Salesforce
function fetchItemDetails(itemName) {
    fetch('/get_item_details', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ item_name: itemName })
    })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                addMessage('bot', `Sorry, couldn’t get details for "${itemName}": ${data.error}`);
            } else {
                const details = data.item_details;
                selectedItems.push(details);
                addMessage('bot', `Added "${itemName}" to your selection. Here are the details:`);
                displaySelectedItems();
                console.log(`Details fetched for ${itemName}:`, details);
            }
        })
        .catch(error => {
            addMessage('bot', `Error fetching details: ${error.message}`);
        });
}

// Display items (menu items or suggestions)
function displayItemsList(items, containerId) {
    const container = document.getElementById(containerId);
    if (!container) {
        console.error(`${containerId} container not found!`);
        return;
    }
    container.innerHTML = '';

    items.forEach(item => {
        const itemDiv = document.createElement('div');
        itemDiv.className = containerId === 'menuItemsList' ? 'ingredient-item' : 'suggestion-item';
        const img = document.createElement('img');
        img.src = item.image_url || 'https://via.placeholder.com/60';
        img.alt = item.name;
        const name = document.createElement('div');
        name.textContent = item.name;
        name.style.textAlign = 'center';
        name.style.marginTop = '5px';
        name.style.fontSize = '12px';
        const button = document.createElement('button');
        button.textContent = 'Add';
        button.onclick = () => fetchItemDetails(item.name);
        itemDiv.appendChild(img);
        itemDiv.appendChild(name);
        itemDiv.appendChild(button);
        container.appendChild(itemDiv);
    });
}

// Display selected items with details
function displaySelectedItems() {
    const selectedArea = document.getElementById('itemDetails');
    if (!selectedArea) {
        console.error('Item details container not found!');
        return;
    }
    selectedArea.innerHTML = '';

    selectedItems.forEach(item => {
        const div = document.createElement('div');
        div.innerHTML = `<strong>${item.name}</strong><br>Description: ${item.description}<br>Ingredients: ${item.ingredients}`;
        selectedArea.appendChild(div);
    });
}

// Display options (e.g., Vegetarian, Non-Vegetarian, Both)
function displayOptions(options) {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) {
        console.error('Chat messages container not found for options!');
        return;
    }
    chatMessages.innerHTML = '';

    options.forEach(opt => {
        const button = document.createElement('button');
        button.textContent = opt.text;
        button.className = `option-button ${opt.class}`;
        button.onclick = () => {
            addMessage('user', opt.text);
            conversation.push({ role: 'user', message: opt.text });
            handleResponse(opt.text);
        };
        chatMessages.appendChild(button);
    });

    chatMessages.appendChild(document.createElement('br'));
    const backButton = document.createElement('button');
    backButton.textContent = 'Go Back';
    backButton.className = 'option-button';
    backButton.onclick = () => {
        const userName = conversation.length > 1 ? conversation[1].message : 'User';
        conversation = [
            { role: 'bot', message: `Hi there! I'm Chef Bot! May I know your name?` },
            { role: 'user', message: userName },
            { role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` }
        ];
        selectedItems = [];
        chatMessages.innerHTML = '';
        conversation.forEach(msg => addMessage(msg.role, msg.message));
        displayOptions([
            { text: 'Vegetarian', class: 'green' },
            { text: 'Non-Vegetarian', class: 'red' },
            { text: 'Both', class: 'gray' }
        ]);
    };
    chatMessages.appendChild(backButton);
}

// Event listeners
document.getElementById('userInput').addEventListener('keypress', (e) => {
    if (e.key === 'Enter') sendMessage();
});

// Initial load check
console.log('Script loaded successfully');