import { RECIPES, INGREDIENTS } from '../data/catalog.js';
import { MEAL_SLOTS } from '../planner/mealSlots.js';
import { addDays, addMonths, sameDay, sameMonth, startOfDay, startOfMonth, startOfWeekMonday } from '../services/dateUtils.js';
import { dateKey, loadPlans, newPlanEntryId, savePlans } from '../services/planStore.js';
import { showAppToast } from '../ui/toast.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 MONTHS_LONG = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
const WEEKDAYS_SHORT = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];

export function getRecipeDetailHTML() {
    return `
    <div id="recipe-detail-view" class="absolute inset-0 bg-white z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
        <div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
            <button onclick="closeRecipeDetail()" class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
                <i class="fas fa-arrow-left text-[13px]"></i>
            </button>
            <button id="rd-add-to-planner-btn" class="h-9 px-3 bg-white/90 backdrop-blur rounded-full flex items-center justify-center gap-1.5 shadow-sm text-gray-800 hover:bg-white transition-colors text-[12px] font-semibold">
                <i class="fas fa-calendar-plus text-[11px]"></i> Zaplanuj
            </button>
        </div>

        <div id="rd-planner-picker" class="absolute inset-0 z-50 bg-black/45 hidden flex items-end" style="pointer-events: none">
            <div id="rd-planner-sheet" class="w-full bg-white rounded-t-3xl shadow-lg p-5 pb-8 max-h-[85vh] overflow-y-auto" style="pointer-events: auto; transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1)">
                <div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-4"></div>
                <h3 class="text-[15px] font-bold text-gray-900 mb-1">Zaplanuj</h3>
                <p id="rd-planner-recipe-name" class="text-[11px] text-gray-500 mb-3"></p>

                <div class="mb-4">
                    <div class="flex items-center gap-1 mb-2">
                        <button id="rd-cal-prev" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-left text-xs"></i></button>
                        <p id="rd-cal-title" class="flex-1 min-w-0 text-xs font-medium text-gray-900 text-center tabular-nums leading-none px-1 truncate"></p>
                        <button id="rd-cal-next" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-right text-xs"></i></button>
                    </div>
                    <div class="flex items-center justify-center mb-2">
                        <button id="rd-cal-today" type="button" class="h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors hidden">
                            <i class="fas fa-calendar-day text-[9px] opacity-70"></i> Dziś
                        </button>
                    </div>
                    <div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">
                        ${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}
                    </div>
                    <div id="rd-cal-grid" class="grid grid-cols-7 gap-0.5"></div>
                    <button id="rd-cal-toggle" type="button" class="w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors">
                        <i id="rd-cal-toggle-icon" class="fas fa-chevron-down text-[10px]"></i>
                    </button>
                </div>

                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Pora posiłku</p>
                <div id="rd-planner-slots" class="flex flex-wrap gap-1.5 mb-4"></div>

                <div id="rd-planner-variant" class="mb-4 hidden">
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wymienne składniki</p>
                    <div id="rd-planner-variant-options"></div>
                </div>
                <button id="rd-planner-confirm" type="button" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold text-[13px] transition-colors flex items-center justify-center gap-2">
                    <i class="fas fa-check text-xs"></i> Dodaj
                </button>
            </div>
        </div>

        <div id="rd-hero" class="h-[220px] shrink-0 w-full bg-[#d4d4d4] flex items-center justify-center relative">
            <span id="rd-hero-label" class="text-white font-medium text-[15px]"></span>
        </div>

        <div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
            <div class="mb-3 px-5 shrink-0">
                <div class="flex justify-between items-start mb-2.5">
                    <h1 id="rd-title" class="text-xl font-bold text-gray-900"></h1>
                </div>
                <div id="rd-tags" class="flex flex-wrap gap-1.5 mb-3"></div>
                <div class="flex justify-between items-center text-[13px] text-gray-600 font-medium">
                    <div class="flex gap-3.5">
                        <div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400 text-xs"></i><span id="rd-time"></span></div>
                    </div>
                    <div class="flex items-center gap-0.5 bg-gray-100 p-0.5 rounded-lg">
                        <button id="rd-serv-minus" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[9px]"></i></button>
                        <div class="flex items-center gap-1 px-1.5">
                            <span id="rd-servings" class="font-bold text-gray-900 text-[13px] w-3 text-center tabular-nums">1</span>
                            <span class="text-[11px] text-gray-500"><i class="fas fa-user-friends"></i></span>
                        </div>
                        <button id="rd-serv-plus" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[9px]"></i></button>
                    </div>
                </div>
            </div>

            <div class="flex border-b border-gray-200 mb-2 px-5 shrink-0">
                <button class="flex-1 pb-2.5 text-[13px] font-semibold text-gray-900 border-b-2 border-gray-900 rd-tab-btn" data-rd-tab="ingredients">Składniki</button>
                <button class="flex-1 pb-2.5 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 rd-tab-btn" data-rd-tab="steps">Kroki</button>
            </div>

            <div class="flex-1 overflow-y-auto px-5 pt-2 pb-10 no-scrollbar relative">
                <div id="rd-tab-ingredients" class="rd-tab-content block animate-fade-in"></div>
                <div id="rd-tab-steps" class="rd-tab-content hidden animate-fade-in"></div>
            </div>
        </div>
    </div>
    `;
}

