import {
    INGREDIENTS,
    CATEGORY_LABELS,
    PRODUCTS,
    pantryQtyStep,
    getProductsForIngredient,
    ingredientHasProducts,
} from '../data/catalog.js?v=8';
import {
    addOrMergeShoppingLines,
    categoryLabel,
    loadPantry,
    setPantryQty,
    setPantryProductQty,
    getPantryTotal,
    getPantryProducts,
} from '../services/pantryShopping.js?v=2';
import { showAppToast } from '../ui/toast.js';

/* ── helpers ── */

function esc(s) {
    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

function unitLabel(u) {
    return u === 'szt' ? 'szt.' : u;
}

function normalizeSearch(q) {
    return String(q).trim().toLowerCase();
}

function formatQty(n) {
    const rounded = Math.round((Number(n) || 0) * 10) / 10;
    return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1).replace(/\.0$/, '');
}

function formatQtyWithUnit(qty, unit) {
    return `${formatQty(qty)} ${unitLabel(unit)}`;
}

function productCountLabel(count) {
    if (count === 1) return '1 produkt';
    const mod10 = count % 10;
    const mod100 = count % 100;
    if (mod10 >= 2 && mod10 <= 4 && !(mod100 >= 12 && mod100 <= 14)) return `${count} produkty`;
    return `${count} produktów`;
}

function productCountShortLabel(count) {
    return `${count} prod.`;
}

function nutritionForQty(def, qty, nutrition = def?.nutritionPer100g) {
    if (!def || !nutrition || !Number.isFinite(qty) || qty <= 0) return null;
    let grams = qty;
    if (def.pantryUnit === 'szt' && def.weightPerPiece) grams = qty * def.weightPerPiece;
    const f = grams / 100;
    return {
        kcal: Math.round(nutrition.kcal * f),
        protein: Math.round(nutrition.protein * f * 10) / 10,
        fat: Math.round(nutrition.fat * f * 10) / 10,
        carbs: Math.round(nutrition.carbs * f * 10) / 10,
    };
}

function macroLine(n) {
    if (!n) return '';
    return `${n.kcal} kcal · ${formatQty(n.protein)}g B · ${formatQty(n.fat)}g T · ${formatQty(n.carbs)}g W`;
}

function mediaHtml(image, icon, sizeClass = 'w-11 h-11', radiusClass = 'rounded-2xl') {
    if (image) {
        return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} object-cover shrink-0">`;
    }
    return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-sm" style="color:#8f8b84;"></i></div>`;
}

function compactMetaText(text, tone = 'default') {
    const color = tone === 'success' ? '#6ee7b7' : tone === 'muted' ? '#9b978f' : '#d7d2c8';
    return `<span class="text-[10px] font-medium" style="color:${color};">${esc(text)}</span>`;
}

function sortProductsByStock(products, pantryItems) {
    return [...products].sort((a, b) => {
        const aq = pantryItems.find((i) => i.productId === a.id)?.qty || 0;
        const bq = pantryItems.find((i) => i.productId === b.id)?.qty || 0;
        if (bq !== aq) return bq - aq;
        return a.name.localeCompare(b.name, 'pl');
    });
}

const CATEGORY_ICONS = {
    pieczywo: 'fa-bread-slice',
    nabial: 'fa-cheese',
    mieso_ryby: 'fa-drumstick-bite',
    warzywa: 'fa-carrot',
    owoce: 'fa-apple-whole',
    suche: 'fa-wheat-awn',
    przyprawy: 'fa-leaf',
    inne: 'fa-jar',
};

const SEARCH_SHELL_SHADOW = '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)';

/* ── state ── */

let editingId = null;
let editingProductId = null;
let cardCloseTimer = null;

/* ══════════════════════ HTML SHELL ══════════════════════ */

