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

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',
};

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 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 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 factor = grams / 100;
    return {
        kcal: Math.round(nutrition.kcal * factor),
        protein: Math.round(nutrition.protein * factor * 10) / 10,
        fat: Math.round(nutrition.fat * factor * 10) / 10,
        carbs: Math.round(nutrition.carbs * factor * 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-9 h-9', radiusClass = 'rounded-lg') {
    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');
    });
}

export function getIngredientCardHTML({
    idBase,
    overlayClass = 'fixed inset-0 z-[70] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
    overlayStyle = 'pointer-events:none; background:rgba(0,0,0,0.5);',
    cardClass = 'relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden',
    cardStyle = 'background:#2d2e2b; pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;',
    heroHeightClass = 'h-[180px]',
} = {}) {
    if (!idBase) throw new Error('getIngredientCardHTML requires idBase');
    return `
    <div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}">
        <div id="${idBase}" class="${cardClass}" style="${cardStyle}">
            <div class="relative w-full ${heroHeightClass} overflow-hidden" style="background:#393937;">
                <img id="${idBase}-img" class="w-full h-full object-cover hidden" alt="" />
                <div id="${idBase}-fallback" class="w-full h-full flex items-center justify-center">
                    <i id="${idBase}-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
                </div>
                <button type="button" id="${idBase}-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="${idBase}-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="${idBase}-category" class="text-[10px] font-semibold uppercase tracking-wider" style="color:#6ee7b7;"></p>
                    <h3 id="${idBase}-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
                    <p id="${idBase}-subtitle" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
                </div>
                <div id="${idBase}-nutrition"></div>
                <div id="${idBase}-stock"></div>
                <div id="${idBase}-products"></div>
                <div id="${idBase}-shop"></div>
            </div>
        </div>
    </div>`;
}