/* ── state ─────────────────────────────────────────────── */

let currentRecipeId = null;
let currentServings = 1;
let currentSubstitutions = {};
let expandedAlternatives = new Set();

function getEffectiveIngredientId(originalId) {
    return currentSubstitutions[originalId] || originalId;
}

/* ── populate ──────────────────────────────────────────── */

function populateDetail(recipeId) {
    const recipe = RECIPES[recipeId];
    if (!recipe) return;

    currentRecipeId = recipeId;
    currentServings = 1;
    currentSubstitutions = {};
    expandedAlternatives.clear();

    document.getElementById('rd-hero-label').textContent = `Zdjęcie: ${recipe.title}`;
    document.getElementById('rd-title').textContent = recipe.title;
    document.getElementById('rd-time').textContent = `${recipe.minutes} min`;
    updateKcalDisplay();

    const tagsHtml = [];
    for (const slotId of recipe.allowedSlots) {
        const label = slotLabelMap[slotId];
        if (label) tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(label)}</span>`);
    }
    for (const tag of (recipe.tags || [])) {
        tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(tag)}</span>`);
    }
    document.getElementById('rd-tags').innerHTML = tagsHtml.join('');
    document.getElementById('rd-servings').textContent = '1';

    renderIngredients(recipe);
    renderSteps(recipe);

    const tabBtns = document.querySelectorAll('.rd-tab-btn');
    const tabs = document.querySelectorAll('.rd-tab-content');
    tabBtns.forEach((b) => {
        b.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
        b.classList.add('text-gray-500', 'border-transparent', 'font-medium');
    });
    tabBtns[0]?.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
    tabBtns[0]?.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
    tabs.forEach((t) => { t.classList.add('hidden'); t.classList.remove('block'); });
    document.getElementById('rd-tab-ingredients')?.classList.remove('hidden');
    document.getElementById('rd-tab-ingredients')?.classList.add('block');
}

/* ── helpers ───────────────────────────────────────────── */

function updateKcalDisplay() {
    const el = document.getElementById('rd-kcal');
    if (!el) return;
    const recipe = RECIPES[currentRecipeId];
    if (!recipe) return;
    const kcal = Math.round(recipe.nutritionPerServing.kcal * currentServings);
    el.textContent = `${kcal} kcal`;
}

function nutritionForAmount(ingredientId, amount) {
    const def = INGREDIENTS[ingredientId];
    if (!def?.nutritionPer100g) return null;
    const f = amount / 100;
    return {
        kcal: Math.round(def.nutritionPer100g.kcal * f),
        protein: Math.round(def.nutritionPer100g.protein * f * 10) / 10,
        fat: Math.round(def.nutritionPer100g.fat * f * 10) / 10,
        carbs: Math.round(def.nutritionPer100g.carbs * f * 10) / 10,
    };
}

function renderNutritionLine(nutrition) {
    if (!nutrition) return '';
    return `<div class="text-[10px] text-gray-500 mt-1 flex flex-wrap gap-x-3 gap-y-0.5"><span>${nutrition.kcal} kcal</span><span>${nutrition.protein}g białko</span><span>${nutrition.fat}g tłuszcz</span><span>${nutrition.carbs}g węgle</span></div>`;
}

/* ── ingredients tab with inline nutrition + summary ───── */

