static/script.js

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

const elements = {
    chatMessages: document.getElementById('chatMessages'),
    userInput: document.getElementById('userInput')
};

function addMessage(role, message) {
    if (!elements.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;
    elements.chatMessages.appendChild(messageDiv);
    elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
    console.log(Added ${role} message: ${message});
}

function sendMessage() {
    const userInput = elements.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 = [];

    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' },
            { text: 'Both', class: 'gray' }
        ];
    } else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
        botResponse = Great choice! 🍽️ These are the available ingredients for ${lastMessage}:;
        fetchIngredients(lastMessage);
        return;
    }

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

function fetchIngredients(dietaryPreference) {
    fetch('/get_ingredients', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ dietary_preference: dietaryPreference })
    })
    .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', 'Great choice! These are available ingredients:');
            displayIngredientsList(ingredients);
            displaySelectedIngredients();
            console.log(Ingredients fetched for ${dietaryPreference}:, ingredients);
        }
    })
    .catch(error => {
        addMessage('bot', Error: Unable to connect to the ingredient database. ${error.message});
    });
}

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

    let ingredientsList = document.querySelector('.ingredients-list');
    if (!ingredientsList) {
        ingredientsList = document.createElement('div');
        ingredientsList.className = 'ingredients-list';
        elements.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 || '/static/placeholder.png'; // Use local placeholder if no image_url
        img.alt = ingredient.name;
        img.style.width = '80px';
        img.style.height = '80px';
        img.style.objectFit = 'cover';
        img.style.borderRadius = '5px';
        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() {
    if (!elements.chatMessages) {
        console.error('Chat messages container not found for selected ingredients!');
        return;
    }

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

    selectedIngredients.forEach(ingredient => {
        const div = document.createElement('div');
        div.style.display = 'flex';
        div.style.alignItems = 'center';
        div.style.margin = '5px 0';
        const nameSpan = document.createElement('span');
        nameSpan.textContent = ingredient.name;
        nameSpan.style.flex = '1';
        const removeButton = document.createElement('button');
        removeButton.innerHTML = '✖'; // Unicode for "X" symbol
        removeButton.onclick = () => {
            selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
            displaySelectedIngredients();
        };
        removeButton.style.marginLeft = '10px';
        removeButton.style.padding = '2px 8px';
        removeButton.style.backgroundColor = '#000000'; // Black background to match image
        removeButton.style.color = 'white'; // White "X" to match image
        removeButton.style.border = 'none';
        removeButton.style.borderRadius = '5px';
        removeButton.style.cursor = 'pointer';
        removeButton.style.fontSize = '16px'; // Adjust size for visibility
        removeButton.style.lineHeight = '1'; // Ensure "X" is centered
        div.appendChild(nameSpan);
        div.appendChild(removeButton);
        selectedArea.appendChild(div);
    });

    // Add Send button below selected ingredients
    const sendButton = document.createElement('button');
    sendButton.textContent = 'Send';
    sendButton.className = 'send-button';
    sendButton.onclick = sendSelectedIngredients;
    selectedArea.appendChild(sendButton);
}

function displayOptions(options) {
    if (!elements.chatMessages) {
        console.error('Chat messages container not found for options!');
        return;
    }
    const optionsDiv = document.createElement('div');
    optionsDiv.className = 'options-container';
    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);
        };
        optionsDiv.appendChild(button);
    });
    elements.chatMessages.appendChild(optionsDiv);
    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? }];
        selectedIngredients = [];
        elements.chatMessages.innerHTML = '';
        conversation.forEach(msg => addMessage(msg.role, msg.message));
        displayOptions([
            { text: 'Vegetarian', class: 'green' },
            { text: 'Non-Vegetarian', class: 'red' },
            { text: 'Both', class: 'gray' }
        ]);
    };
    optionsDiv.appendChild(backButton);
}

// Function to handle sending selected ingredients
function sendSelectedIngredients() {
    if (selectedIngredients.length === 0) {
        addMessage('bot', 'Please select at least one ingredient before sending!');
        return;
    }
    const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
    addMessage('user', Selected ingredients: ${ingredientsList});
    addMessage('bot', Great! I’ll suggest a recipe with ${ingredientsList}. How about a yogurt-based curry with onions and tomatoes? Let me know if you'd like to adjust!);
    selectedIngredients = []; // Reset after sending
    displaySelectedIngredients(); // Update the display
}

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

console.log('Script loaded successfully');