import {
    INGREDIENTS,
    CATEGORY_LABELS,
} from '../data/catalog.js?v=8';
import { loadPantry, getPantryTotal } from '../services/pantryShopping.js?v=2';
import { loadPlans } from '../services/planStore.js?v=2';
import { addDays, addMonths, sameDay, sameMonth, startOfDay, startOfMonth } from '../services/dateUtils.js';
import { aggregateRangeIngredientNeed, dayHasAnyMeal } from '../services/planIngredients.js?v=4';
import {
    bindCalendarDayClicks,
    createCalendarTopbarHTML,
    createCalendarWeekdayHeaderHTML,
    renderCalendarGrid,
    syncCalendarTodayButton,
} from '../ui/mealCalendar.js?v=11';
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-113';

/* ── 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 toggleStringFilter(list, value) {
    return list.includes(value)
        ? list.filter((item) => item !== value)
        : [...list, value];
}

function hasActivePantryFilters() {
    return pantryFilters.categories.length > 0 || pantryFilters.sections.length > 0;
}

function getActivePantryFilterCount() {
    return pantryFilters.categories.length + pantryFilters.sections.length;
}

function filterChipStyle(active) {
    const background = active ? '#393937' : '#2d2e2b';
    const color = active ? '#f2efe8' : '#d7d2c8';
    const borderRule = active ? 'border:1px solid #787876;' : 'border:none;';
    const shadow = active
        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(0,0,0,0.08);'
        : '';
    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
}

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 CATEGORY_ORDER = ['pieczywo', 'nabial', 'mieso_ryby', 'warzywa', 'owoce', 'suche', 'przyprawy', 'inne'];
const PANTRY_SECTION_FILTERS = [
    { id: 'shortfalls', label: 'Potrzebne' },
    { id: 'sufficient', label: 'W spiżarni' },
    { id: 'notPlanned', label: 'Poza planem' },
];

const DAY_NAMES_SHORT = ['nd.', 'pon.', 'wt.', 'śr.', 'czw.', 'pt.', 'sob.'];
const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'];

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)';
const DEFAULT_HORIZON_DAYS = 7;
const PANTRY_CALENDAR_DAY_ATTR = 'data-pantry-calendar-day';
const SHORTFALL_ACCENT = '#CB4A48';
const PANTRY_CALENDAR_THEME = {
    bg: '#272622',
    border: '#34312c',
    text: '#d7d2c8',
    dimText: '#5a5752',
    dimOpacity: 0.38,
    dimmedBg: 'transparent',
    dimmedBorder: 'transparent',
    dot: '#7d7a74',
    selectedBg: '#393937',
    selectedBorder: '#787876',
    selectedText: '#f2efe8',
    selectedDot: '#f2efe8',
};

/* ── state ── */

let ingredientCard = null;
let horizonEndDate = addDays(startOfDay(new Date()), DEFAULT_HORIZON_DAYS - 1);
let isSearchExpanded = false;
let isCalendarOpen = false;
let isFilterOpen = false;
let calendarMonthAnchor = startOfMonth(horizonEndDate);
let pantryGlobalListenersBound = false;
let pantryFilters = {
    categories: [],
    sections: [],
};

/* ── date formatting ── */

function getToday() {
    return startOfDay(new Date());
}

function ensureValidHorizonDate() {
    const today = getToday();
    if (!(horizonEndDate instanceof Date) || Number.isNaN(horizonEndDate.getTime()) || horizonEndDate.getTime() < today.getTime()) {
        horizonEndDate = today;
    }
    if (!(calendarMonthAnchor instanceof Date) || Number.isNaN(calendarMonthAnchor.getTime())) {
        calendarMonthAnchor = startOfMonth(horizonEndDate);
    }
}

function getHorizonDays() {
    ensureValidHorizonDate();
    const diffMs = startOfDay(horizonEndDate).getTime() - getToday().getTime();
    return Math.max(1, Math.floor(diffMs / 86400000) + 1);
}

function formatEndDate(date) {
    return `${DAY_NAMES_SHORT[date.getDay()]} ${date.getDate()} ${MONTHS_SHORT[date.getMonth()]}`;
}

function formatHorizonLabel(date) {
    return sameDay(date, getToday()) ? 'Do dziś' : `Do ${formatEndDate(date)}`;
}