export function getPantryHTML() {
    return `
    <div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:#2d2e2b !important;">

        <!-- ── floating search bar ── -->
        <div class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4" style="background:transparent !important; border:none !important;">
            <div id="pantry-search-shell" class="pointer-events-auto relative z-[1] mx-auto flex items-center w-full overflow-hidden" style="width:min(calc(100% - 0.5rem), 22.4rem); background:#393937 !important; border:1px solid #41423f !important; border-radius:999px !important; box-shadow:${SEARCH_SHELL_SHADOW} !important;">
                <input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
                    class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] px-8" style="background:transparent !important; border:none !important; box-shadow:none !important; color:#ddd6ca;">
            </div>
        </div>

        <!-- ── scrollable content ── -->
        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[4.5rem] pb-24" style="background:#2d2e2b !important;">
            <div id="pantry-board" class="space-y-4"></div>
        </div>

        <!-- ── ingredient card popup ── -->
        <div id="pv2-card-overlay" class="absolute inset-0 z-[60] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5" style="pointer-events:none; background:rgba(0,0,0,0.5);">
            <div id="pv2-card" class="relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden" style="background:#2d2e2b; pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;">
                <div id="pv2-card-hero" class="relative w-full h-[160px] overflow-hidden" style="background:#393937;">
                    <img id="pv2-card-img" class="w-full h-full object-cover hidden" alt="" />
                    <div id="pv2-card-fallback" class="w-full h-full flex items-center justify-center">
                        <i id="pv2-card-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
                    </div>
                    <button type="button" id="pv2-card-back" class="absolute top-3 left-3 w-8 h-8 rounded-full hidden flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Wróć do składnika">
                        <i class="fas fa-chevron-left text-sm"></i>
                    </button>
                    <button type="button" id="pv2-card-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Zamknij">
                        <i class="fas fa-times text-sm"></i>
                    </button>
                </div>
                <div class="px-4 pt-3 pb-4 space-y-3">
                    <div>
                        <p id="pv2-card-category" class="text-[10px] font-semibold uppercase tracking-wider" style="color:#9b978f;"></p>
                        <h3 id="pv2-card-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
                        <p id="pv2-card-subtitle" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
                    </div>
                    <div id="pv2-card-nutrition"></div>
                    <div id="pv2-card-stock-section"></div>
                    <div id="pv2-card-products-section"></div>
                    <div id="pv2-card-shop-section"></div>
                </div>
            </div>
        </div>
    </div>`;
}

/* ══════════════════════ BOARD RENDERING ══════════════════════ */

function getFilteredIds(searchRaw) {
    const q = normalizeSearch(searchRaw);
    return Object.keys(INGREDIENTS).filter((id) => {
        const d = INGREDIENTS[id];
        if (!q) return true;
        return d.name.toLowerCase().includes(q) || (CATEGORY_LABELS[d.category] || '').toLowerCase().includes(q);
    }).sort((a, b) => INGREDIENTS[a].name.localeCompare(INGREDIENTS[b].name, 'pl'));
}

function getCategoryItemLabel(count) {
    if (count === 1) return 'składnik';
    const mod10 = count % 10;
    const mod100 = count % 100;
    if (mod10 >= 2 && mod10 <= 4 && !(mod100 >= 12 && mod100 <= 14)) return 'składniki';
    return 'składników';
}

function ingredientRowHtml(id, pantry) {
    const def = INGREDIENTS[id];
    const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
    const qty = getPantryTotal(id, pantry);
    const hasProducts = ingredientHasProducts(id);
    const products = hasProducts ? getProductsForIngredient(id) : [];
    const pantryItems = hasProducts ? getPantryProducts(id, pantry) : [];
    const stockedCount = pantryItems.filter((i) => i.qty > 0).length;
    const hasStock = qty > 0;
    const accent = hasStock ? '#6ee7b7' : '#4b4a46';
    const qtyColor = hasStock ? '#6ee7b7' : '#d7d2c8';
    const subtitle = hasProducts
        ? `${stockedCount}/${products.length} produktów`
        : categoryLabel(def.category);
    const status = hasProducts
        ? (stockedCount === 0 ? 'wybierz produkt' : stockedCount === products.length ? 'wszystko na stanie' : 'częściowo na stanie')
        : (hasStock ? 'na stanie' : 'brak');
    const badgeText = hasProducts ? productCountShortLabel(products.length) : unitLabel(def.pantryUnit);

    return `<button type="button" class="pv2-chip shrink-0 w-[9.5rem] rounded-2xl px-3 py-2.5 text-left transition-colors active:scale-[0.99]" style="background:#393937; border:1px solid #444442; box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);" data-id="${esc(id)}">
        <div class="w-full h-1 rounded-full mb-2" style="background:${accent}; opacity:${hasStock ? '1' : '0.45'};"></div>
        <div class="flex items-start gap-2">
            ${mediaHtml(def.image, icon, 'w-8 h-8', 'rounded-lg')}
            <div class="min-w-0 flex-1">
                <span class="block text-[12px] font-semibold leading-[1.2] overflow-hidden" style="color:#ddd6ca; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">
                    ${esc(def.name)}
                </span>
                <span class="block text-[10px] mt-0.5 truncate" style="color:#9b978f;">${esc(subtitle)}</span>
            </div>
        </div>
        <div class="mt-3">
            <div class="flex items-end justify-between gap-2">
                <span class="text-[14px] font-bold tabular-nums leading-none block" style="color:${qtyColor};">${esc(formatQtyWithUnit(qty, def.pantryUnit))}</span>
                <span class="inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-semibold shrink-0" style="background:#2f2f2d; color:#9b978f;">${esc(badgeText)}</span>
            </div>
            <span class="text-[10px] block mt-1" style="color:#9b978f;">${esc(status)}</span>
        </div>
    </button>`;
}