function computeIngredientNutritionTotals(recipe) {
    let kcal = 0, protein = 0, fat = 0, carbs = 0;
    for (const ing of recipe.ingredients) {
        const n = nutritionForAmount(ing.ingredientId, ing.amount * currentServings);
        if (n) {
            kcal += n.kcal;
            protein += n.protein;
            fat += n.fat;
            carbs += n.carbs;
        }
    }
    return {
        kcal: Math.round(kcal),
        protein: Math.round(protein * 10) / 10,
        fat: Math.round(fat * 10) / 10,
        carbs: Math.round(carbs * 10) / 10,
    };
}

function renderNutritionSummary(recipe) {
    const n = recipe.nutritionPerServing;
    const s = currentServings;
    const total = {
        kcal: Math.round(n.kcal * s * 10) / 10,
        protein: Math.round(n.protein * s * 10) / 10,
        fat: Math.round(n.fat * s * 10) / 10,
        carbs: Math.round(n.carbs * s * 10) / 10,
    };

    return `
        <div class="mb-4 pt-1 pb-3 border-b border-gray-100">
            ${s > 1 ? `<p class="text-[10px] text-gray-400 font-medium mb-2">Wartości dla ${s} porcji</p>` : ''}
            <div class="grid grid-cols-4 gap-3 text-center">
                <div>
                    <span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.kcal}</span>
                    <span class="text-[10px] text-gray-500">Kalorie</span>
                </div>
                <div>
                    <span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.protein} g</span>
                    <span class="text-[10px] text-gray-500">Białko</span>
                </div>
                <div>
                    <span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.carbs} g</span>
                    <span class="text-[10px] text-gray-500">Węglo.</span>
                </div>
                <div>
                    <span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.fat} g</span>
                    <span class="text-[10px] text-gray-500">Tłuszcze</span>
                </div>
            </div>
        </div>`;
}

function renderIngredientCard(name, amount, unit, nutrition, extra) {
    const displayAmount = Number.isInteger(amount) ? amount : parseFloat(amount.toFixed(1));
    const macroHtml = nutrition
        ? `<div class="flex flex-wrap gap-x-2.5 text-[10px] text-gray-400 tabular-nums">
            <span>${nutrition.protein}g B</span><span>${nutrition.fat}g T</span><span>${nutrition.carbs}g W</span>
        </div>`
        : '';
    const kcalHtml = nutrition
        ? `<span class="text-[10px] font-medium text-gray-400 tabular-nums whitespace-nowrap">${nutrition.kcal} kcal</span>`
        : '';

    return `
        <div class="${extra?.cls || 'bg-white'} rounded-xl p-2.5 border ${extra?.border || 'border-gray-200'} flex items-center gap-2.5">
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2">
                    ${extra?.prefix || ''}
                    <span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(name)}</span>
                    ${extra?.suffix || ''}
                </div>
                ${macroHtml}
                ${extra?.badge || ''}
            </div>
            <div class="flex flex-col items-end shrink-0 gap-0.5">
                <span class="text-[12px] font-semibold text-gray-900 tabular-nums whitespace-nowrap">${displayAmount} ${escapeHtml(unit)}</span>
                ${kcalHtml}
            </div>
        </div>`;
}