function formatRangeSummary(date) {
    return sameDay(date, getToday()) ? 'Zakres: tylko dziś' : `Zakres: dziś - ${formatEndDate(date)}`;
}

function formatDayContext(dayStrings) {
    const dayNames = dayStrings.map((ds) => {
        const d = new Date(ds + 'T00:00:00');
        return DAY_NAMES_SHORT[d.getDay()];
    });
    if (dayNames.length <= 3) return dayNames.join(', ');
    return dayNames.slice(0, 3).join(', ') + ', \u2026';
}

/* ── media helpers ── */

function photoStripMedia(image, icon, accentBg) {
    if (image) {
        return `<div class="w-[4.5rem] shrink-0 relative self-stretch">
            <img src="${esc(image)}" alt="" class="absolute inset-0 w-full h-full object-cover">
        </div>`;
    }
    return `<div class="w-[4.5rem] shrink-0 flex items-center justify-center self-stretch" style="background:#333331;">
        <i class="fas ${icon} text-[22px]" style="color:rgba(255,255,255,0.10);"></i>
    </div>`;
}

/* ══════════════════════ 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 top bar ── -->
        <div id="pantry-topbar-outer" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:#2d2e2b !important; border:none !important;">
            <div class="pointer-events-auto relative z-[1] mx-auto" style="width:min(calc(100% - 0.5rem), 22.4rem);">
                <div id="pantry-topbar" class="relative min-h-12">
                    <div id="pantry-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
                        <h1 class="flex-1 min-w-0 truncate" style="margin:0;padding:0;color:#f2efe8;font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Zapasy</h1>

                        <button type="button" id="pantry-horizon-compact" class="min-w-0 max-w-[12rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all shrink" style="background:#393937 !important; border:1px solid #41423f !important; box-shadow:${SEARCH_SHELL_SHADOW} !important;">
                            <span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:#ddd6ca;"></span>
                            <i class="fas fa-chevron-down text-[10px] shrink-0" style="color:#9b978f;"></i>
                        </button>

                        <div id="pantry-filter-wrap" class="relative shrink-0">
                            <button type="button" id="pantry-filter-toggle" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:#393937; border:1px solid #41423f; box-shadow:${SEARCH_SHELL_SHADOW}; color:#ddd6ca;">
                                <i class="fas fa-sliders-h text-[12px]"></i>
                                <span id="pantry-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:#23221e; border:1px solid #787876; color:#f2efe8;"></span>
                            </button>

                            <div id="pantry-filter-popover" class="absolute right-0 top-full mt-2 w-[19rem] max-w-[calc(100vw-2rem)] rounded-[1.35rem] px-3 py-3 transition-all duration-200 pointer-events-none" style="background:#23221e !important; border:1px solid #787876 !important; box-shadow:${SEARCH_SHELL_SHADOW} !important; opacity:0; transform:translateY(-6px) scale(0.98);">
                                <div class="flex items-center justify-between gap-3 px-0.5 pb-3">
                                    <p class="text-[11px] font-semibold leading-none" style="color:#f2efe8;">Filtry</p>
                                    <button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:#b5afa5;">
                                        Wyczyść
                                    </button>
                                </div>
                                <div id="pantry-filter-panel-body" class="space-y-4"></div>
                            </div>
                        </div>

                        <button type="button" id="pantry-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:#393937 !important; border:1px solid #41423f !important; box-shadow:${SEARCH_SHELL_SHADOW} !important; color:#ddd6ca;">
                            <i class="fas fa-search text-[13px]"></i>
                        </button>
                    </div>

                    <div id="pantry-horizon-expanded" class="absolute inset-0 transition-all duration-200 pointer-events-none" style="opacity:0; transform:translateY(-2px) scale(0.98);">
                        <div id="pantry-horizon-wrap" class="relative">
                            <button type="button" id="pantry-horizon-toggle" class="w-full h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:#23221e !important; border:1px solid #787876 !important; box-shadow:${SEARCH_SHELL_SHADOW} !important;">
                                <span id="pantry-horizon-label" class="flex-1 min-w-0 text-left text-[13px] font-normal truncate" style="color:#ddd6ca;"></span>
                                <i id="pantry-horizon-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:#9b978f;"></i>
                            </button>

                            <div id="pantry-calendar-popover" class="absolute left-0 right-0 top-full mt-2 rounded-[1.35rem] px-3 py-3 transition-all duration-200 pointer-events-none" style="background:#23221e !important; border:1px solid #787876 !important; box-shadow:${SEARCH_SHELL_SHADOW} !important; opacity:0; transform:translateY(-6px) scale(0.98);">
                                ${createCalendarTopbarHTML({
        prevId: 'pantry-cal-prev',
        todayId: 'pantry-cal-today',
        nextId: 'pantry-cal-next',
        wrapperClass: 'pb-3 flex items-center justify-end gap-3',
        controlsStyle: `background:${PANTRY_CALENDAR_THEME.bg};border-color:${PANTRY_CALENDAR_THEME.border};`,
        navButtonClass: 'shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors',
        todayButtonActiveClass: 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[#d7d2c8] active:bg-transparent whitespace-nowrap',
        todayButtonDimClass: 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2 text-[10px] font-semibold leading-none text-[#7d7a74] cursor-default',
    })}
                                ${createCalendarWeekdayHeaderHTML(undefined, {
        wrapperClass: 'grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-[#9b978f] uppercase tracking-wide mb-1 leading-none',
    })}
                                <div id="pantry-calendar-grid" class="grid grid-cols-7 gap-1.5"></div>

                                <div class="mt-3 pt-3 border-t" style="border-color:#444442;">
                                    <p id="pantry-cal-selection" class="min-w-0 text-[11px] leading-snug" style="color:#9b978f;"></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="pantry-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:#23221e !important; border:1px solid #787876 !important; box-shadow:${SEARCH_SHELL_SHADOW} !important; opacity:0; transform:translateY(-2px) scale(0.98);">
                        <i class="fas fa-search text-[13px] shrink-0" style="color:#9b978f;"></i>
                        <input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
                            class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:#ddd6ca; margin:0;">
                        <button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:#2f2f2d; border:none; color:#9b978f;">
                            <i class="fas fa-xmark text-[13px]"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── scrollable content ── -->
        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.35rem] pb-24" style="background:#2d2e2b !important;">
            <div id="pantry-board"></div>
        </div>
    </div>
    ${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
}

/* ══════════════════════ HORIZON SELECTOR ══════════════════════ */

