document.getElementById('submit').addEventListener('click', async function () {
    const input = document.getElementById('input').value.trim();
    if (!input) return;

    // Display user input
    displayMessage(input, true);

    // Clear input
    document.getElementById('input').value = '';

    // Fetch recipes based on input
    const response = await fetch('/get_recipes', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ input })
    });

    const recipes = await response.json();

    // Display bot response
    const botMessage = recipes.length
        ? "✨ Here are some recipes you might love based on your ingredients:"
        : "I couldn't find any recipes with those exact ingredients. Try some alternatives!";

    displayMessage(botMessage, false);

    // Display recipes
    recipes.forEach(recipe => {
        displayRecipeCard(recipe);
    });
});

document.getElementById('clear').addEventListener('click', function () {
    document.getElementById('messages').innerHTML = '';  // Clear the results
    document.getElementById('input').value = '';  // Clear the input field
});

function displayMessage(message, isUser) {
    const messageContainer = document.createElement('div');
    messageContainer.classList.add(isUser ? 'user-message' : 'bot-message');
    messageContainer.textContent = message;
    document.getElementById('messages').appendChild(messageContainer);
    scrollToBottom();
}

function displayRecipeCard(recipe) {
    const card = document.createElement('div');
    card.classList.add('recipe-card');
    card.innerHTML = `
        <img src="${recipe.image}" alt="${recipe.name}">
        <div class="details">
            <h3>${recipe.name}</h3>
            <p>${recipe.description}</p>
            <p><strong>Ingredients:</strong> ${recipe.ingredients.join(', ')}</p>
            <p><strong>Match Score:</strong> ${recipe.matchScore}%</p>
        </div>
    `;
    document.getElementById('messages').appendChild(card);
    scrollToBottom();
}

function scrollToBottom() {
    const messages = document.getElementById('messages');
    messages.scrollTop = messages.scrollHeight;
}