recipe-mockup/js/views/RecipeList.js

import { RECIPES } from '../data/catalog.js?v=2';
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((s) => [s.id, s.label]));
const DEFAULT_MIN_MINUTES = 5;
const DEFAULT_MAX_MINUTES = 120;
const SEARCH_SHELL_BASE_SHADOW =
    'inset 0 1px 0 rgba(255,255,255,0.045), 0 0 0 1px rgba(255,255,255,0.015)';
const SEARCH_HEADER_SCROLLED_SHADOW = '0 10px 16px rgba(0,0,0,0.34)';

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

let filterState = {
    query: '',
    slots: [],
    tags: [],
    minMinutes: DEFAULT_MIN_MINUTES,
    maxMinutes: DEFAULT_MAX_MINUTES,
};

function matchesFilters(recipe) {
    const { query, slots, tags, minMinutes, maxMinutes } = filterState;

    if (query) {
        const q = query.toLowerCase();
        const haystack = `${recipe.title} ${(recipe.tags || []).join(' ')}`.toLowerCase();
        if (!haystack.includes(q)) return false;
    }

    if (slots.length > 0) {
        if (!recipe.allowedSlots.some((s) => slots.includes(s))) return false;
    }

    if (tags.length > 0) {
        const recipeTags = (recipe.tags || []).map((t) => t.toLowerCase());
        if (!tags.some((t) => recipeTags.includes(t.toLowerCase()))) return false;
    }

    if (minMinutes > DEFAULT_MIN_MINUTES && recipe.minutes < minMinutes) return false;
    if (maxMinutes < DEFAULT_MAX_MINUTES && recipe.minutes > maxMinutes) return false;

    return true;
}

function getFilteredRecipes() {
    return Object.values(RECIPES).filter(matchesFilters);
}

function renderRecipeCard(recipe) {
    const labels = slotLabelsFor(recipe);
    return `
        <div onclick="openRecipeDetail('${escapeHtml(recipe.id)}')" class="rounded-xl overflow-hidden flex flex-col bg-[#393937] cursor-pointer transition-shadow" style="background:#393937 !important; border:none !important; box-shadow:none !important;">
            <div class="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="p-3 flex flex-col flex-1">
                <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-[#f1ede4] mb-3 line-clamp-2">${escapeHtml(recipe.title)}</h3>
                <div class="mt-auto">
                    <div class="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]"></i><span>${recipe.minutes} min</span></div>
                        <div class="flex items-center gap-1"><i class="fas fa-fire text-[#8f8b84]"></i><span>${recipe.nutritionPerServing.kcal} kcal</span></div>
                    </div>
                    <div class="flex flex-wrap gap-1">
                        ${labels.map((l) => `<span class="px-2 py-0.5 bg-[#2f2f2d] text-[#d7d2c8] text-[10px] rounded-md font-medium">${escapeHtml(l)}</span>`).join('')}
                    </div>
                </div>
            </div>
        </div>`;
}

function syncRecipeScrollShadow() {
    const scroll = document.getElementById('recipe-scroll');
    const shadow = document.getElementById('recipe-top-bar-shadow');
    const header = document.getElementById('recipe-top-bar');
    const searchShell = document.getElementById('recipe-search-shell');
    if (!shadow || !header || !searchShell) return;

    if (!scroll) {
        shadow.style.opacity = '0';
        header.style.boxShadow = 'none';
        searchShell.style.boxShadow = SEARCH_SHELL_BASE_SHADOW;
        return;
    }

    const isScrolled = scroll.scrollTop > 6;
    shadow.style.opacity = isScrolled ? '1' : '0';
    header.style.boxShadow = isScrolled ? SEARCH_HEADER_SCROLLED_SHADOW : 'none';
    searchShell.style.boxShadow = SEARCH_SHELL_BASE_SHADOW;
}

function renderGrid() {
    const grid = document.getElementById('recipe-grid');
    if (!grid) return;

    const recipes = getFilteredRecipes();
    if (recipes.length === 0) {
        grid.innerHTML = `
            <div class="col-span-2 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"></i>
                </div>
                <p class="text-sm font-semibold text-gray-700">Brak wyników</p>
                <p class="text-xs text-gray-500 mt-1 max-w-[220px] leading-relaxed">Zmień kryteria wyszukiwania lub filtry</p>
            </div>`;
        requestAnimationFrame(syncRecipeScrollShadow);
        return;
    }

    grid.innerHTML = recipes.map(renderRecipeCard).join('');
    requestAnimationFrame(syncRecipeScrollShadow);
}

export function getRecipeListHTML() {
    return `
    <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10" style="background:#2d2e2b !important;">
        <div id="recipe-top-bar" class="relative z-[2] px-4 pt-3 pb-4 mt-2" style="background:#2d2e2b !important; border:none !important; transition:box-shadow 180ms ease;">
            <div id="recipe-search-shell" class="relative z-[1] flex items-center w-full overflow-hidden" style="background:#3a3b38 !important; border:1px solid rgba(79,81,76,0.95) !important; border-radius:1.5rem !important; box-shadow:${SEARCH_SHELL_BASE_SHADOW} !important; transition:box-shadow 180ms ease;">
                <input type="text" id="recipe-search-input" placeholder="Szukaj przepisów..." class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] pl-8 pr-14" style="background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;">
                <button id="recipe-filter-btn" onclick="openFilters()" class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 text-[#c9c3b8] hover:text-[#f0e8dc] flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; box-shadow:none !important;" aria-label="Otwórz filtry">
                    <i class="fas fa-sliders-h"></i>
                </button>
            </div>
            <div id="recipe-top-bar-shadow" class="pointer-events-none absolute inset-x-0 bottom-0 z-[0] h-4 translate-y-1 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(0,0,0,0.46), rgba(0,0,0,0.18), rgba(0,0,0,0)); filter:blur(7px);"></div>
        </div>

        <div id="recipe-scroll" class="relative flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
            <div id="recipe-grid" class="grid grid-cols-2 gap-3 bg-[#2d2e2b]" style="background:#2d2e2b !important;"></div>
        </div>
    </div>
    `;
}

export function getFilterState() {
    return filterState;
}

export function applyFilters(newState) {
    Object.assign(filterState, newState);
    renderGrid();
}

export function getFilteredCount() {
    return getFilteredRecipes().length;
}

export function refreshRecipeList() {
    renderGrid();
}

export function setupRecipeList() {
    renderGrid();

    document.getElementById('recipe-search-input')?.addEventListener('input', (e) => {
        filterState.query = e.target.value.trim();
        renderGrid();
    });

    document.getElementById('recipe-scroll')?.addEventListener('scroll', syncRecipeScrollShadow);
    syncRecipeScrollShadow();
}