function syncHorizonUI() {
    ensureValidHorizonDate();

    const defaultRow = document.getElementById('pantry-default-row');
    const horizonExpanded = document.getElementById('pantry-horizon-expanded');
    const searchShell = document.getElementById('pantry-search-shell');
    const popover = document.getElementById('pantry-calendar-popover');
    const filterPopover = document.getElementById('pantry-filter-popover');
    const filterToggle = document.getElementById('pantry-filter-toggle');
    const filterCount = document.getElementById('pantry-filter-count');
    const compactLabel = document.getElementById('pantry-horizon-compact-label');
    const horizonLabel = document.getElementById('pantry-horizon-label');
    const chevron = document.getElementById('pantry-horizon-chevron');
    const selectionEl = document.getElementById('pantry-cal-selection');
    const prevBtn = document.getElementById('pantry-cal-prev');
    const todayBtn = document.getElementById('pantry-cal-today');

    if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
    if (horizonLabel) horizonLabel.textContent = formatHorizonLabel(horizonEndDate);
    if (selectionEl) selectionEl.textContent = formatRangeSummary(horizonEndDate);

    const showCalendar = isCalendarOpen && !isSearchExpanded;
    const showDefault = !isSearchExpanded && !isCalendarOpen;
    const showFilter = isFilterOpen && showDefault;
    const activeFilterCount = getActivePantryFilterCount();

    if (defaultRow) {
        defaultRow.style.opacity = showDefault ? '1' : '0';
        defaultRow.style.transform = showDefault ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
        defaultRow.style.pointerEvents = showDefault ? 'auto' : 'none';
    }

    if (horizonExpanded) {
        horizonExpanded.style.opacity = showCalendar ? '1' : '0';
        horizonExpanded.style.transform = showCalendar ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
        horizonExpanded.style.pointerEvents = showCalendar ? 'auto' : 'none';
    }

    if (popover) {
        popover.style.opacity = showCalendar ? '1' : '0';
        popover.style.transform = showCalendar ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
        popover.style.pointerEvents = showCalendar ? 'auto' : 'none';
    }
    if (chevron) {
        chevron.style.transform = showCalendar ? 'rotate(180deg)' : 'rotate(0deg)';
    }

    if (filterPopover) {
        filterPopover.style.opacity = showFilter ? '1' : '0';
        filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
        filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none';
    }
    if (filterToggle) {
        const isActive = showFilter || hasActivePantryFilters();
        filterToggle.style.setProperty('background', isActive ? '#23221e' : '#393937', 'important');
        filterToggle.style.setProperty('border-color', isActive ? '#787876' : '#41423f', 'important');
        filterToggle.style.setProperty('color', isActive ? '#f2efe8' : '#ddd6ca', 'important');
    }
    if (filterCount) {
        filterCount.textContent = String(activeFilterCount);
        filterCount.classList.toggle('hidden', activeFilterCount === 0);
        filterCount.classList.toggle('flex', activeFilterCount > 0);
    }

    if (prevBtn) {
        const isCurrentMonth = sameMonth(calendarMonthAnchor, getToday());
        prevBtn.disabled = isCurrentMonth;
        prevBtn.style.opacity = isCurrentMonth ? '0.45' : '1';
        prevBtn.style.cursor = isCurrentMonth ? 'default' : 'pointer';
    }
    syncCalendarTodayButton(
        todayBtn,
        sameMonth(calendarMonthAnchor, getToday()),
        horizonEndDate,
        {
            ariaLabelGo: 'Pokaż bieżący miesiąc w kalendarzu',
            ariaLabelCurrent: 'Wyświetlany jest bieżący miesiąc',
        },
    );

    if (searchShell) {
        searchShell.style.opacity = isSearchExpanded ? '1' : '0';
        searchShell.style.transform = isSearchExpanded ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
        searchShell.style.pointerEvents = isSearchExpanded ? 'auto' : 'none';
    }

    renderCalendarPopover();
    renderFilterPopover();
}