function groupByCategory(ids) {
    /** @type {Map<string, string[]>} */
    const groups = new Map();
    for (const id of ids) {
        const cat = INGREDIENTS[id].category;
        if (!groups.has(cat)) groups.set(cat, []);
        groups.get(cat).push(id);
    }
    return [...groups.keys()]
        .sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)))
        .map((cat) => ({ cat, ids: groups.get(cat) }));
}

function renderBoard() {
    const root = document.getElementById('pantry-board');
    if (!root) return;

    const q = document.getElementById('pantry-search')?.value || '';
    const pantry = loadPantry();
    const visible = getFilteredIds(q);

    if (visible.length === 0) {
        root.innerHTML = `<p class="text-sm text-center py-10" style="color:#9b978f;">Brak wyników — zmień wyszukiwanie.</p>`;
        return;
    }

    const groups = groupByCategory(visible);
    root.innerHTML = groups.map(({ cat, ids }) => {
        const icon = CATEGORY_ICONS[cat] || 'fa-jar';
        return `
        <section class="mb-4 last:mb-0">
            <div class="flex items-center justify-between gap-3 mb-2 px-0.5">
                <div class="min-w-0">
                    <p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">
                        <i class="fas ${icon} text-[10px] mr-1"></i>${esc(categoryLabel(cat))}
                    </p>
                    <p class="text-[10px] mt-1" style="color:#6d6c67;">${ids.length} ${getCategoryItemLabel(ids.length)}</p>
                </div>
                <span class="text-[10px] shrink-0" style="color:#6d6c67;">przesuń w bok</span>
            </div>
            <div class="overflow-x-auto no-scrollbar -mx-4 px-4">
                <div class="flex gap-2.5 pb-1">
                    ${ids.map((rowId) => ingredientRowHtml(rowId, pantry)).join('')}
                </div>
            </div>
        </section>`;
    }).join('');

    root.querySelectorAll('.pv2-chip').forEach((btn) => {
        btn.addEventListener('click', () => openIngredientCard(btn.dataset.id, null));
    });
}

/* ══════════════════════ INGREDIENT SHEET ══════════════════════ */

