static/script.js

let conversation = [
    { role: 'bot', message: 'Hello! I’m Chef Bot, your culinary assistant! What’s your name?' }
];
let selectedItems = [];
let selectionBoxVisible = false;

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 });
        selectionBoxVisible = true;
        handleResponse(message);
    } else {
        addMessage('bot', 'Hey, don’t be shy! Type something or add some items to get started! 😄');
    }
    userInput.value = '';
    updateSelectionBox();
}

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

    if (conversation.length === 2) {
        botResponse = `Great to meet you, ${userInput}! 🍳 What kind of food are you craving today? Or ask me to help customize a dish!`;
        displayOptions([
            { text: 'Vegetarian', class: 'green' },
            { text: 'Non-Vegetarian', class: 'red' },
            { text: 'Both', class: 'gray' }
        ]);
        addMessage('bot', botResponse);
    } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
        botResponse = `Nice choice! Let me whip up some ${lowerInput} options for you...`;
        addMessage('bot', botResponse);
        fetchMenuItems(lowerInput);
    } else {
        fetch('/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message: userInput, session_id: 'default' })
        })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    addMessage('bot', `Oops! ${data.error}. Let’s try something else!`);
                } else {
                    addMessage('bot', data.response);
                    // Check if the input might be a menu item or ingredient
                    fetchMenuItems(null, userInput);
                }
            })
            .catch(error => {
                addMessage('bot', `Yikes! Couldn’t reach the assistant: ${error.message}. Try searching for 'chicken' or 'paneer'!`);
                fetchMenuItems(null, userInput);
            });
    }
}

function updateSelectionBox() {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) return;

    const existingBox = document.querySelector('.selection-box');
    if (existingBox) existingBox.remove();

    if (!selectionBoxVisible && selectedItems.length === 0) return;

    const selectionBox = document.createElement('div');
    selectionBox.className = 'selection-box';

    const vegButton = document.createElement('button');
    vegButton.textContent = 'Vegetarian';
    vegButton.className = 'dietary-button green';
    vegButton.onclick = () => fetchMenuItems('vegetarian');
    selectionBox.appendChild(vegButton);

    const nonVegButton = document.createElement('button');
    nonVegButton.textContent = 'Non-Vegetarian';
    nonVegButton.className = 'dietary-button red';
    nonVegButton.onclick = () => fetchMenuItems('non-vegetarian');
    selectionBox.appendChild(nonVegButton);

    const bothButton = document.createElement('button');
    bothButton.textContent = 'Both';
    bothButton.className = 'dietary-button gray';
    bothButton.onclick = () => fetchMenuItems('both');
    selectionBox.appendChild(bothButton);

    const label = document.createElement('span');
    label.textContent = 'Selected Items:';
    selectionBox.appendChild(label);

    selectedItems.forEach((item, index) => {
        const itemContainer = document.createElement('div');
        itemContainer.className = 'selected-item';

        const img = document.createElement('img');
        img.src = item.image_url || 'https://via.placeholder.com/30';
        img.alt = item.name;
        img.className = 'selected-item-image';
        itemContainer.appendChild(img);

        const itemSpan = document.createElement('span');
        itemSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
        itemContainer.appendChild(itemSpan);

        const removeButton = document.createElement('button');
        removeButton.textContent = 'Remove';
        removeButton.className = 'remove-button';
        removeButton.onclick = () => {
            selectedItems.splice(index, 1);
            addMessage('bot', `Removed "${item.name}" from your selection.`);
            updateSelectionBox();
        };
        itemContainer.appendChild(removeButton);

        selectionBox.appendChild(itemContainer);
    });

    const textInput = document.createElement('input');
    textInput.type = 'text';
    textInput.placeholder = 'Add Sector_Detail__c item...';
    textInput.className = 'manual-input';
    textInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter' && textInput.value.trim()) {
            const itemName = textInput.value.trim();
            fetchSectorItemDetails(itemName);
            textInput.value = '';
        }
    });
    selectionBox.appendChild(textInput);

    if (selectedItems.length > 0) {
        const quantityInput = document.createElement('input');
        quantityInput.type = 'number';
        quantityInput.min = '1';
        quantityInput.value = '1';
        quantityInput.placeholder = 'Quantity';
        quantityInput.className = 'quantity-input';
        selectionBox.appendChild(quantityInput);

        const submitButton = document.createElement('button');
        submitButton.textContent = 'Submit to Salesforce';
        submitButton.className = 'submit-button';
        submitButton.onclick = () => promptAndSubmit(quantityInput.value);
        selectionBox.appendChild(submitButton);

        const orderNameInput = document.createElement('input');
        orderNameInput.type = 'text';
        orderNameInput.placeholder = 'Custom Order Name (optional)';
        orderNameInput.className = 'order-name-input';
        selectionBox.appendChild(orderNameInput);
    }

    chatMessages.appendChild(selectionBox);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    console.log('Updated selection box with items:', selectedItems.map(item => ({ name: item.name, category: item.category })));
}

