recipe-mockup/js/app.js

const APP_ASSET_VERSION = window.__APP_ASSET_VERSION__
    || new URL(import.meta.url).searchParams.get('v')
    || 'dev';

let getRecipeListHTML;
let setupRecipeList;
let getFilterHTML;
let setupFilter;
let getRecipeDetailHTML;
let setupRecipeDetail;
let getMealPlannerHTML;
let setupMealPlanner;
let getPantryHTML;
let refreshPantry;
let setupPantry;
let getMealPlanEditorHTML;
let setupMealPlanEditor;

const moduleLoadPromise = Promise.all([
    import(`./views/RecipeList.js?v=${APP_ASSET_VERSION}`),
    import(`./views/Filter.js?v=${APP_ASSET_VERSION}`),
    import(`./views/RecipeDetailV2.js?v=${APP_ASSET_VERSION}`),
    import(`./views/MealPlanner.js?v=${APP_ASSET_VERSION}`),
    import(`./views/Pantry.js?v=${APP_ASSET_VERSION}`),
    import(`./ui/mealPlanEditor.js?v=${APP_ASSET_VERSION}`),
]).then(([
    recipeListModule,
    filterModule,
    recipeDetailModule,
    mealPlannerModule,
    pantryModule,
    mealPlanEditorModule,
]) => {
    ({ getRecipeListHTML, setupRecipeList } = recipeListModule);
    ({ getFilterHTML, setupFilter } = filterModule);
    ({ getRecipeDetailHTML, setupRecipeDetail } = recipeDetailModule);
    ({ getMealPlannerHTML, setupMealPlanner } = mealPlannerModule);
    ({ getPantryHTML, refreshPantry, setupPantry } = pantryModule);
    ({ getMealPlanEditorHTML, setupMealPlanEditor } = mealPlanEditorModule);
});

function getAppToastHTML() {
    return `
    <div id="app-toast" class="pointer-events-none absolute left-4 right-4 bottom-28 z-[60] opacity-0 translate-y-2 transition-all duration-300" role="status">
        <div class="rounded-xl bg-gray-900 text-white text-sm font-medium px-4 py-3 shadow-lg text-center" id="app-toast-text"></div>
    </div>
    `;
}

function getBottomNavHTML() {
    const isDark = document.documentElement.classList.contains('dark');
    return `
    <nav id="app-bottom-nav" aria-label="Główna nawigacja">
        <div class="bottom-dock">
            <div class="nav-slot">
                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page">
                    <i class="fas fa-book" aria-hidden="true"></i>
                </button>
            </div>
            <div class="nav-slot">
                <button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer">
                    <i class="far fa-calendar-alt" aria-hidden="true"></i>
                </button>
            </div>
            <div class="nav-slot">
                <button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
                    <i class="fas fa-warehouse" aria-hidden="true"></i>
                </button>
            </div>
            <div class="nav-slot">
                <button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
                    <i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
                </button>
            </div>
        </div>
    </nav>
    `;
}

function syncThemeToggleButton(btn, isDark) {
    if (!btn) return;
    const icon = btn.querySelector('i');
    if (icon) icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
    btn.setAttribute('aria-label', isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw');
    btn.title = isDark ? 'Jasny motyw' : 'Ciemny motyw';
}

function setupThemeToggle() {
    const btn = document.getElementById('nav-theme-toggle');
    if (!btn) return;

    btn.addEventListener('click', () => {
        const html = document.documentElement;
        const isDark = html.classList.toggle('dark');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');

        syncThemeToggleButton(btn, isDark);

        const meta = document.querySelector('meta[name="theme-color"]');
        if (meta) meta.setAttribute('content', isDark ? '#161513' : '#f3efe9');
    });
}

function setupTabs() {
    const main = document.getElementById('main-view');
    const planner = document.getElementById('planner-view');
    const pantry = document.getElementById('pantry-view');
    const nav = document.getElementById('app-bottom-nav');
    if (!main || !planner || !pantry || !nav) return;

    const apply = (tab) => {
        main.classList.toggle('hidden', tab !== 'recipes');
        planner.classList.toggle('hidden', tab !== 'planner');
        pantry.classList.toggle('hidden', tab !== 'pantry');

        if (tab === 'pantry') refreshPantry();

        nav.querySelectorAll('.nav-tab[data-tab]').forEach((btn) => {
            const id = btn.getAttribute('data-tab');
            if (btn.hasAttribute('disabled')) return;
            if (id === 'recipes' || id === 'planner' || id === 'pantry') {
                const isActive = id === tab;
                btn.classList.toggle('is-active', isActive);
                if (isActive) btn.setAttribute('aria-current', 'page');
                else btn.removeAttribute('aria-current');
            }
        });
    };

    nav.addEventListener('click', (e) => {
        const btn = e.target.closest('.nav-tab[data-tab]');
        if (!btn || btn.hasAttribute('disabled')) return;
        const tab = btn.getAttribute('data-tab');
        if (tab === 'recipes' || tab === 'planner' || tab === 'pantry') apply(tab);
    });

    apply('recipes');

    window.refreshStockViews = () => {
        refreshPantry();
    };
}

let initAppPromise = null;

function renderAppBootError(message) {
    const appContainer = document.getElementById('app-container');
    if (!appContainer) return;

    appContainer.innerHTML = `
        <div class="flex h-full items-center justify-center px-6 text-center" style="background:#2d2e2b !important;">
            <div class="max-w-[18rem] rounded-[1.5rem] border px-5 py-6" style="background:#2f2f2d !important; border-color:#444442 !important;">
                <p class="text-sm font-semibold" style="color:#f2efe8 !important;">Nie udało się uruchomić aplikacji</p>
                <p class="mt-2 text-xs leading-relaxed" style="color:#b7ada1 !important;">${message}</p>
                <button type="button" onclick="window.location.reload()" class="mt-4 h-10 px-4 rounded-full border text-[12px] font-semibold" style="background:#23221e !important; border-color:#787876 !important; color:#f2efe8 !important;">Odśwież aplikację</button>
            </div>
        </div>
    `;
}

async function initApp() {
    if (initAppPromise) return initAppPromise;

    initAppPromise = (async () => {
        await moduleLoadPromise;

        const appContainer = document.getElementById('app-container');
        if (!appContainer) return;

        appContainer.innerHTML = `
            ${getRecipeListHTML()}
            ${getMealPlannerHTML()}
            ${getPantryHTML()}
            ${getBottomNavHTML()}
            ${getRecipeDetailHTML()}
            ${getFilterHTML()}
            ${getMealPlanEditorHTML()}
            ${getAppToastHTML()}
        `;

        setupTabs();
        setupThemeToggle();
        setupRecipeList();
        setupMealPlanner();
        setupPantry();
        setupFilter();
        setupMealPlanEditor();
        setupRecipeDetail();
    })().catch((error) => {
        initAppPromise = null;
        throw error;
    });

    return initAppPromise;
}

function bootApp() {
    initApp().catch((error) => {
        console.error('Failed to initialize app', error);
        renderAppBootError('Spróbuj odświeżyć aplikację. Jeśli problem wróci, zamknij ją całkowicie i otwórz ponownie.');
    });
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', bootApp, { once: true });
} else {
    bootApp();
}