function renderCalendarPopover() {
    const gridEl = document.getElementById('pantry-calendar-grid');
    if (!gridEl) return;

    ensureValidHorizonDate();
    const today = getToday();
    const plans = loadPlans();

    renderCalendarGrid({
        gridEl,
        mode: 'month',
        anchorDate: calendarMonthAnchor,
        selectedDate: horizonEndDate,
        resolveDayState: (day, meta) => {
            const isPast = day.getTime() < today.getTime();
            return {
                disabled: isPast,
                dimmed: isPast || !meta.inCurrentMonth,
                showIndicator: dayHasAnyMeal(plans, day),
            };
        },
        dayAttr: PANTRY_CALENDAR_DAY_ATTR,
        theme: PANTRY_CALENDAR_THEME,
    });
}

function filterChipHtml(kind, value, label, active) {
    return `<button
        type="button"
        class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors"
        style="${filterChipStyle(active)}"
        data-pantry-filter-kind="${esc(kind)}"
        data-pantry-filter-value="${esc(value)}"
    >${esc(label)}</button>`;
}

function renderFilterPopover() {
    const body = document.getElementById('pantry-filter-panel-body');
    if (!body) return;

    const categoryChips = CATEGORY_ORDER
        .map((category) => filterChipHtml(
            'category',
            category,
            CATEGORY_LABELS[category] || category,
            pantryFilters.categories.includes(category),
        ))
        .join('');

    const sectionChips = PANTRY_SECTION_FILTERS
        .map((item) => filterChipHtml(
            'section',
            item.id,
            item.label,
            pantryFilters.sections.includes(item.id),
        ))
        .join('');

    body.innerHTML = `
        <section>
            <p class="text-[10px] font-bold uppercase tracking-wider mb-3 px-0.5" style="color:#b5afa5;">Kategorie</p>
            <div class="flex flex-wrap gap-2">${categoryChips}</div>
        </section>
        <section>
            <p class="text-[10px] font-bold uppercase tracking-wider mb-3 px-0.5" style="color:#b5afa5;">Sekcje</p>
            <div class="flex flex-wrap gap-2">${sectionChips}</div>
        </section>
    `;
}

function closeSearch() {
    const input = document.getElementById('pantry-search');
    const hadQuery = Boolean(input?.value);
    if (input) {
        input.value = '';
        input.blur();
    }
    isSearchExpanded = false;
    syncHorizonUI();
    if (hadQuery) renderBoard();
}

function openSearch() {
    isSearchExpanded = true;
    isCalendarOpen = false;
    isFilterOpen = false;
    syncHorizonUI();
    window.requestAnimationFrame(() => {
        document.getElementById('pantry-search')?.focus();
    });
}

