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

    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('vegetarian')) {
        botResponse = 'Great choice! 🍽️ Fetching vegetarian ingredients...';
        fetchIngredients('veg');
    } else if (lastMessage.includes('non-vegetarian')) {
        botResponse = 'Great choice! 🍽️ Fetching non-vegetarian ingredients...';
        fetchIngredients('non-vegetarian');
    } else if (selectedIngredients.length > 0 && lastMessage === 'suggest') {
        botResponse = 'Generating recipe ideas based on your selected ingredients...';
        getFoodSuggestions();
    } else if (lastMessage === 'done') {
        botResponse = 'Thank you! Please type "suggest" to get recipe ideas based on your selected ingredients, or "start over" to begin again.';
        options = [
            { text: 'Suggest', class: '' },
            { text: 'Start Over', class: '' }
        ];
    }

    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', 'Here are the available ingredients:');
            displayIngredientsList(ingredients);
            addMessage('bot', 'Please select ingredients (click to add) and type "done" when finished, or type "suggest" to get recipe ideas.');
        }
    })
    .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 button = document.createElement('button');
        button.textContent = ingredient;
        button.onclick = () => {
            if (!selectedIngredients.includes(ingredient)) {
                selectedIngredients.push(ingredient);
                displaySelectedIngredients();
            }
        };
        ingredientsList.appendChild(button);
    });
}

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

    const textarea = selectedArea.querySelector('textarea') || document.createElement('textarea');
    textarea.value = selectedIngredients.join('\n');
    textarea.onchange = () => {
        selectedIngredients = textarea.value.split('\n').filter(item => item.trim() !== '');
    };
    if (!selectedArea.contains(textarea)) {
        selectedArea.innerHTML = '';
        selectedArea.appendChild(textarea);
    }
}

function getFoodSuggestions() {
    fetch('/get_food_suggestions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ ingredients: selectedIngredients })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.error) {
            addMessage('bot', data.error);
        } else {
            addMessage('bot', 'Here are some recipe ideas based on your selected ingredients:');
            data.suggestions.forEach(suggestion => addMessage('bot', suggestion));
            addMessage('bot', 'Would you like to start over or select more ingredients?');
            displayOptions([
                { text: 'Start Over', class: '' },
                { text: 'Select More', class: '' }
            ]);
        }
    })
    .catch(error => {
        addMessage('bot', `Error: Unable to get recipe ideas. ${error.message}. Please check your OpenAI quota or contact support.`);
    });
}

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));
            if (opt.text.toLowerCase() === 'suggest') {
                getFoodSuggestions();
            } else if (opt.text.toLowerCase() === 'start over') {
                conversation = [{ role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know your name?' }];
                selectedIngredients = [];
                chatMessages.innerHTML = '';
                conversation.forEach(msg => addMessage(msg.role, msg.message));
            } else {
                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
        chatMessages.innerHTML = ''; // Clear previous messages
        selectedIngredients = []; // Clear selected ingredients
        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');