export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze spiżarni' } = {}) {
    if (!idBase) throw new Error('createIngredientCardController requires idBase');

    const state = {
        ingredientId: null,
        productId: null,
        selectedProductId: null,
        sourceNote: defaultSourceNote,
        onProductChange: null,
        onAfterChange: null,
        closeTimer: null,
    };
    let bound = false;

    const el = (suffix = '') => document.getElementById(suffix ? `${idBase}-${suffix}` : idBase);

    function renderHeader(def, product, pantry) {
        const hasProducts = ingredientHasProducts(def.id);
        const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
        const image = product?.image || def.image;
        const img = el('img');
        const fallback = el('fallback');
        const fallbackIcon = el('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 categoryEl = el('category');
        const nameEl = el('name');
        const subtitleEl = el('subtitle');
        const backBtn = el('back');

        if (categoryEl) categoryEl.textContent = product?.brand || CATEGORY_LABELS[def.category] || 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 && state.productId));
        }
    }

    function renderNutrition(def, product) {
        const wrap = el('nutrition');
        if (!wrap) return;
        const nutrition = product?.nutritionPer100g || def.nutritionPer100g;
        if (!nutrition) {
            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;">${nutrition.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(nutrition.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(nutrition.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(nutrition.carbs)}g</p>
                    <p class="text-[9px] font-medium" style="color:#9b978f;">węgl.</p>
                </div>
            </div>`;
    }

    function renderStock() {
        const wrap = el('stock');
        if (!wrap || !state.ingredientId) return;
        const def = INGREDIENTS[state.ingredientId];
        if (!def) return;

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

        if (hasProducts && !product) {
            const stockedCount = getPantryProducts(state.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(unit)}</p>
                            <p class="text-[11px] mt-0.5" style="color:#9b978f;">${stockedCount} z ${getProductsForIngredient(state.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(state.ingredientId, pantry).find((i) => i.productId === state.productId)?.qty || 0)
            : totalQty;
        const step = product ? (product.packSize || pantryQtyStep(state.ingredientId)) : pantryQtyStep(state.ingredientId);
        const stockNutrition = 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="ingredient-card-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(state.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(unit)}</p>
                    <p class="text-[10px] mt-0.5" style="color:#9b978f;">Krok: ${esc(formatQty(step))} ${esc(unit)}</p>
                </div>
                <button type="button" class="ingredient-card-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(state.productId || '_generic')}" data-step="${step}" data-dir="1" aria-label="Zwiększ stan">
                    <i class="fas fa-plus text-xs"></i>
                </button>
            </div>
            ${stockNutrition ? `<p class="text-[10px] mt-1.5 tabular-nums" style="color:#9b978f;">${esc(macroLine(stockNutrition))} na stanie</p>` : ''}`;

        wrap.querySelectorAll('.ingredient-card-stock-btn').forEach((btn) => {
            btn.addEventListener('click', () => {
                const pid = btn.dataset.pid;
                const stepVal = Number(btn.dataset.step) || 1;
                const dir = Number(btn.dataset.dir) || 1;
                const pantryState = loadPantry();
                if (pid === '_generic') {
                    const current = getPantryTotal(state.ingredientId, pantryState);
                    setPantryQty(state.ingredientId, Math.max(0, current + stepVal * dir));
                } else {
                    const items = getPantryProducts(state.ingredientId, pantryState);
                    const current = items.find((i) => i.productId === pid)?.qty || 0;
                    setPantryProductQty(state.ingredientId, pid, Math.max(0, current + stepVal * dir));
                }
                render();
                state.onAfterChange?.();
            });
        });
    }

    function productRowHtml(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="ingredient-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)}
            <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 renderProducts() {
        const wrap = el('products');
        if (!wrap || !state.ingredientId) return;
        if (!ingredientHasProducts(state.ingredientId)) {
            wrap.innerHTML = '';
            return;
        }

        const pantry = loadPantry();
        const products = sortProductsByStock(getProductsForIngredient(state.ingredientId), getPantryProducts(state.ingredientId, pantry));
        const selectedProductId = state.selectedProductId || state.productId;
        const subtitle = state.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;">Produkty</p>
            <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(subtitle)}</p>
            <div class="space-y-1.5">
                ${products.map((product) => productRowHtml(state.ingredientId, product.id, pantry, selectedProductId)).join('')}
            </div>`;

        wrap.querySelectorAll('.ingredient-card-product-row').forEach((btn) => {
            btn.addEventListener('click', () => {
                const nextProductId = btn.dataset.productId || null;
                state.productId = nextProductId;
                state.selectedProductId = nextProductId;
                if (nextProductId) state.onProductChange?.(nextProductId);
                render();
                state.onAfterChange?.();
            });
        });
    }

    function renderShop() {
        const wrap = el('shop');
        if (!wrap || !state.ingredientId) return;
        const def = INGREDIENTS[state.ingredientId];
        if (!def) return;

        const hasProducts = ingredientHasProducts(state.ingredientId);
        const product = state.productId ? PRODUCTS[state.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 ${defaultSourceNote === 'Ze spiżarni' ? 'ze spiżarni' : 'z planera'}.`;

        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" class="ingredient-card-add-list 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>`;

        wrap.querySelector('.ingredient-card-add-list')?.addEventListener('click', () => {
            const amount = usesPacks ? packSize : pantryQtyStep(state.ingredientId);
            const note = usesPacks ? (packLabel || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`) : undefined;
            const line = {
                ingredientId: state.ingredientId,
                amount,
                unit: unitLabel(def.pantryUnit),
                name: product?.name || def.name,
                category: def.category,
                sourceNote: note || state.sourceNote || defaultSourceNote,
            };
            if (state.productId) line.productId = state.productId;
            addOrMergeShoppingLines([line]);
            showAppToast(`Dodano ${product?.name || def.name} na listę.`);
            window.refreshShopping?.();
        });
    }

    function render() {
        if (!state.ingredientId) return;
        const def = INGREDIENTS[state.ingredientId];
        if (!def) return;
        const product = state.productId ? PRODUCTS[state.productId] : null;
        const pantry = loadPantry();

        renderHeader(def, product, pantry);
        renderNutrition(def, product);
        renderStock();
        renderProducts();
        renderShop();
    }

    function open({
        ingredientId,
        productId = null,
        selectedProductId = productId,
        sourceNote = defaultSourceNote,
        onProductChange = null,
        onAfterChange = null,
    } = {}) {
        const def = ingredientId ? INGREDIENTS[ingredientId] : null;
        const overlay = el('overlay');
        const card = el();
        if (!def || !overlay || !card) return;

        state.ingredientId = ingredientId;
        state.productId = productId && PRODUCTS[productId] ? productId : null;
        state.selectedProductId = selectedProductId && PRODUCTS[selectedProductId] ? selectedProductId : state.productId;
        state.sourceNote = sourceNote;
        state.onProductChange = onProductChange;
        state.onAfterChange = onAfterChange;
        render();

        clearTimeout(state.closeTimer);
        overlay.classList.remove('hidden');
        overlay.style.pointerEvents = 'auto';
        requestAnimationFrame(() => {
            overlay.classList.add('opacity-100');
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        });
    }

    function close() {
        const overlay = el('overlay');
        const card = el();
        if (overlay && card) {
            overlay.classList.remove('opacity-100');
            overlay.style.pointerEvents = 'none';
            card.style.opacity = '0';
            card.style.transform = 'translateY(1.5rem)';
            state.closeTimer = setTimeout(() => overlay.classList.add('hidden'), 220);
        }
        state.ingredientId = null;
        state.productId = null;
        state.selectedProductId = null;
        state.onProductChange = null;
        state.onAfterChange = null;
        state.sourceNote = defaultSourceNote;
    }

    function bind() {
        if (bound) return;
        bound = true;
        el('close')?.addEventListener('click', close);
        el('back')?.addEventListener('click', () => {
            state.productId = null;
            render();
        });
        el('overlay')?.addEventListener('click', (event) => {
            if (event.target.id === `${idBase}-overlay`) close();
        });
    }

    function refresh() {
        if (state.ingredientId) render();
    }

    return {
        bind,
        open,
        close,
        refresh,
        isOpen: () => Boolean(state.ingredientId),
    };
}