static/script.js

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

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 = [];

    if (currentStep === 'name' && conversation.length === 2) {
        currentStep = 'dietary';
        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 (currentStep === 'dietary' && (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian'))) {
        currentStep = 'ingredients';
        botResponse = 'Great choice! 🍽️ Please select your ingredients from the list below.';
    } else if (currentStep === 'ingredients' && selectedIngredients.length > 0) {
        // Wait for "Send" button
        return;
    } else if (currentStep === 'recipes') {
        if (lastMessage.includes('back')) {
            if (conversation.length > 2) {
                conversation.pop(); // Remove 'back'
                const prevMessage = conversation[conversation.length - 1].message.toLowerCase();
                if (prevMessage.includes('vegetarian') || prevMessage.includes('non-vegetarian')) {
                    currentStep = 'dietary';
                    selectedIngredients = [];
                    chatMessages.innerHTML = '';
                    conversation.forEach(msg => addMessage(msg.role, msg.message));
                    handleResponse(prevMessage);
                    return;
                } else if (prevMessage.includes('send')) {
                    currentStep = 'ingredients';
                    chatMessages.innerHTML = '';
                    conversation.forEach(msg => addMessage(msg.role, msg.message));
                    displaySelectedIngredients();
                    addSendButton();
                    return;
                }
            }
        }
    }

    addMessage('bot', botResponse);
    if (options.length > 0) {
        displayOptions(options);
    } else if (currentStep === 'ingredients') {
        fetchIngredients(lastMessage);
    } else if (currentStep === 'recipes') {
        displayBackButton(); // Ensure back button is available
    }
}

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);
        }
    })
    .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;
    }

    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';
        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);
    });
    displaySelectedIngredients(); // Show selected ingredients below
    addSendButton(); // Add Send button below ingredients
}

function displaySelectedIngredients() {
    const chatMessages = document.getElementById('chatMessages');
    if (!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';
        chatMessages.appendChild(selectedArea);
    } else {
        selectedArea.innerHTML = '';
    }

    if (selectedIngredients.length > 0) {
        selectedIngredients.forEach(ingredient => {
            const div = document.createElement('div');
            div.textContent = ingredient.name;
            selectedArea.appendChild(div);
        });
    } else {
        selectedArea.innerHTML = '<div>No ingredients selected yet.</div>';
    }
}

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

    let sendButton = document.querySelector('.send-button');
    if (!sendButton) {
        sendButton = document.createElement('button');
        sendButton.textContent = 'Send';
        sendButton.className = 'option-button send-button';
        sendButton.onclick = () => {
            if (selectedIngredients.length > 0) {
                generateRecipes();
            } else {
                addMessage('bot', 'Please select at least one ingredient first!');
            }
        };
        chatMessages.appendChild(sendButton);
    }
}

function generateRecipes() {
    const ingredients = selectedIngredients.map(item => item.name);
    fetch('/generate_recipes', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ ingredients: ingredients })
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            addMessage('bot', `Error generating recipes: ${data.error}`);
        } else {
            currentStep = 'recipes';
            addMessage('bot', 'Here are 5 South Indian recipes based on your ingredients:');
            displayRecipes(data.recipes);
        }
    })
    .catch(error => {
        addMessage('bot', `Error: Unable to generate recipes. ${error.message}`);
    });
}

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

    recipes.forEach(recipe => {
        const item = document.createElement('div');
        item.className = 'recipe-item';
        const img = document.createElement('img');
        img.src = recipe.image_url;
        img.alt = recipe.name;
        img.style.width = '100px';
        img.style.height = '100px';
        img.style.objectFit = 'cover';
        const name = document.createElement('div');
        name.textContent = recipe.name;
        name.style.margin = '5px 0';
        const desc = document.createElement('div');
        desc.textContent = recipe.description;
        desc.style.fontSize = '12px';
        const addButton = document.createElement('button');
        addButton.textContent = 'Add to Cart';
        addButton.className = 'option-button';
        addButton.onclick = () => showPopup(recipe);
        const backButton = document.createElement('button');
        backButton.textContent = 'Back';
        backButton.className = 'option-button';
        backButton.onclick = () => {
            addMessage('user', 'Back');
            conversation.push({ role: 'user', message: 'Back' });
            handleResponse('Back');
        };
        item.appendChild(img);
        item.appendChild(name);
        item.appendChild(desc);
        item.appendChild(addButton);
        item.appendChild(backButton);
        chatMessages.appendChild(item);
    });
}

function showPopup(recipe) {
    const popup = document.getElementById('popup');
    const popupContent = document.getElementById('popupContent');
    if (!popup || !popupContent) return;

    popupContent.innerHTML = `
        <h3>${recipe.name}</h3>
        <img src="${recipe.image_url}" alt="${recipe.name}" style="width: 100%; max-width: 250px;">
        <p><strong>Description:</strong> ${recipe.description}</p>
        <p><strong>Preparation Steps:</strong> ${recipe.details.preparation}</p>
        <p><strong>Key Ingredients:</strong> ${recipe.details.key_ingredients.join(', ')}</p>
    `;
    popup.style.display = 'block';
}

function closePopup() {
    const popup = document.getElementById('popup');
    if (popup) popup.style.display = 'none';
}

function resetChat() {
    conversation = [{ role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know your name?' }];
    selectedIngredients = [];
    currentStep = 'name';
    const chatMessages = document.getElementById('chatMessages');
    if (chatMessages) {
        chatMessages.innerHTML = '';
        addMessage('bot', conversation[0].message);
    }
}

function displayOptions(options) {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) 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 = '';
            conversation.forEach(msg => addMessage(msg.role, msg.message));
            setTimeout(() => handleResponse(opt.text), 500);
        };
        chatMessages.appendChild(button);
    });
    chatMessages.appendChild(document.createElement('br'));
}

// 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');