recipe-mockup/js/ui/bottomNav.js

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) {
            const varName = isDark ? '--sunken-deep-rgb' : '--app-bg-rgb';
            const rgb = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
            if (rgb) meta.setAttribute('content', `rgb(${rgb})`);
        }
    });
}

export 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="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
                    <i class="far fa-calendar-alt" aria-hidden="true"></i>
                </button>
            </div>
            <div class="nav-slot">
                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Przepisy">
                    <i class="fas fa-search" 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" style="position:relative;">
                <button type="button" data-tab="shopping" id="nav-shopping" class="nav-tab" aria-label="Zakupy">
                    <i class="fas fa-cart-shopping" 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>
    `;
}

export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
    const main = document.getElementById('main-view');
    const planner = document.getElementById('planner-view');
    const pantry = document.getElementById('pantry-view');
    const shopping = document.getElementById('shopping-view');
    const nav = document.getElementById('app-bottom-nav');
    if (!main || !planner || !pantry || !shopping || !nav) return;

    const TABS = ['recipes', 'planner', 'pantry', 'shopping'];

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

        if (tab === 'pantry' && typeof refreshPantry === 'function') refreshPantry();
        if (tab === 'shopping' && typeof refreshShoppingList === 'function') refreshShoppingList();

        nav.querySelectorAll('.nav-tab[data-tab]').forEach((btn) => {
            const id = btn.getAttribute('data-tab');
            if (btn.hasAttribute('disabled')) return;
            if (TABS.includes(id)) {
                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 (TABS.includes(tab)) apply(tab);
    });

    setupThemeToggle();
    apply('planner');

    window.refreshStockViews = () => {
        if (typeof refreshPantry === 'function') refreshPantry();
    };
}