function fetchMenuItems(dietaryPreference, searchTerm = '') {
    const payload = {};
    if (dietaryPreference) payload.dietary_preference = dietaryPreference;
    if (searchTerm) payload.search_term = searchTerm;
    fetch('/get_menu_items', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                addMessage('bot', `Oops! Trouble fetching items: ${data.error}. Try again or search something specific.`);
            } else if (data.menu_items.length > 0) {
                addMessage('bot', `Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} for "${searchTerm || dietaryPreference}"!`);
                displayItemsList(data.menu_items, 'menuItemsList', true);
            } else {
                addMessage('bot', `No items found for "${searchTerm || dietaryPreference}". Try something like "paneer" or "chicken"!`);
            }
            console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items);
        })
        .catch(error => {
            addMessage('bot', `Yikes! Couldn’t reach Salesforce: ${error.message}. I’ll retry in a sec...`);
            setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
        });
}

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', `Couldn’t find anything for "${searchTerm}": ${data.error}. Got another idea?`);
            } else if (data.suggestions.length > 0) {
                addMessage('bot', `Check out these suggestions for "${searchTerm}" from Ingredient_Object__c:`);
                displayItemsList(data.suggestions, 'suggestionsList', false);
            } else {
                addMessage('bot', `No matches for "${searchTerm}" in Ingredient_Object__c. Try "chicken" or "paneer"?`);
            }
            console.log(`Suggestions for ${searchTerm}:`, data.suggestions);
        })
        .catch(error => {
            addMessage('bot', `Error fetching suggestions: ${error.message}. Retrying...`);
            setTimeout(() => suggestItems(searchTerm), 2000);
        });
}

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', `Couldn’t find "${itemName}" in Ingredient_Object__c. Add it manually in the box below!`);
                updateSelectionBox();
            } else {
                const details = data.item_details;
                if (selectedItems.some(item => item.name === details.name)) {
                    addMessage('bot', `"${details.name}" is already in your selection!`);
                } else {
                    selectedItems.push({ ...details, quantity: 1 });
                    addMessage('bot', `Added "${itemName}" to your selection! Check the box below.`);
                    updateSelectionBox();
                }
            }
        })
        .catch(error => {
            addMessage('bot', `Trouble fetching "${itemName}": ${error.message}. Add it manually or I’ll retry...`);
            updateSelectionBox();
            setTimeout(() => fetchItemDetails(itemName), 2000);
        });
}

function fetchSectorItemDetails(itemName) {
    fetch('/get_sector_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, I couldn’t find "${itemName}" in Sector_Detail__c. Try another item!`);
            } else {
                const details = data.item_details;
                if (selectedItems.some(item => item.name === details.name)) {
                    addMessage('bot', `"${details.name}" is already in your selection!`);
                } else {
                    selectedItems.push({ ...details, quantity: 1 });
                    addMessage('bot', `Added "${details.name}" to your selection from Sector_Detail__c! Check the box below.`);
                    updateSelectionBox();
                }
            }
        })
        .catch(error => {
            addMessage('bot', `Error fetching details for "${itemName}": ${error.message}. I’ll retry in a sec...`);
            setTimeout(() => fetchSectorItemDetails(itemName), 2000);
        });
}

