Reorganise adding recipe to plan

js/views/RecipeDetail.js

@@ -1,7 +1,6 @@
 import { RECIPES, INGREDIENTS } from '../data/catalog.js';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
-import { addDays, startOfDay } from '../services/dateUtils.js';
-import { addOrMergeShoppingLines, loadPantry } from '../services/pantryShopping.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';
 
@@ -14,6 +13,8 @@ function escapeHtml(s) {
 }
 
 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 `
@@ -23,19 +24,44 @@ export function getRecipeDetailHTML() {
                 <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> Do planera
+                <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-[70vh] overflow-y-auto" style="pointer-events: auto; transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1)">
+            <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">Dodaj do planera</h3>
-                <p id="rd-planner-recipe-name" class="text-[11px] text-gray-500 mb-4"></p>
-                <div id="rd-planner-days" class="space-y-2 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-5"></div>
-                <button id="rd-planner-confirm" 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">
+                <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>
@@ -83,8 +109,18 @@ export function getRecipeDetailHTML() {
     `;
 }
 
+/* ── 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];
@@ -92,6 +128,8 @@ function populateDetail(recipeId) {
 
     currentRecipeId = recipeId;
     currentServings = 1;
+    currentSubstitutions = {};
+    expandedAlternatives.clear();
 
     document.getElementById('rd-hero-label').textContent = `Zdjęcie: ${recipe.title}`;
     document.getElementById('rd-title').textContent = recipe.title;
@@ -107,7 +145,6 @@ function populateDetail(recipeId) {
         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);
@@ -127,6 +164,8 @@ function populateDetail(recipeId) {
     document.getElementById('rd-tab-ingredients')?.classList.add('block');
 }
 
+/* ── helpers ───────────────────────────────────────────── */
+
 function updateKcalDisplay() {
     const recipe = RECIPES[currentRecipeId];
     if (!recipe) return;
@@ -134,88 +173,93 @@ function updateKcalDisplay() {
     document.getElementById('rd-kcal').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 (read-only) ───────────────────────── */
+
 function renderIngredients(recipe) {
     const container = document.getElementById('rd-tab-ingredients');
     if (!container) return;
 
-    const pantry = loadPantry();
-
     const rows = recipe.ingredients.map((ing) => {
         const def = INGREDIENTS[ing.ingredientId];
         const name = def?.name || ing.ingredientId;
         const scaledAmount = ing.amount * currentServings;
         const displayAmount = Number.isInteger(scaledAmount) ? scaledAmount : parseFloat(scaledAmount.toFixed(1));
 
-        const pantryQty = Number(pantry[ing.ingredientId]) || 0;
-        let stockBadge = '';
-        if (def) {
-            const u = def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit;
-            if (pantryQty >= scaledAmount) {
-                stockBadge = `<span class="text-[9px] px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-600 font-semibold whitespace-nowrap">Masz</span>`;
-            } else if (pantryQty > 0) {
-                const miss = parseFloat((scaledAmount - pantryQty).toFixed(1));
-                stockBadge = `<span class="text-[9px] px-1.5 py-0.5 rounded bg-amber-50 text-amber-600 font-semibold whitespace-nowrap">Brak ${miss} ${u}</span>`;
-            } else {
-                stockBadge = `<span class="text-[9px] px-1.5 py-0.5 rounded bg-red-50 text-red-500 font-semibold whitespace-nowrap">Brak</span>`;
-            }
+        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-6 h-6 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-[9px]"></i></button>`
+            : '';
+
+        let altListHtml = '';
+        if (hasAlts) {
+            const altCards = ing.alternatives.map((altId) => {
+                const altDef = INGREDIENTS[altId];
+                const altName = escapeHtml(altDef?.name || altId);
+                const nutrition = nutritionForAmount(altId, scaledAmount);
+                return `<div class="bg-gray-50 rounded-lg p-2.5 border border-gray-100">
+                    <p class="text-[12px] font-medium text-gray-700">${altName}</p>
+                    ${renderNutritionLine(nutrition)}
+                </div>`;
+            });
+            altListHtml = `
+            <div class="rd-alt-list ${isExpanded ? '' : 'hidden'} mt-2 mb-0.5 space-y-1.5" data-original-id="${escapeHtml(ing.ingredientId)}">
+                <p class="text-[10px] text-gray-400 font-medium mb-1">Można zamienić na:</p>
+                ${altCards.join('')}
+            </div>`;
         }
 
         return `
-        <li class="flex items-center gap-2.5 py-2.5 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors rd-ingredient-row" data-ingredient-id="${escapeHtml(ing.ingredientId)}" data-base-amount="${ing.amount}" data-unit="${escapeHtml(ing.unit)}">
-            <div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white rd-check-box transition-colors"><i class="fas fa-check text-[10px] hidden rd-check-icon"></i></div>
-            <span class="text-gray-700 text-[13px] flex-1 rd-ing-text transition-colors">${escapeHtml(name)}</span>
-            ${stockBadge}
-            <span class="font-medium text-gray-900 text-[13px] rd-ing-amount tabular-nums">${displayAmount} ${escapeHtml(ing.unit)}</span>
+        <li class="py-2.5 border-b border-gray-100">
+            <div class="flex items-center gap-2.5 py-0.5">
+                <span class="text-gray-700 text-[13px] flex-1">${escapeHtml(name)}</span>
+                ${toggleBtn}
+                <span class="font-medium text-gray-900 text-[13px] tabular-nums">${displayAmount} ${escapeHtml(ing.unit)}</span>
+            </div>${altListHtml}
         </li>`;
     }).join('');
 
     container.innerHTML = `
-        <div class="flex justify-between items-end mb-3">
-            <span class="text-[11px] text-gray-500 font-medium">Zaznacz składniki do kupienia</span>
-        </div>
-        <ul class="space-y-0 mb-5" id="rd-ingredient-list">${rows}</ul>
-        <button id="rd-add-to-shopping" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold shadow-sm transition-colors text-[13px] flex items-center justify-center gap-2 mb-5">
-            <i class="fas fa-plus text-xs"></i> Dodaj do listy zakupów
-        </button>`;
+        <ul class="space-y-0" id="rd-ingredient-list">${rows}</ul>`;
 
-    container.querySelectorAll('.rd-ingredient-row').forEach((row) => {
-        row.addEventListener('click', () => row.classList.toggle('ingredient-active'));
-    });
-
-    document.getElementById('rd-add-to-shopping')?.addEventListener('click', () => {
-        const recipe = RECIPES[currentRecipeId];
-        if (!recipe) return;
-
-        const checkedRows = container.querySelectorAll('.rd-ingredient-row.ingredient-active');
-        if (checkedRows.length === 0) {
-            showAppToast('Zaznacz składniki, które chcesz dodać.');
-            return;
-        }
-
-        const lines = [];
-        checkedRows.forEach((row) => {
-            const ingredientId = row.dataset.ingredientId;
-            const baseAmount = parseFloat(row.dataset.baseAmount);
-            const unit = row.dataset.unit;
-            const def = INGREDIENTS[ingredientId];
-            lines.push({
-                ingredientId,
-                amount: Math.round(baseAmount * currentServings * 100) / 100,
-                unit,
-                name: def?.name || ingredientId,
-                category: def?.category || 'inne',
-                sourceNote: `Przepis: ${recipe.title}`,
-            });
+    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');
         });
-
-        addOrMergeShoppingLines(lines);
-        showAppToast(`Dodano ${lines.length} składnik(ów) na listę zakupów.`);
-        window.refreshShopping?.();
-
-        checkedRows.forEach((row) => row.classList.remove('ingredient-active'));
     });
 }
 
+/* ── steps tab ─────────────────────────────────────────── */
+
 function renderSteps(recipe) {
     const container = document.getElementById('rd-tab-steps');
     if (!container) return;
@@ -236,6 +280,8 @@ function renderSteps(recipe) {
         </div>`;
 }
 
+/* ── nutrition tab ─────────────────────────────────────── */
+
 function renderNutrition(recipe) {
     const container = document.getElementById('rd-tab-nutrition');
     if (!container) return;
@@ -255,6 +301,8 @@ function renderNutrition(recipe) {
         </div>`;
 }
 
+/* ── setup ─────────────────────────────────────────────── */
+
 export function setupRecipeDetail() {
     document.querySelectorAll('.rd-tab-btn').forEach((btn) => {
         btn.addEventListener('click', () => {
@@ -303,36 +351,239 @@ export function setupRecipeDetail() {
         }
     });
 
-    const WEEKDAYS_LONG = ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'];
-    const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'];
+    /* ── 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 daysContainer = document.getElementById('rd-planner-days');
         const today = startOfDay(new Date());
-        const days = [];
-        for (let i = 0; i < 7; i++) days.push(addDays(today, i));
-
         plannerPickerDay = today;
+        calViewDate = today;
+        calExpanded = false;
+        renderPlannerCalendar();
+
+        renderPlannerVariants(recipe);
+
         plannerPickerSlot = recipe.allowedSlots[0] || MEAL_SLOTS[0]?.id;
-
-        daysContainer.innerHTML = days.map((d, idx) => {
-            const wd = WEEKDAYS_LONG[d.getDay()];
-            const label = idx === 0 ? `Dziś — ${wd}, ${d.getDate()} ${MONTHS_SHORT[d.getMonth()]}` : `${wd}, ${d.getDate()} ${MONTHS_SHORT[d.getMonth()]}`;
-            const sel = idx === 0;
-            return `<button type="button" class="rd-plan-day-btn w-full text-left px-3 py-2.5 rounded-xl border text-[13px] font-semibold transition-all ${sel ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-gray-50 text-gray-900 hover:border-gray-400'}" data-day-ts="${d.getTime()}">${escapeHtml(label)}</button>`;
-        }).join('');
-
         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;
@@ -360,18 +611,6 @@ export function setupRecipeDetail() {
         if (e.target === plannerOverlay) closePlannerPicker();
     });
 
-    document.getElementById('rd-planner-days')?.addEventListener('click', (e) => {
-        const btn = e.target.closest('.rd-plan-day-btn');
-        if (!btn) return;
-        plannerPickerDay = new Date(Number(btn.getAttribute('data-day-ts')));
-        document.querySelectorAll('.rd-plan-day-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-900');
-        });
-        btn.classList.remove('border-gray-200', 'bg-gray-50', 'text-gray-900');
-        btn.classList.add('border-gray-900', 'bg-gray-900', 'text-white');
-    });
-
     document.getElementById('rd-planner-slots')?.addEventListener('click', (e) => {
         const btn = e.target.closest('.rd-plan-slot-btn');
         if (!btn) return;
@@ -390,11 +629,17 @@ export function setupRecipeDetail() {
         const key = dateKey(plannerPickerDay);
         if (!plans[key]) plans[key] = {};
         if (!plans[key][plannerPickerSlot]) plans[key][plannerPickerSlot] = [];
-        plans[key][plannerPickerSlot].push({
+
+        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!');