function renderIngredients(recipe) {
    const container = document.getElementById('rd-tab-ingredients');
    if (!container) return;

    const rows = recipe.ingredients.map((ing) => {
        const def = INGREDIENTS[ing.ingredientId];
        const name = def?.name || ing.ingredientId;
        const scaledAmount = ing.amount * currentServings;
        const nutrition = nutritionForAmount(ing.ingredientId, scaledAmount);

        const hasAlts = ing.alternatives && ing.alternatives.length > 0;
        const isExpanded = expandedAlternatives.has(ing.ingredientId);

        const toggleBtn = hasAlts
            ? `<button type="button" class="rd-alt-toggle shrink-0 w-5 h-5 rounded-full ${isExpanded ? 'bg-amber-50 text-amber-500' : 'bg-gray-100 text-gray-400 hover:bg-gray-200'} flex items-center justify-center transition-colors" data-original-id="${escapeHtml(ing.ingredientId)}"><i class="fas fa-shuffle text-[8px]"></i></button>`
            : '';

        const cardHtml = renderIngredientCard(name, scaledAmount, ing.unit, nutrition, { suffix: toggleBtn });

        let altListHtml = '';
        if (hasAlts) {
            const altCards = ing.alternatives.map((altId) => {
                const altDef = INGREDIENTS[altId];
                const altName = altDef?.name || altId;
                const altNutrition = nutritionForAmount(altId, scaledAmount);
                return renderIngredientCard(altName, scaledAmount, ing.unit, altNutrition, {
                    cls: 'bg-gray-50',
                    border: 'border-gray-100',
                });
            });
            altListHtml = `
            <div class="rd-alt-list ${isExpanded ? '' : 'hidden'} mt-1.5 space-y-1.5" data-original-id="${escapeHtml(ing.ingredientId)}">
                <p class="text-[10px] text-gray-400 font-medium mb-1 pl-1">Można zamienić na:</p>
                ${altCards.join('')}
            </div>`;
        }

        return `<li>${cardHtml}${altListHtml}</li>`;
    }).join('');

    container.innerHTML = `
        ${renderNutritionSummary(recipe)}
        <ul class="space-y-2" id="rd-ingredient-list">${rows}</ul>`;

    container.querySelectorAll('.rd-alt-toggle').forEach((btn) => {
        btn.addEventListener('click', () => {
            const origId = btn.dataset.originalId;
            if (expandedAlternatives.has(origId)) {
                expandedAlternatives.delete(origId);
            } else {
                expandedAlternatives.add(origId);
            }
            const list = container.querySelector(`.rd-alt-list[data-original-id="${origId}"]`);
            if (list) list.classList.toggle('hidden');
            btn.classList.toggle('bg-gray-100');
            btn.classList.toggle('text-gray-400');
            btn.classList.toggle('bg-amber-50');
            btn.classList.toggle('text-amber-500');
        });
    });
}

/* ── steps tab ─────────────────────────────────────────── */

function renderSteps(recipe) {
    const container = document.getElementById('rd-tab-steps');
    if (!container) return;

    const steps = recipe.steps || [];
    if (steps.length === 0) {
        container.innerHTML = '<p class="text-sm text-gray-500 text-center py-8">Brak kroków przygotowania.</p>';
        return;
    }

    container.innerHTML = `
        <div class="space-y-5 pb-5">
            ${steps.map((step, i) => `
            <div class="flex gap-3">
                <div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">${i + 1}</div>
                <div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">${escapeHtml(step)}</p></div>
            </div>`).join('')}
        </div>`;
}

/* ── setup ─────────────────────────────────────────────── */