function showDescriptionPopup(item) {
    const existingPopup = document.querySelector('.description-popup');
    if (existingPopup) existingPopup.remove();

    const popup = document.createElement('div');
    popup.className = 'description-popup';

    const content = document.createElement('div');
    content.className = 'popup-content';

    const img = document.createElement('img');
    img.src = item.image_url || 'https://via.placeholder.com/100';
    img.alt = item.name;
    img.className = 'popup-image';
    content.appendChild(img);

    const title = document.createElement('h3');
    title.textContent = item.name;
    content.appendChild(title);

    const desc = document.createElement('p');
    desc.textContent = item.description || 'No description available';
    content.appendChild(desc);

    if (item.source === 'Menu_Item__c') {
        const fields = [
            { label: 'Category', value: item.category },
            { label: 'Veg/Non-Veg', value: item.veg_nonveg },
            { label: 'Ingredients', value: item.ingredients },
            { label: 'Nutritional Info', value: item.nutritional_info },
            { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
            { label: 'Sector', value: item.sector },
            { label: 'Spice Levels', value: item.spice_levels },
            { label: 'Dynamic Dish', value: item.dynamic_dish ? 'Yes' : 'No' }
        ];
        fields.forEach(field => {
            if (field.value) {
                const p = document.createElement('p');
                p.className = 'menu-item-field';
                p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`;
                content.appendChild(p);
            }
        });
    } else {
        const category = document.createElement('p');
        category.textContent = `Category: ${item.category || 'Not specified'}`;
        content.appendChild(category);
    }

    const buttonContainer = document.createElement('div');
    buttonContainer.className = 'button-container';

    const addButton = document.createElement('button');
    addButton.textContent = 'Add';
    addButton.className = 'popup-add-button';
    addButton.onclick = () => {
        const selectedItem = {
            name: item.name,
            image_url: item.image_url || '',
            category: item.category || 'Not specified',
            description: item.description || 'No description available',
            source: item.source,
            quantity: 1
        };
        if (item.source === 'Menu_Item__c') {
            selectedItem.ingredients = item.ingredients;
            selectedItem.nutritional_info = item.nutritional_info;
            selectedItem.price = item.price;
            selectedItem.sector = item.sector;
            selectedItem.spice_levels = item.spice_levels;
            selectedItem.veg_nonveg = item.veg_nonveg;
            selectedItem.dynamic_dish = item.dynamic_dish;
        }
        if (selectedItems.some(existing => existing.name === selectedItem.name)) {
            addMessage('bot', `"${selectedItem.name}" is already in your selection!`);
        } else {
            selectedItems.push(selectedItem);
            addMessage('bot', `Added "${selectedItem.name}" to your selection! Check the box below.`);
            updateSelectionBox();
        }
        popup.remove();
    };
    buttonContainer.appendChild(addButton);

    const closeButton = document.createElement('button');
    closeButton.textContent = 'Close';
    closeButton.className = 'popup-close-button';
    closeButton.onclick = () => popup.remove();
    buttonContainer.appendChild(closeButton);

    content.appendChild(buttonContainer);
    popup.appendChild(content);
    document.body.appendChild(popup);
}

function displayItemsList(items, containerId, isDetailed = false) {
    const container = document.getElementById(containerId);
    if (!container) {
        console.error(`${containerId} container not found!`);
        addMessage('bot', 'Something’s off with the display. Try again?');
        return;
    }
    container.innerHTML = '';
    container.className = 'ingredients-list';

    items.forEach(item => {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'ingredient-item';

        const img = document.createElement('img');
        img.src = item.image_url || 'https://via.placeholder.com/60';
        img.alt = item.name;
        img.className = 'ingredient-image';
        itemDiv.appendChild(img);

        const contentDiv = document.createElement('div');
        contentDiv.className = 'ingredient-content';

        const nameDiv = document.createElement('div');
        nameDiv.textContent = item.name;
        nameDiv.className = 'ingredient-name';
        contentDiv.appendChild(nameDiv);

        if (item.source === 'Menu_Item__c' && isDetailed) {
            const fields = [
                { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
                { label: 'Veg/Non-Veg', value: item.veg_nonveg },
                { label: 'Spice Level', value: item.spice_levels },
                { label: 'Category', value: item.category },
                { label: 'Ingredients', value: item.ingredients },
                { label: 'Nutritional Info', value: item.nutritional_info },
                { label: 'Sector', value: item.sector },
                { label: 'Dynamic Dish', value: item.dynamic_dish ? 'Yes' : 'No' }
            ];
            fields.forEach(field => {
                if (field.value) {
                    const p = document.createElement('p');
                    p.className = 'menu-item-field';
                    p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`;
                    contentDiv.appendChild(p);
                }
            });
        } else if (item.source === 'Sector_Detail__c' && isDetailed) {
            const desc = document.createElement('p');
            desc.className = 'menu-item-field';
            desc.innerHTML = `<strong>Description:</strong> ${item.description}`;
            contentDiv.appendChild(desc);
        }

        itemDiv.appendChild(contentDiv);

        const addButton = document.createElement('button');
        addButton.textContent = 'Add';
        addButton.className = 'show-desc-button';
        addButton.onclick = () => {
            const selectedItem = {
                name: item.name,
                image_url: item.image_url || '',
                category: item.category || 'Not specified',
                description: item.description || 'No description available',
                source: item.source,
                quantity: 1
            };
            if (item.source === 'Menu_Item__c') {
                selectedItem.ingredients = item.ingredients;
                selectedItem.nutritional_info = item.nutritional_info;
                selectedItem.price = item.price;
                selectedItem.sector = item.sector;
                selectedItem.spice_levels = item.spice_levels;
                selectedItem.veg_nonveg = item.veg_nonveg;
                selectedItem.dynamic_dish = item.dynamic_dish;
            }
            if (selectedItems.some(existing => existing.name === selectedItem.name)) {
                addMessage('bot', `"${selectedItem.name}" is already in your selection!`);
            } else {
                selectedItems.push(selectedItem);
                addMessage('bot', `Added "${selectedItem.name}" to your selection! Check the box below.`);
                updateSelectionBox();
            }
        };
        itemDiv.appendChild(addButton);

        if (item.source === 'Sector_Detail__c' && isDetailed) {
            const showDescButton = document.createElement('button');
            showDescButton.textContent = 'Show Details';
            showDescButton.className = 'show-desc-button';
            showDescButton.onclick = () => showDescriptionPopup(item);
            itemDiv.appendChild(showDescButton);
        }

        container.appendChild(itemDiv);
    });
}