function closeCalendar() {
    if (!isCalendarOpen) return;
    isCalendarOpen = false;
    syncHorizonUI();
}

function openCalendar() {
    ensureValidHorizonDate();
    calendarMonthAnchor = startOfMonth(horizonEndDate);
    isSearchExpanded = false;
    isFilterOpen = false;
    isCalendarOpen = true;
    syncHorizonUI();
}

function closeFilter() {
    if (!isFilterOpen) return;
    isFilterOpen = false;
    syncHorizonUI();
}

function toggleFilterPanel() {
    isCalendarOpen = false;
    isSearchExpanded = false;
    isFilterOpen = !isFilterOpen;
    syncHorizonUI();
}

function selectHorizonDate(date) {
    const next = startOfDay(date);
    if (next.getTime() < getToday().getTime()) return;
    horizonEndDate = next;
    calendarMonthAnchor = startOfMonth(next);
    isCalendarOpen = false;
    syncHorizonUI();
    renderBoard();
}

/* ══════════════════════ DATA CLASSIFICATION ══════════════════════ */

/**
 * Classify all ingredients into 3 groups based on plan needs and pantry stock.
 */
function classifyIngredients(searchQuery) {
    const plans = loadPlans();
    const pantry = loadPantry();
    const today = getToday();
    const needs = aggregateRangeIngredientNeed(plans, today, getHorizonDays());

    const q = normalizeSearch(searchQuery);
    const matchesSearch = (name, category) => {
        if (!q) return true;
        return name.toLowerCase().includes(q) || (CATEGORY_LABELS[category] || '').toLowerCase().includes(q);
    };
    const matchesCategory = (category) => pantryFilters.categories.length === 0 || pantryFilters.categories.includes(category);
    const matchesSection = (section) => pantryFilters.sections.length === 0 || pantryFilters.sections.includes(section);

    const neededIds = new Set();
    const shortfalls = [];
    const sufficient = [];

    for (const need of needs) {
        neededIds.add(need.ingredientId);
        if (!matchesSearch(need.name, need.category) || !matchesCategory(need.category)) continue;

        const have = getPantryTotal(need.ingredientId, pantry);
        const def = INGREDIENTS[need.ingredientId];
        const icon = CATEGORY_ICONS[def?.category] || 'fa-jar';
        const item = {
            ingredientId: need.ingredientId,
            name: need.name,
            category: need.category,
            needed: need.amount,
            unit: need.unit,
            pantryQty: have,
            days: need.days,
            image: def?.image || null,
            icon,
        };

        if (have < need.amount) {
            if (!matchesSection('shortfalls')) continue;
            shortfalls.push({
                ...item,
                shortfall: Math.round((need.amount - have) * 10) / 10,
                fillPct: need.amount > 0 ? Math.min(100, Math.round((have / need.amount) * 100)) : 0,
            });
        } else {
            if (!matchesSection('sufficient')) continue;
            sufficient.push({
                ...item,
                fillPct: 100,
            });
        }
    }

    // "Poza planem": all ingredients NOT in any plan need
    const notPlanned = Object.keys(INGREDIENTS)
        .filter((id) => !neededIds.has(id))
        .filter(() => matchesSection('notPlanned'))
        .filter((id) => matchesSearch(INGREDIENTS[id].name, INGREDIENTS[id].category))
        .filter((id) => matchesCategory(INGREDIENTS[id].category))
        .map((id) => {
            const def = INGREDIENTS[id];
            return {
                ingredientId: id,
                name: def.name,
                qty: getPantryTotal(id, pantry),
                unit: def.pantryUnit,
                icon: CATEGORY_ICONS[def.category] || 'fa-jar',
            };
        })
        .sort((a, b) => a.name.length - b.name.length);

    return { shortfalls, sufficient, notPlanned };
}

/* ══════════════════════ TILE RENDERING ══════════════════════ */

function shortfallTileHtml(item) {
    const clamp = item.name.length > 25 ? ' min-w-0' : '';
    return `
    <button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 6rem; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
        <div class="flex items-center gap-1.5 min-w-0">
            <div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style="background:#2f2f2d;">
                <i class="fas ${item.icon} text-[11px]" style="color:${SHORTFALL_ACCENT};"></i>
            </div>
            <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p>
        </div>
        <div class="w-full flex items-center gap-2">
            <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:#2a2a28;">
                <div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div>
            </div>
            <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:#ddd6ca;">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:#9b978f;">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
        </div>
    </button>`;
}