export function setupRecipeDetail() {
    document.querySelectorAll('.rd-tab-btn').forEach((btn) => {
        btn.addEventListener('click', () => {
            const tabId = btn.dataset.rdTab;
            document.querySelectorAll('.rd-tab-content').forEach((el) => {
                el.classList.add('hidden');
                el.classList.remove('block');
            });
            const target = document.getElementById(`rd-tab-${tabId}`);
            if (target) {
                target.classList.remove('hidden');
                target.classList.add('block');
                target.parentElement.scrollTop = 0;
            }

            document.querySelectorAll('.rd-tab-btn').forEach((b) => {
                b.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
                b.classList.add('text-gray-500', 'border-transparent', 'font-medium');
            });
            btn.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
            btn.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
        });
    });

    document.getElementById('rd-serv-minus')?.addEventListener('click', () => {
        if (currentServings <= 1) return;
        currentServings--;
        document.getElementById('rd-servings').textContent = currentServings;
        const recipe = RECIPES[currentRecipeId];
        if (recipe) {
            renderIngredients(recipe);
            updateKcalDisplay();
        }
    });

    document.getElementById('rd-serv-plus')?.addEventListener('click', () => {
        if (currentServings >= 12) return;
        currentServings++;
        document.getElementById('rd-servings').textContent = currentServings;
        const recipe = RECIPES[currentRecipeId];
        if (recipe) {
            renderIngredients(recipe);
            updateKcalDisplay();
        }
    });

    /* ── planner picker ──────────────────────────────── */

    let plannerPickerDay = null;
    let plannerPickerSlot = null;
    let calViewDate = null;
    let calExpanded = false;

    const plannerOverlay = document.getElementById('rd-planner-picker');
    const plannerSheet = document.getElementById('rd-planner-sheet');

    function renderCalendarCell(d, today, activeMonth) {
        const isToday = sameDay(d, today);
        const isSelected = plannerPickerDay && sameDay(d, plannerPickerDay);
        const isOtherMonth = d.getMonth() !== activeMonth;
        const isPast = d.getTime() < today.getTime();

        let cls = 'flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight ';

        if (isSelected) {
            cls += 'bg-gray-900 text-white ';
        } else if (isPast) {
            cls += 'text-gray-300 ';
        } else if (isOtherMonth) {
            cls += 'text-gray-300 ';
        } else {
            cls += 'text-gray-800 hover:bg-gray-100 ';
        }

        if (isToday && !isSelected && !isPast) {
            cls += 'ring-1 ring-inset ring-gray-900 ';
        }

        const inner = `<span>${d.getDate()}</span><span class="w-1 h-1"></span>`;

        if (isPast && !isSelected) {
            return `<div class="${cls}">${inner}</div>`;
        }

        return `<button type="button" class="rd-cal-day ${cls}" data-ts="${d.getTime()}">${inner}</button>`;
    }

    function renderPlannerCalendar() {
        const grid = document.getElementById('rd-cal-grid');
        const titleEl = document.getElementById('rd-cal-title');
        const todayBtn = document.getElementById('rd-cal-today');
        const toggleIcon = document.getElementById('rd-cal-toggle-icon');
        if (!grid || !titleEl) return;

        const today = startOfDay(new Date());

        if (calExpanded) {
            const ms = startOfMonth(calViewDate);
            titleEl.textContent = `${MONTHS_LONG[ms.getMonth()]} ${ms.getFullYear()}`;
            toggleIcon.className = 'fas fa-chevron-up text-[10px]';

            const firstCell = startOfWeekMonday(ms);
            const cells = [];
            let d = new Date(firstCell);
            for (let i = 0; i < 42; i++) {
                cells.push(new Date(d));
                d = addDays(d, 1);
            }
            while (cells.length > 7) {
                const last7 = cells.slice(-7);
                if (last7.every((c) => c.getMonth() !== ms.getMonth())) cells.splice(-7);
                else break;
            }

            grid.innerHTML = cells.map((c) => renderCalendarCell(c, today, ms.getMonth())).join('');
            todayBtn.classList.toggle('hidden', sameMonth(today, calViewDate));
        } else {
            const ws = startOfWeekMonday(calViewDate);
            titleEl.textContent = `${MONTHS_LONG[calViewDate.getMonth()]} ${calViewDate.getFullYear()}`;
            toggleIcon.className = 'fas fa-chevron-down text-[10px]';

            const cells = [];
            for (let i = 0; i < 7; i++) cells.push(addDays(ws, i));
            grid.innerHTML = cells.map((c) => renderCalendarCell(c, today, calViewDate.getMonth())).join('');

            const todayWs = startOfWeekMonday(today);
            todayBtn.classList.toggle('hidden', sameDay(ws, todayWs));
        }

        grid.querySelectorAll('.rd-cal-day').forEach((btn) => {
            btn.addEventListener('click', () => {
                plannerPickerDay = new Date(Number(btn.dataset.ts));
                calViewDate = new Date(plannerPickerDay);
                renderPlannerCalendar();
            });
        });
    }

    document.getElementById('rd-cal-prev')?.addEventListener('click', () => {
        calViewDate = calExpanded ? addMonths(calViewDate, -1) : addDays(calViewDate, -7);
        renderPlannerCalendar();
    });
    document.getElementById('rd-cal-next')?.addEventListener('click', () => {
        calViewDate = calExpanded ? addMonths(calViewDate, 1) : addDays(calViewDate, 7);
        renderPlannerCalendar();
    });
    document.getElementById('rd-cal-today')?.addEventListener('click', () => {
        const today = startOfDay(new Date());
        plannerPickerDay = today;
        calViewDate = today;
        renderPlannerCalendar();
    });
    document.getElementById('rd-cal-toggle')?.addEventListener('click', () => {
        calExpanded = !calExpanded;
        renderPlannerCalendar();
    });

    /* ── planner variant selection ────────────────────── */

    const expandedVariantGroups = new Set();

    function renderPlannerVariants(recipe) {
        const section = document.getElementById('rd-planner-variant');
        const container = document.getElementById('rd-planner-variant-options');
        if (!section || !container) return;

        const altsIngredients = recipe.ingredients.filter((i) => i.alternatives?.length > 0);
        if (altsIngredients.length === 0) {
            section.classList.add('hidden');
            return;
        }
        section.classList.remove('hidden');

        let html = '';
        for (const ing of altsIngredients) {
            const origId = ing.ingredientId;
            const scaledAmount = ing.amount * currentServings;
            const displayAmount = Number.isInteger(scaledAmount) ? scaledAmount : parseFloat(scaledAmount.toFixed(1));
            const effectiveId = getEffectiveIngredientId(origId);
            const effectiveDef = INGREDIENTS[effectiveId];
            const effectiveName = effectiveDef?.name || effectiveId;
            const isExpanded = expandedVariantGroups.has(origId);
            const isSwapped = effectiveId !== origId;

            html += `<div class="mb-2 last:mb-0">
                <button type="button" class="rd-variant-toggle w-full flex items-center gap-2.5 p-2.5 rounded-xl border ${isSwapped ? 'border-amber-200 bg-amber-50/50' : 'border-gray-200 bg-white'} hover:border-gray-300 transition-colors text-left" data-original-id="${escapeHtml(origId)}">
                    <i class="fas fa-shuffle text-[9px] ${isSwapped ? 'text-amber-500' : 'text-gray-400'}"></i>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-1.5">
                            <span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(effectiveName)}</span>
                            <span class="text-[10px] text-gray-400 tabular-nums shrink-0">${displayAmount} ${escapeHtml(ing.unit)}</span>
                        </div>
                        ${renderNutritionLine(nutritionForAmount(effectiveId, scaledAmount))}
                    </div>
                    <i class="fas fa-chevron-${isExpanded ? 'up' : 'down'} text-[9px] text-gray-400 shrink-0"></i>
                </button>`;

            if (isExpanded) {
                const allOptions = [origId, ...ing.alternatives];
                html += '<div class="mt-1.5 space-y-1 pl-2">';
                for (const altId of allOptions) {
                    const def = INGREDIENTS[altId];
                    const altName = def?.name || altId;
                    const isSelected = effectiveId === altId;
                    const isOriginal = altId === origId;
                    const nutrition = nutritionForAmount(altId, scaledAmount);

                    const selectedCls = isSelected
                        ? 'border-gray-900 bg-gray-50 ring-1 ring-gray-900'
                        : 'border-gray-200 bg-white hover:border-gray-300';

                    let tag = '';
                    if (isOriginal) tag = `<span class="text-[9px] px-1.5 py-0.5 rounded ${isSelected ? 'bg-gray-200 text-gray-600' : 'bg-gray-100 text-gray-400'} font-medium shrink-0">Domyślny</span>`;

                    html += `
                        <button type="button" class="rd-variant-option w-full text-left p-2.5 rounded-lg border transition-all ${selectedCls}" data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}">
                            <div class="flex items-center justify-between gap-2">
                                <div class="flex items-center gap-2 min-w-0">
                                    <div class="w-3.5 h-3.5 rounded-full border-2 shrink-0 ${isSelected ? 'border-gray-900' : 'border-gray-300'} flex items-center justify-center">
                                        ${isSelected ? '<div class="w-1.5 h-1.5 rounded-full bg-gray-900"></div>' : ''}
                                    </div>
                                    <span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(altName)}</span>
                                </div>
                                ${tag}
                            </div>
                            ${renderNutritionLine(nutrition)}
                        </button>`;
                }
                html += '</div>';
            }

            html += '</div>';
        }

        container.innerHTML = html;
    }

    document.getElementById('rd-planner-variant-options')?.addEventListener('click', (e) => {
        const toggle = e.target.closest('.rd-variant-toggle');
        if (toggle) {
            const origId = toggle.dataset.originalId;
            if (expandedVariantGroups.has(origId)) expandedVariantGroups.delete(origId);
            else expandedVariantGroups.add(origId);
            const recipe = RECIPES[currentRecipeId];
            if (recipe) renderPlannerVariants(recipe);
            return;
        }

        const btn = e.target.closest('.rd-variant-option');
        if (!btn) return;
        const originalId = btn.dataset.originalId;
        const altId = btn.dataset.altId;
        if (altId === originalId) {
            delete currentSubstitutions[originalId];
        } else {
            currentSubstitutions[originalId] = altId;
        }
        expandedVariantGroups.delete(originalId);
        const recipe = RECIPES[currentRecipeId];
        if (recipe) renderPlannerVariants(recipe);
    });

    function openPlannerPicker() {
        const recipe = RECIPES[currentRecipeId];
        if (!recipe) return;

        document.getElementById('rd-planner-recipe-name').textContent = recipe.title;
        currentSubstitutions = {};
        expandedVariantGroups.clear();

        const today = startOfDay(new Date());
        plannerPickerDay = today;
        calViewDate = today;
        calExpanded = false;
        renderPlannerCalendar();

        renderPlannerVariants(recipe);

        plannerPickerSlot = recipe.allowedSlots[0] || MEAL_SLOTS[0]?.id;
        const slotsContainer = document.getElementById('rd-planner-slots');
        slotsContainer.innerHTML = MEAL_SLOTS.filter((s) => recipe.allowedSlots.includes(s.id)).map((s) => {
            const sel = s.id === plannerPickerSlot;
            return `<button type="button" class="rd-plan-slot-btn px-3 py-1.5 rounded-lg border text-[12px] font-semibold transition-all ${sel ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-gray-400'}" data-slot-id="${s.id}">${escapeHtml(s.label)}</button>`;
        }).join('');

        plannerOverlay.classList.remove('hidden');
        plannerOverlay.style.pointerEvents = 'auto';
        requestAnimationFrame(() => {
            plannerSheet.style.transform = 'translateY(0)';
        });
    }

    function closePlannerPicker() {
        plannerSheet.style.transform = 'translateY(100%)';
        setTimeout(() => {
            plannerOverlay.classList.add('hidden');
            plannerOverlay.style.pointerEvents = 'none';
        }, 300);
    }

    document.getElementById('rd-add-to-planner-btn')?.addEventListener('click', openPlannerPicker);

    plannerOverlay?.addEventListener('click', (e) => {
        if (e.target === plannerOverlay) closePlannerPicker();
    });

    document.getElementById('rd-planner-slots')?.addEventListener('click', (e) => {
        const btn = e.target.closest('.rd-plan-slot-btn');
        if (!btn) return;
        plannerPickerSlot = btn.getAttribute('data-slot-id');
        document.querySelectorAll('.rd-plan-slot-btn').forEach((b) => {
            b.classList.remove('border-gray-900', 'bg-gray-900', 'text-white');
            b.classList.add('border-gray-200', 'bg-gray-50', 'text-gray-700');
        });
        btn.classList.remove('border-gray-200', 'bg-gray-50', 'text-gray-700');
        btn.classList.add('border-gray-900', 'bg-gray-900', 'text-white');
    });

    document.getElementById('rd-planner-confirm')?.addEventListener('click', () => {
        if (!currentRecipeId || !plannerPickerDay || !plannerPickerSlot) return;
        const plans = loadPlans();
        const key = dateKey(plannerPickerDay);
        if (!plans[key]) plans[key] = {};
        if (!plans[key][plannerPickerSlot]) plans[key][plannerPickerSlot] = [];

        const entry = {
            id: newPlanEntryId(),
            recipeId: currentRecipeId,
            servings: currentServings,
        };
        if (Object.keys(currentSubstitutions).length > 0) {
            entry.substitutions = { ...currentSubstitutions };
        }

        plans[key][plannerPickerSlot].push(entry);
        savePlans(plans);
        closePlannerPicker();
        showAppToast('Dodano do planera!');
        window.refreshPlanner?.();
    });

    window.openRecipeDetail = (recipeId) => {
        if (!recipeId || !RECIPES[recipeId]) return;
        populateDetail(recipeId);
        const view = document.getElementById('recipe-detail-view');
        view.classList.remove('translate-x-full', 'opacity-0', 'pointer-events-none');
        view.classList.add('translate-x-0', 'opacity-100', 'pointer-events-auto');
    };

    window.closeRecipeDetail = () => {
        closePlannerPicker();
        const view = document.getElementById('recipe-detail-view');
        view.classList.remove('translate-x-0', 'opacity-100', 'pointer-events-auto');
        view.classList.add('translate-x-full', 'opacity-0', 'pointer-events-none');
    };
}