function renderCardHeader(def, product, pantry) {
    const hasProducts = ingredientHasProducts(def.id);
    const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
    const image = product?.image || def.image;
    const img = document.getElementById('pv2-card-img');
    const fallback = document.getElementById('pv2-card-fallback');
    const fallbackIcon = document.getElementById('pv2-card-fallback-icon');
    if (img && fallback) {
        if (image) {
            img.src = image;
            img.alt = product?.name || def.name;
            img.classList.remove('hidden');
            fallback.classList.add('hidden');
        } else {
            img.classList.add('hidden');
            fallback.classList.remove('hidden');
            if (fallbackIcon) fallbackIcon.className = `fas ${icon} text-3xl`;
        }
    }

    const totalQty = getPantryTotal(def.id, pantry);
    const productQty = product
        ? (getPantryProducts(def.id, pantry).find((i) => i.productId === product.id)?.qty || 0)
        : totalQty;
    const stockNut = nutritionForQty(def, productQty, product?.nutritionPer100g || def.nutritionPer100g);

    const categoryEl = document.getElementById('pv2-card-category');
    const nameEl = document.getElementById('pv2-card-name');
    const subtitleEl = document.getElementById('pv2-card-subtitle');
    const backBtn = document.getElementById('pv2-card-back');

    if (categoryEl) categoryEl.textContent = product?.brand || categoryLabel(def.category);
    if (nameEl) nameEl.textContent = product?.name || def.name;

    if (subtitleEl) {
        let subtitle = '';
        if (product) {
            subtitle = [def.name, product.packLabel].filter(Boolean).join(' • ');
        } else if (hasProducts) {
            subtitle = `${productCountLabel(getProductsForIngredient(def.id).length)} • ${formatQtyWithUnit(totalQty, def.pantryUnit)} na stanie`;
        } else if (def.purchasePack?.label) {
            subtitle = def.purchasePack.label;
        }

        if (subtitle) {
            subtitleEl.textContent = subtitle;
            subtitleEl.classList.remove('hidden');
        } else {
            subtitleEl.classList.add('hidden');
        }
    }

    if (backBtn) {
        backBtn.classList.toggle('hidden', !(hasProducts && product));
    }
}

function renderCardNutrition(def, product) {
    const wrap = document.getElementById('pv2-card-nutrition');
    if (!wrap) return;
    const n = product?.nutritionPer100g || def.nutritionPer100g;
    if (!n) {
        wrap.innerHTML = '';
        return;
    }
    const hasProducts = ingredientHasProducts(def.id);
    const unitScope = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
    const hint = product
        ? 'dokładne dla produktu'
        : hasProducts
            ? 'orientacyjnie dla składnika'
            : 'bazowe wartości';

    wrap.innerHTML = `
        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Wartości odżywcze</p>
        <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(unitScope)} • ${esc(hint)}</p>
        <div class="grid grid-cols-4 gap-1.5">
            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
                <p class="text-[15px] font-bold tabular-nums leading-tight" style="color:#ddd6ca;">${n.kcal}</p>
                <p class="text-[9px] font-medium" style="color:#9b978f;">kcal</p>
            </div>
            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
                <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${formatQty(n.protein)}g</p>
                <p class="text-[9px] font-medium" style="color:#9b978f;">białko</p>
            </div>
            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
                <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${formatQty(n.fat)}g</p>
                <p class="text-[9px] font-medium" style="color:#9b978f;">tłuszcz</p>
            </div>
            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
                <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${formatQty(n.carbs)}g</p>
                <p class="text-[9px] font-medium" style="color:#9b978f;">węgl.</p>
            </div>
        </div>`;
}

