static/script.js

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

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 lastMessage = conversation[conversation.length - 1].message.toLowerCase();
    let botResponse = '';
    let options = [];

    // Store food preference (Vegetarian or Non-Vegetarian)
    if (conversation.length === 2) { // After name input
        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' }
        ];
    } else if (lastMessage.includes('non-vegetarian') || lastMessage.includes('non veg') || lastMessage.includes('nonveg')) {
        conversation.push({ role: 'user', message: 'Non-Vegetarian' }); // Store Non-Vegetarian preference
        console.log("Food preference selected: Non-Vegetarian");
        console.log("Conversation Array after storing Non-Vegetarian:", conversation); // Debugging: Log conversation
        botResponse = 'Great choice! 🍽️ We have some amazing non-vegetarian options! What\'s your dietary preference?';
        options = [
            { text: 'Low Carb', class: '' },
            { text: 'Dairy-Free', class: '' },
            { text: 'Keto', class: '' },
            { text: 'Halal', class: '' }
        ];
    } else if (lastMessage.includes('vegetarian')) {
        conversation.push({ role: 'user', message: 'Vegetarian' }); // Store Vegetarian preference
        console.log("Food preference selected: Vegetarian");
        console.log("Conversation Array after storing Vegetarian:", conversation); // Debugging: Log conversation
        botResponse = 'Great choice! 🍽️ We have some amazing vegetarian options! What\'s your dietary preference?';
        options = [
            { text: 'Vegan', class: '' },
            { text: 'Gluten-Free', class: '' },
            { text: 'Low Carb', class: '' },
            { text: 'Dairy-Free', class: '' },
            { text: 'Keto', class: '' },
            { text: 'Halal', class: '' }
        ];
    } else if (lastMessage.includes('low carb') || lastMessage.includes('dairy-free') || lastMessage.includes('keto') || lastMessage.includes('halal') || lastMessage.includes('gluten-free') || lastMessage.includes('vegan') || lastMessage.includes('vegetarian')) {
        // Fetch ingredients based on previous food preference (Vegetarian or Non-Vegetarian)
        console.log("Conversation Array before finding food preference:", conversation); // Debugging
        const foodPreference = conversation.find(msg => msg.role === 'user' && (msg.message.toLowerCase().includes('vegetarian') || msg.message.toLowerCase().includes('non-vegetarian')))?.message.toLowerCase();

        console.log("Previous food preference: " + foodPreference); // Debug which food preference is selected

        if (foodPreference === 'vegetarian') {
            console.log("Fetching Vegetarian ingredients..."); // Debug when fetching vegetarian ingredients
            fetchIngredients('veg'); // Fetch Vegetarian ingredients
        } else if (foodPreference === 'non-vegetarian') {
            console.log("Fetching Non-Vegetarian ingredients..."); // Debug when fetching non-vegetarian ingredients
            fetchIngredients('non-vegetarian'); // Fetch Non-Vegetarian ingredients
        }
        return; // Exit early to fetch ingredients
    }

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




function fetchIngredients(foodPreference) {
    fetch('/get_ingredients', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ dietary_preference: foodPreference }) // Send the food preference to the backend
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
        } else {
            const ingredients = data.ingredients || [];
            addMessage('bot', 'Here are some available ingredients:');
            displayIngredientsList(ingredients);
            displaySelectedIngredients();
        }
    })
    .catch(error => {
        addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
    });
}


