const dishes = {
    "rice": ["Biryani", "Fried Rice", "Pulao"],
    "milk": ["Kheer", "Milkshake", "Payasam"],
    "chicken": ["Chicken Curry", "Grilled Chicken", "Chicken Salad"],
    "paneer": ["Paneer Butter Masala", "Paneer Tikka", "Palak Paneer"],
    "potatoes": ["Aloo Gobi", "Aloo Tikki", "Mashed Potatoes"],
};

function sendMessage() {
    const userInput = document.getElementById('user-input').value.toLowerCase();
    if (userInput.trim() === "") return;
    
    displayMessage(userInput, 'user');

    const ingredients = userInput.split(' ').map(ingredient => ingredient.trim());
    const suggestedDishes = getDishSuggestions(ingredients);

    setTimeout(() => {
        displayBotMessage(suggestedDishes);
    }, 1000);

    document.getElementById('user-input').value = '';
}

function displayMessage(message, sender) {
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', sender === 'bot' ? 'bot-message' : 'user-message');
    messageElement.textContent = message;
    document.getElementById('chatbox-body').appendChild(messageElement);
    document.getElementById('chatbox-body').scrollTop = document.getElementById('chatbox-body').scrollHeight;
}

function displayBotMessage(dishes) {
    let botMessage = 'Here are some dishes I suggest based on the ingredients you provided:\n\n';
    if (dishes.length === 0) {
        botMessage += 'Sorry, I couldn\'t find any dishes for the given ingredients.';
    } else {
        dishes.forEach(dish => {
            botMessage += `- ${dish}\n`;
        });
    }

    displayMessage(botMessage, 'bot');
    displayFoodItems(dishes);
}

function getDishSuggestions(ingredients) {
    let suggestedDishes = [];
    ingredients.forEach(ingredient => {
        if (dishes[ingredient]) {
            suggestedDishes = [...suggestedDishes, ...dishes[ingredient]];
        }
    });
    return [...new Set(suggestedDishes)]; // Remove duplicates
}

function displayFoodItems(dishes) {
    const foodItemsContainer = document.getElementById('food-items');
    foodItemsContainer.innerHTML = ''; // Clear previous items
    foodItemsContainer.style.display = dishes.length > 0 ? 'block' : 'none';

    dishes.forEach(dish => {
        const dishElement = document.createElement('div');
        dishElement.textContent = dish;
        dishElement.onclick = () => showFoodDescription(dish);
        foodItemsContainer.appendChild(dishElement);
    });
}

function showFoodDescription(dish) {
    alert(`You selected: ${dish}\nHere is a brief description of ${dish}: ...`);
}