function displayOptions(options) {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) {
        console.error('Chat messages container not found for options!');
        return;
    }
    const optionsDiv = document.createElement('div');
    optionsDiv.style.marginTop = '10px';

    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 });
            selectionBoxVisible = true;
            handleResponse(opt.text);
            updateSelectionBox();
        };
        optionsDiv.appendChild(button);
    });

    const backButton = document.createElement('button');
    backButton.textContent = 'Go Back';
    backButton.className = 'option-button';
    backButton.style.marginTop = '10px';
    backButton.onclick = () => resetConversation();
    optionsDiv.appendChild(document.createElement('br'));
    optionsDiv.appendChild(backButton);

    chatMessages.appendChild(optionsDiv);
}

function promptAndSubmit(quantity) {
    const orderNameInput = document.querySelector('.order-name-input');
    const customOrderName = orderNameInput ? orderNameInput.value.trim() : '';
    if (confirm(`Submit ${selectedItems.length} items with quantity ${quantity}?`)) {
        submitToSalesforce(customOrderName, quantity);
    } else {
        addMessage('bot', 'Submission cancelled. Add more items or try again!');
    }
}

function submitToSalesforce(customOrderName, quantity) {
    if (selectedItems.length === 0) {
        addMessage('bot', 'No items to submit yet! Add some tasty picks first! 😊');
        return;
    }

    const itemsToSubmit = selectedItems.map(item => ({
        name: item.name,
        category: item.category || 'Not specified',
        description: item.description || 'No description available',
        image_url: item.image_url || '',
        quantity: parseInt(quantity) || 1
    }));

    fetch('/submit_items', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ items: itemsToSubmit, custom_order_name: customOrderName })
    })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                addMessage('bot', `Uh-oh! Failed to submit items: ${data.error}. Want to try again?`);
            } else {
                addMessage('bot', `${data.success}! Your culinary choices are now saved under Ingredient_Name__c: ${data.ingredient_name}. What’s next on the menu?`);
                selectedItems = [];
                updateSelectionBox();
            }
        })
        .catch(error => {
            addMessage('bot', `Error submitting items: ${error.message}. I’ll retry shortly...`);
            setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000);
        });
}

function resetConversation() {
    const userName = conversation.length > 1 ? conversation[1].message : 'Friend';
    conversation = [
        { role: 'bot', message: `Hello! I’m Chef Bot, your culinary assistant! What’s your name?` },
        { role: 'user', message: userName },
        { role: 'bot', message: `Great to meet you, ${userName}! 🍳 What kind of food are you craving today? Or ask me to help customize a dish!` }
    ];
    selectedItems = [];
    selectionBoxVisible = true;
    const chatMessages = document.getElementById('chatMessages');
    chatMessages.innerHTML = '';
    conversation.forEach(msg => addMessage(msg.role, msg.message));
    displayOptions([
        { text: 'Vegetarian', class: 'green' },
        { text: 'Non-Vegetarian', class: 'red' },
        { text: 'Both', class: 'gray' }
    ]);
    document.getElementById('suggestionsList').innerHTML = '';
    document.getElementById('menuItemsList').innerHTML = '';
    updateSelectionBox();
}

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

console.log('Chef Bot script loaded successfully!');