function displayIngredientsList(ingredients) {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) {
        console.error('Chat messages container not found for ingredients!');
        return;
    }

    // Create or update ingredients list
    let ingredientsList = document.querySelector('.ingredients-list');
    if (!ingredientsList) {
        ingredientsList = document.createElement('div');
        ingredientsList.className = 'ingredients-list';
        chatMessages.appendChild(ingredientsList);
    } else {
        ingredientsList.innerHTML = '';
    }

    ingredients.forEach(ingredient => {
        const item = document.createElement('div');
        item.className = 'ingredient-item';
        const img = document.createElement('img');
        img.src = ingredient.image_url || 'https://via.placeholder.com/80'; // Fallback image
        img.alt = ingredient.name;
        const name = document.createElement('div');
        name.textContent = ingredient.name;
        name.style.textAlign = 'center';
        name.style.marginTop = '5px';
        name.style.fontSize = '12px';
        const button = document.createElement('button');
        button.textContent = 'Add';
        button.onclick = () => {
            if (!selectedIngredients.some(item => item.name === ingredient.name)) {
                selectedIngredients.push(ingredient);
                displaySelectedIngredients();
            }
        };
        item.appendChild(img);
        item.appendChild(name);
        item.appendChild(button);
        ingredientsList.appendChild(item);
    });
}


function displaySelectedIngredients() {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) {
        console.error('Chat messages container not found for selected ingredients!');
        return;
    }

    // Create or update selected ingredients area
    let selectedArea = document.querySelector('.selected-ingredients');
    if (!selectedArea) {
        selectedArea = document.createElement('div');
        selectedArea.className = 'selected-ingredients';
        chatMessages.appendChild(selectedArea);
    } else {
        selectedArea.innerHTML = '';
    }

    selectedIngredients.forEach(ingredient => {
        const div = document.createElement('div');
        div.textContent = ingredient.name;
        selectedArea.appendChild(div);
    });

    // Check if there are selected ingredients
    if (selectedIngredients.length > 0) {
        // Create and display the Submit button
        let submitButton = document.querySelector('.submit-button');
        if (!submitButton) {
            submitButton = document.createElement('button');
            submitButton.className = 'submit-button';
            submitButton.textContent = 'Submit Ingredients';
            submitButton.onclick = () => {
                submitIngredients(selectedIngredients);
            };
            chatMessages.appendChild(submitButton);
        }
    }
}

function submitIngredients(selectedIngredients) {
    fetch('/submit_ingredients', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ ingredients: selectedIngredients })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Now fetch dish suggestions
            fetch('/get_dish_suggestions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ ingredients: selectedIngredients })
            })
            .then(response => response.json())
            .then(suggestionData => {
                if (suggestionData.suggestions) {
                    // Display dish suggestions
                    displayDishSuggestions(suggestionData.suggestions);
                }
            });
        } else {
            addMessage('bot', 'There was an issue submitting your ingredients. Please try again.');
        }
    })
    .catch(error => {
        addMessage('bot', `Error: ${error.message}`);
    });
}

function displayDishSuggestions(suggestions) {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) {
        console.error('Chat messages container not found for dish suggestions!');
        return;
    }
    addMessage('bot', `Based on your ingredients, here are some dish suggestions:`);
    
    // Create and display the suggestions
    const suggestionDiv = document.createElement('div');
    suggestionDiv.className = 'suggestions-list';
    suggestionDiv.textContent = suggestions;
    chatMessages.appendChild(suggestionDiv);
}



function displayOptions(options) {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) {
        console.error('Chat messages container not found for options!');
        return;
    }
    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 });
            chatMessages.innerHTML = ''; // Clear previous messages
            conversation.forEach(msg => addMessage(msg.role, msg.message));
            setTimeout(() => handleResponse(opt.text), 500);
        };
        chatMessages.appendChild(button);
    });
    chatMessages.appendChild(document.createElement('br'));
    const backButton = document.createElement('button');
    backButton.textContent = 'Go Back';
    backButton.className = 'option-button';
    backButton.onclick = () => {
        conversation.pop(); // Remove last user input
        selectedIngredients = []; // Clear selected ingredients
        chatMessages.innerHTML = ''; // Clear previous messages
        conversation.forEach(msg => addMessage(msg.role, msg.message));
        setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
    };
    chatMessages.appendChild(backButton);
}

// Add event listener for Enter key
document.getElementById('userInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

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