function sufficientTileHtml(item) {
    const clamp = item.name.length > 25 ? ' min-w-0' : '';
    return `
    <button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 6rem; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
        <div class="flex items-center gap-1.5 min-w-0">
            <div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style="background:#2f2f2d;">
                <i class="fas ${item.icon} text-[11px]" style="color:#6ee7b7;"></i>
            </div>
            <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p>
        </div>
        <div class="w-full flex items-center gap-2">
            <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:#2a2a28;">
                <div class="h-full rounded-full" style="width:100%; background:#6ee7b7;"></div>
            </div>
            <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:#9b978f;">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
        </div>
    </button>`;
}

function notPlannedChipHtml(item) {
    const hasStock = item.qty > 0;
    const clamp = item.name.length > 25 ? ' min-w-0' : '';
    return `
    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 6rem; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
        <div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style="background:#2f2f2d;">
            <i class="fas ${item.icon} text-[11px]" style="color:#7d7a74;"></i>
        </div>
        <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:${hasStock ? '#b7ada1' : '#9b978f'};">${esc(item.name)}</p>
        <span class="text-[10px] font-semibold tabular-nums shrink-0 ml-auto" style="color:${hasStock ? '#9b978f' : '#6d6c67'};">${esc(formatQty(item.qty))} ${esc(unitLabel(item.unit))}</span>
    </button>`;
}

/* ══════════════════════ SECTION RENDERING ══════════════════════ */

function sectionHeaderHtml(icon, iconBg, iconColor, title, titleColor, count) {
    return `
    <div class="flex items-center gap-2 mb-2.5 px-0.5">
        <span class="text-[10px] font-bold uppercase tracking-wider" style="color:${titleColor};">${esc(title)}</span>
        <span class="text-[10px]" style="color:#6d6c67;">${count}</span>
    </div>`;
}

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

    const q = document.getElementById('pantry-search')?.value || '';
    const hasFilters = hasActivePantryFilters();
    const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);

    const totalVisible = shortfalls.length + sufficient.length + notPlanned.length;
    if (totalVisible === 0 && (q || hasFilters)) {
        root.innerHTML = `<p class="text-sm text-center py-10" style="color:#9b978f;">Brak wyników — zmień filtry lub wyszukiwanie.</p>`;
        return;
    }

    let html = '';

    // Section 1: Potrzebne (shortfalls)
    if (shortfalls.length > 0) {
        html += `<section class="mb-5">`;
        html += sectionHeaderHtml('fa-exclamation', '#2f2f2d', SHORTFALL_ACCENT, 'Potrzebne', '#7B756D', shortfalls.length);
        html += `<div class="flex flex-wrap gap-2">`;
        html += shortfalls.sort((a, b) => a.name.length - b.name.length).map(shortfallTileHtml).join('');
        html += `</div></section>`;
    }

    // Section 2: W spiżarni (sufficient)
    if (sufficient.length > 0) {
        html += `<section class="mb-5">`;
        html += sectionHeaderHtml('fa-check', '#1a2e22', '#6ee7b7', 'W spiżarni', '#7B756D', sufficient.length);
        html += `<div class="flex flex-wrap gap-2">`;
        html += sufficient.sort((a, b) => a.name.length - b.name.length).map(sufficientTileHtml).join('');
        html += `</div></section>`;
    }

    // Section 3: Poza planem
    if (notPlanned.length > 0) {
        html += `<section class="mb-5">`;
        html += sectionHeaderHtml('fa-minus', '#2a2a28', '#6d6c67', 'Poza planem', '#7B756D', notPlanned.length);
        html += `<div class="flex flex-wrap gap-2">`;
        html += notPlanned.map(notPlannedChipHtml).join('');
        html += `</div></section>`;
    }

    // Empty state: no plans at all
    if (shortfalls.length === 0 && sufficient.length === 0 && !q && !hasFilters) {
        html = `
        <div class="flex flex-col items-center justify-center py-10 text-center mb-6">
            <div class="w-12 h-12 rounded-2xl flex items-center justify-center mb-3" style="background:#393937;">
                <i class="fas fa-calendar-xmark text-lg" style="color:#6d6c67;"></i>
            </div>
            <p class="text-[13px] font-semibold mb-1" style="color:#ddd6ca;">Brak zaplanowanych posiłków</p>
            <p class="text-[11px] max-w-[16rem]" style="color:#9b978f;">Zaplanuj posiłki, a spiżarnia pokaże czego potrzebujesz i co masz na stanie.</p>
        </div>` + html;
    }

    root.innerHTML = html;

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

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

