recipe-mockup/js/ui/recipeGrid.js

import { MEAL_SLOTS } from '../planner/mealSlots.js';

function escapeHtml(s) {
    return String(s)
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}

const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((slot) => [slot.id, slot.label]));

function slotLabelsFor(recipe) {
    return (recipe.allowedSlots || [])
        .map((id) => slotLabelMap[id])
        .filter(Boolean);
}

function getEmptyStateHTML({ emptyStateId, title, message }) {
    return `
        <div id="${escapeHtml(emptyStateId)}" class="hidden flex flex-col items-center justify-center py-16 text-center">
            <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                <i class="fas fa-search text-2xl text-gray-300" aria-hidden="true"></i>
            </div>
            <p class="text-sm font-semibold text-gray-700">${escapeHtml(title)}</p>
            <p class="text-xs text-gray-500 mt-1 max-w-[220px] leading-relaxed">${escapeHtml(message)}</p>
        </div>
    `;
}

function renderRecipeCard(recipe, { showSlotLabels = true, cardClassName = '' } = {}) {
    const labels = showSlotLabels ? slotLabelsFor(recipe) : [];
    const className = ['recipe-browser-card', cardClassName].filter(Boolean).join(' ');

    return `
        <button type="button" data-recipe-id="${escapeHtml(recipe.id)}" class="${className} rounded-xl overflow-hidden flex flex-col bg-[#393937] cursor-pointer text-left transition-shadow" style="background:#393937 !important; border:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.28) !important;">
            <div class="recipe-browser-card-media h-32 bg-[#d4d4d4] relative overflow-hidden">
                ${recipe.image
                    ? `<img src="${escapeHtml(recipe.image)}" alt="${escapeHtml(recipe.title)}" class="w-full h-full object-cover">`
                    : `<span class="absolute inset-0 flex items-center justify-center text-white font-medium text-xs">${escapeHtml(recipe.thumbLabel)}</span>`}
            </div>
            <div class="recipe-browser-card-body p-3 flex flex-col flex-1">
                <h3 class="recipe-browser-card-title text-sm font-medium underline decoration-1 underline-offset-2 text-[#f1ede4] mb-3 line-clamp-2">${escapeHtml(recipe.title)}</h3>
                <div class="recipe-browser-card-footer mt-auto">
                    <div class="recipe-browser-card-meta flex items-center justify-between text-[11px] text-[#c2bcb2] font-medium mb-2">
                        <div class="flex items-center gap-1"><i class="fas fa-clock text-[#8f8b84]" aria-hidden="true"></i><span>${recipe.minutes} min</span></div>
                        <div class="flex items-center gap-1"><i class="fas fa-fire text-[#8f8b84]" aria-hidden="true"></i><span>${recipe.nutritionPerServing.kcal} kcal</span></div>
                    </div>
                    ${labels.length > 0
                        ? `<div class="recipe-browser-card-labels flex flex-wrap gap-1">
                            ${labels.map((label) => `<span class="recipe-browser-card-label px-2 py-0.5 bg-[#2f2f2d] text-[#d7d2c8] text-[10px] rounded-md font-medium">${escapeHtml(label)}</span>`).join('')}
                        </div>`
                        : ''}
                </div>
            </div>
        </button>
    `;
}

export function filterRecipesByQuery(recipes, query = '') {
    const q = query.trim().toLowerCase();
    if (!q) return [...recipes];

    return recipes.filter((recipe) => {
        const haystack = `${recipe.title} ${(recipe.tags || []).join(' ')}`.toLowerCase();
        return haystack.includes(q);
    });
}

export function getRecipeGridSectionHTML({
    scrollId,
    gridId,
    emptyStateId,
    scrollClassName = 'relative flex-1 overflow-y-auto px-4 pt-20 pb-24 bg-[#2d2e2b]',
    gridClassName = 'grid grid-cols-2 gap-3 bg-[#2d2e2b]',
    emptyTitle = 'Brak wyników',
    emptyMessage = 'Zmień kryteria wyszukiwania lub filtry',
} = {}) {
    return `
        <div id="${escapeHtml(scrollId)}" class="${scrollClassName}" style="background:#2d2e2b !important;">
            <div id="${escapeHtml(gridId)}" class="${gridClassName}" style="background:#2d2e2b !important;"></div>
            ${getEmptyStateHTML({
        emptyStateId,
        title: emptyTitle,
        message: emptyMessage,
    })}
        </div>
    `;
}

export function renderRecipeGrid({
    gridEl,
    emptyStateEl,
    recipes,
    showSlotLabels = true,
    cardClassName = '',
} = {}) {
    if (!gridEl || !emptyStateEl) return;

    const items = Array.isArray(recipes) ? recipes : [];
    gridEl.innerHTML = items
        .map((recipe) => renderRecipeCard(recipe, { showSlotLabels, cardClassName }))
        .join('');

    const hasItems = items.length > 0;
    gridEl.classList.toggle('hidden', !hasItems);
    emptyStateEl.classList.toggle('hidden', hasItems);
}