meals.js

import { addToCart } from './storage.js';

let allMeals = [];
let currentPage = 1;
let currentSearch = '';
const mealsPerPage = 9;

export async function fetchAllMeals() {
    try {
        const response = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s=');
        const data = await response.json();
        allMeals = data.meals || [];
        return allMeals;
    } catch (error) {
        console.error('Error fetching meals:', error);
        return [];
    }
}

function searchMeals(searchTerm) {
    return allMeals.filter(meal => 
        meal.strMeal.toLowerCase().includes(searchTerm.toLowerCase()) ||
        meal.strCategory.toLowerCase().includes(searchTerm.toLowerCase()) ||
        meal.strArea.toLowerCase().includes(searchTerm.toLowerCase())
    );
}

export function renderMeals(meals) {
    const container = document.getElementById('mealsContainer');
    
    if (!meals || meals.length === 0) {
        container.innerHTML = `
            <div class="error-message">
                🍳 No recipes found! Try a different search.
            </div>
        `;
        return;
    }

    container.innerHTML = meals.map(meal => `
        <div class="meal-card" data-id="${meal.idMeal}">
            <img src="${meal.strMealThumb}/preview" alt="${meal.strMeal}">
            <h3>${meal.strMeal}</h3>
        </div>
    `).join('');

    container.addEventListener('click', (e) => {
        const mealCard = e.target.closest('.meal-card');
        if (mealCard) {
            const mealId = mealCard.dataset.id;
            window.location.href = `meal-details.html?id=${mealId}`;
        }
    });
}

export function setupSearch() {
    const searchInput = document.getElementById('searchInput');
    
    searchInput.addEventListener('input', (e) => {
        currentSearch = e.target.value.trim();
        currentPage = 1;
        updateDisplay();
    });
}

function updatePaginationControls(filteredMeals) {
    const prevButton = document.getElementById('prevPage');
    const nextButton = document.getElementById('nextPage');
    const pageDisplay = document.getElementById('currentPage');
    const totalPages = Math.ceil(filteredMeals.length / mealsPerPage);

    pageDisplay.textContent = `Page ${currentPage} of ${totalPages}`;
    prevButton.disabled = currentPage === 1;
    nextButton.disabled = currentPage === totalPages;
}

export function updateDisplay() {
    let filteredMeals = allMeals;
    
    if (currentSearch) {
        filteredMeals = searchMeals(currentSearch);
    }

    renderMeals(filteredMeals);
    updatePaginationControls(filteredMeals);
}

export function setupPagination() {
    document.getElementById('prevPage').addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            updateDisplay();
        }
    });

    document.getElementById('nextPage').addEventListener('click', () => {
        const totalPages = Math.ceil(
            (currentSearch ? searchMeals(currentSearch) : allMeals).length / mealsPerPage
        );
        if (currentPage < totalPages) {
            currentPage++;
            updateDisplay();
        }
    });
}

document.addEventListener('DOMContentLoaded', async () => {
    await fetchAllMeals();
    updateDisplay();
    setupSearch();
    setupPagination();
});