function renderCardStock(ingredientId, productId, pantry) {
    const wrap = document.getElementById('pv2-card-stock-section');
    if (!wrap) return;
    const def = INGREDIENTS[ingredientId];
    if (!def) return;

    const hasProducts = ingredientHasProducts(ingredientId);
    const product = productId ? PRODUCTS[productId] : null;
    const totalQty = getPantryTotal(ingredientId, pantry);
    const u = unitLabel(def.pantryUnit);

    if (hasProducts && !product) {
        const stockedCount = getPantryProducts(ingredientId, pantry).filter((i) => i.qty > 0).length;
        const summaryNutrition = nutritionForQty(def, totalQty);
        wrap.innerHTML = `
            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
            <div class="rounded-xl px-3 py-2.5" style="background:#393937;">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <p class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(totalQty))} ${esc(u)}</p>
                        <p class="text-[11px] mt-0.5" style="color:#9b978f;">${stockedCount} z ${getProductsForIngredient(ingredientId).length} produktów ma stan</p>
                    </div>
                    <span class="text-[10px] text-right max-w-[92px]" style="color:#9b978f;">Wybierz produkt niżej, aby zmienić stan</span>
                </div>
                ${summaryNutrition ? `<p class="text-[10px] mt-2 tabular-nums" style="color:#9b978f;">${esc(macroLine(summaryNutrition))}</p>` : ''}
            </div>`;
        return;
    }

    const qty = product
        ? (getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0)
        : totalQty;
    const step = product ? (product.packSize || pantryQtyStep(ingredientId)) : pantryQtyStep(ingredientId);
    const stockNut = nutritionForQty(def, qty, product?.nutritionPer100g || def.nutritionPer100g);

    wrap.innerHTML = `
        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
        <div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2" style="background:#393937;">
            <button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(productId || '_generic')}" data-step="${step}" data-dir="-1" aria-label="Zmniejsz stan">
                <i class="fas fa-minus text-xs"></i>
            </button>
            <div class="flex-1 text-center">
                <p class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(qty))} ${esc(u)}</p>
                <p class="text-[10px] mt-0.5" style="color:#9b978f;">Krok: ${esc(formatQty(step))} ${esc(u)}</p>
            </div>
            <button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(productId || '_generic')}" data-step="${step}" data-dir="1" aria-label="Zwiększ stan">
                <i class="fas fa-plus text-xs"></i>
            </button>
        </div>
        ${stockNut ? `<p class="text-[10px] mt-1.5 tabular-nums" style="color:#9b978f;">${esc(macroLine(stockNut))} na stanie</p>` : ''}`;

    wrap.querySelectorAll('.pv2-stock-btn').forEach((btn) => {
        btn.addEventListener('click', () => {
            if (!editingId) return;
            const pid = btn.dataset.pid;
            const stepVal = Number(btn.dataset.step) || 1;
            const dir = Number(btn.dataset.dir) || 1;
            const currentPantry = loadPantry();
            if (pid === '_generic') {
                const cur = getPantryTotal(editingId, currentPantry);
                setPantryQty(editingId, Math.max(0, cur + stepVal * dir));
            } else {
                const items = getPantryProducts(editingId, currentPantry);
                const cur = items.find((i) => i.productId === pid)?.qty || 0;
                setPantryProductQty(editingId, pid, Math.max(0, cur + stepVal * dir));
            }
            renderBoard();
            renderIngredientCard();
        });
    });
}

function productSwitcherRowHtml(ingredientId, productId, pantry, selectedProductId) {
    const def = INGREDIENTS[ingredientId];
    const product = PRODUCTS[productId];
    const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
    const qty = getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0;
    const isSelected = selectedProductId === productId;
    return `<button type="button" class="pv2-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:${isSelected ? '#23221e' : '#393937'}; border:${isSelected ? '1px solid #787876' : '1px solid transparent'};" data-product-id="${esc(productId)}">
        ${mediaHtml(product.image || def.image, icon, 'w-9 h-9', 'rounded-lg')}
        <div class="flex-1 min-w-0">
            <div class="flex items-center justify-between gap-2">
                <span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
                <span class="text-[12px] font-bold tabular-nums shrink-0" style="color:${qty > 0 ? '#ddd6ca' : '#6d6c67'};">${esc(formatQty(qty))} ${esc(unitLabel(def.pantryUnit))}</span>
            </div>
            <div class="flex items-center gap-2 mt-0.5">
                ${compactMetaText(product.packLabel || '', 'muted')}
                ${isSelected ? compactMetaText('wybrany', 'success') : ''}
            </div>
        </div>
        <i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
    </button>`;
}

function renderCardProducts(ingredientId, productId, pantry) {
    const wrap = document.getElementById('pv2-card-products-section');
    if (!wrap) return;
    if (!ingredientHasProducts(ingredientId)) {
        wrap.innerHTML = '';
        return;
    }

    const products = sortProductsByStock(getProductsForIngredient(ingredientId), getPantryProducts(ingredientId, pantry));
    const title = 'Produkty';
    const subtitle = productId
        ? 'Wróć lub wybierz inny wariant.'
        : 'Wybierz wariant, aby zobaczyć szczegóły.';

    wrap.innerHTML = `
        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">${esc(title)}</p>
        <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(subtitle)}</p>
        <div class="space-y-1.5">
            ${products.map((p) => productSwitcherRowHtml(ingredientId, p.id, pantry, productId)).join('')}
        </div>`;

    wrap.querySelectorAll('.pv2-card-product-row').forEach((btn) => {
        btn.addEventListener('click', () => {
            editingProductId = btn.dataset.productId || null;
            renderIngredientCard();
        });
    });
}