function openIngredientCard(ingredientId, productId) {
    ingredientCard?.open({
        ingredientId,
        productId,
        sourceNote: 'Ze spiżarni',
        onAfterChange: () => renderBoard(),
    });
}

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

export function refreshPantry() {
    syncHorizonUI();
    renderBoard();
    ingredientCard?.refresh();
}

export function setupPantry() {
    if (!ingredientCard) {
        ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
        ingredientCard.bind();
    }

    syncHorizonUI();
    renderBoard();

    // Scroll shadow under top bar
    const pantryScroll = document.getElementById('pantry-scroll');
    const topbarOuter = document.getElementById('pantry-topbar-outer');
    if (pantryScroll && topbarOuter) {
        const shadow = document.createElement('div');
        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(0,0,0,0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
        topbarOuter.appendChild(shadow);
        pantryScroll.addEventListener('scroll', () => {
            shadow.style.opacity = pantryScroll.scrollTop > 2 ? '1' : '0';
        });
    }

    // Search
    document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
    document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') closeSearch();
    });
    document.getElementById('pantry-search-toggle')?.addEventListener('click', () => openSearch());
    document.getElementById('pantry-search-close')?.addEventListener('click', () => closeSearch());
    document.getElementById('pantry-filter-toggle')?.addEventListener('click', () => toggleFilterPanel());
    document.getElementById('pantry-filter-clear')?.addEventListener('click', () => {
        pantryFilters = { categories: [], sections: [] };
        syncHorizonUI();
        renderBoard();
    });
    document.getElementById('pantry-filter-panel-body')?.addEventListener('click', (event) => {
        const target = event.target;
        if (!(target instanceof Element)) return;

        const chip = target.closest('[data-pantry-filter-kind]');
        if (!(chip instanceof Element)) return;

        const kind = chip.getAttribute('data-pantry-filter-kind');
        const value = chip.getAttribute('data-pantry-filter-value');
        if (!kind || !value) return;

        if (kind === 'category') {
            pantryFilters = {
                ...pantryFilters,
                categories: toggleStringFilter(pantryFilters.categories, value),
            };
        }
        if (kind === 'section') {
            pantryFilters = {
                ...pantryFilters,
                sections: toggleStringFilter(pantryFilters.sections, value),
            };
        }

        syncHorizonUI();
        renderBoard();
    });

    // Horizon pill + calendar
    document.getElementById('pantry-horizon-compact')?.addEventListener('click', (event) => {
        event.stopPropagation();
        openCalendar();
    });
    document.getElementById('pantry-horizon-toggle')?.addEventListener('click', () => {
        if (isCalendarOpen) {
            closeCalendar();
            return;
        }
        openCalendar();
    });
    document.getElementById('pantry-cal-prev')?.addEventListener('click', () => {
        const prevMonth = addMonths(calendarMonthAnchor, -1);
        if (prevMonth.getTime() < startOfMonth(getToday()).getTime()) return;
        calendarMonthAnchor = prevMonth;
        syncHorizonUI();
    });
    document.getElementById('pantry-cal-next')?.addEventListener('click', () => {
        calendarMonthAnchor = addMonths(calendarMonthAnchor, 1);
        syncHorizonUI();
    });
    document.getElementById('pantry-cal-today')?.addEventListener('click', () => {
        calendarMonthAnchor = startOfMonth(getToday());
        syncHorizonUI();
    });
    bindCalendarDayClicks(document.getElementById('pantry-calendar-grid'), (date) => {
        selectHorizonDate(date);
    }, PANTRY_CALENDAR_DAY_ATTR);

    if (!pantryGlobalListenersBound) {
        pantryGlobalListenersBound = true;
        document.addEventListener('click', (event) => {
            const target = event.target;
            if (!(target instanceof Element)) return;
            if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
                closeCalendar();
            }
            if (isFilterOpen && !target.closest('#pantry-filter-wrap')) {
                closeFilter();
            }
        });
    }

    window.refreshPantry = refreshPantry;
}