function renderCardShop(ingredientId, productId) {
    const wrap = document.getElementById('pv2-card-shop-section');
    if (!wrap) return;
    const def = INGREDIENTS[ingredientId];
    if (!def) return;

    const hasProducts = ingredientHasProducts(ingredientId);
    const product = productId ? PRODUCTS[productId] : null;
    const packSize = product?.packSize || def.purchasePack?.amount;
    const packLabel = product?.packLabel || def.purchasePack?.label;
    const usesPacks = Boolean(packSize && packSize > 0);
    const btnLabel = usesPacks
        ? `Dodaj na listę (${packLabel || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`})`
        : 'Dodaj na listę';
    const helperText = hasProducts && !product
        ? 'Doda składnik bez wskazanej marki. Jeśli chcesz konkretny produkt, wybierz go wyżej.'
        : product
            ? 'Pozycja trafi na listę zakupów z dokładnym produktem.'
            : 'Szybki skrót do listy zakupów ze spiżarni.';

    wrap.innerHTML = `
        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Lista zakupów</p>
        <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(helperText)}</p>
        <button type="button" id="pv2-card-add-list" class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[13px] font-semibold transition-colors active:scale-[0.98]" style="background:#ddd6ca; color:#2d2e2b;">
            <i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}
        </button>`;

    document.getElementById('pv2-card-add-list')?.addEventListener('click', () => {
        if (!editingId) return;
        const d = INGREDIENTS[editingId];
        if (!d) return;
        const uLabel = unitLabel(d.pantryUnit);
        const amt = usesPacks ? packSize : pantryQtyStep(editingId);
        const note = usesPacks ? (packLabel || `${formatQty(packSize)} ${uLabel}`) : undefined;
        const line = {
            ingredientId: editingId,
            amount: amt,
            unit: uLabel,
            name: product?.name || d.name,
            category: d.category,
            sourceNote: note || 'Ze spiżarni',
        };
        if (productId) line.productId = productId;
        addOrMergeShoppingLines([line]);
        showAppToast(`Dodano ${product?.name || d.name} na listę.`);
        window.refreshShopping?.();
    });
}

function renderIngredientCard() {
    if (!editingId) return;
    const def = INGREDIENTS[editingId];
    if (!def) return;
    const product = editingProductId ? PRODUCTS[editingProductId] : null;
    const pantry = loadPantry();

    renderCardHeader(def, product, pantry);
    renderCardNutrition(def, product);
    renderCardStock(editingId, editingProductId, pantry);
    renderCardProducts(editingId, editingProductId, pantry);
    renderCardShop(editingId, editingProductId);
}

function openIngredientCard(ingredientId, productId) {
    const def = INGREDIENTS[ingredientId];
    if (!def) return;
    editingId = ingredientId;
    editingProductId = productId && PRODUCTS[productId] ? productId : null;
    renderIngredientCard();

    const overlay = document.getElementById('pv2-card-overlay');
    const card = document.getElementById('pv2-card');
    if (!overlay || !card) return;
    clearTimeout(cardCloseTimer);
    overlay.classList.remove('hidden');
    overlay.style.pointerEvents = 'auto';
    requestAnimationFrame(() => {
        overlay.classList.add('opacity-100');
        card.style.opacity = '1';
        card.style.transform = 'translateY(0)';
    });
}

function closeIngredientCard() {
    const overlay = document.getElementById('pv2-card-overlay');
    const card = document.getElementById('pv2-card');
    if (overlay && card) {
        overlay.classList.remove('opacity-100');
        overlay.style.pointerEvents = 'none';
        card.style.opacity = '0';
        card.style.transform = 'translateY(1.5rem)';
        cardCloseTimer = setTimeout(() => overlay.classList.add('hidden'), 220);
    }
    editingId = null;
    editingProductId = null;
    renderBoard();
}

function bindEditSheet() {
    document.getElementById('pv2-card-close')?.addEventListener('click', closeIngredientCard);
    document.getElementById('pv2-card-back')?.addEventListener('click', () => {
        editingProductId = null;
        renderIngredientCard();
    });
    document.getElementById('pv2-card-overlay')?.addEventListener('click', (e) => {
        if (e.target.id === 'pv2-card-overlay') closeIngredientCard();
    });
}

/* ══════════════════════ PUBLIC API ══════════════════════ */

export function refreshPantry() {
    renderBoard();
    if (editingId) renderIngredientCard();
}

export function setupPantry() {
    renderBoard();
    bindEditSheet();

    document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());

    window.refreshPantry = refreshPantry;
}