{% extends "base.html" %}

{% block title %}Shopping List{% endblock %}

{% block subheader %}
<div class="border-bottom bg-white" style="height: 60px;" id="shopSubheader">
    <div class="container-fluid h-100 px-0">
        <div class="row h-100 g-0 align-items-center">
            <div class="col d-flex align-items-center ps-3">
                <a href="{{ url_for('meal_planner') }}" class="btn btn-sm btn-outline-secondary me-2" title="Meal Planner">
                    <i class="fas fa-calendar-alt"></i>
                </a>
                <span class="fw-bold text-dark">
                    <i class="fas fa-shopping-cart text-success me-1"></i>Shopping
                </span>
                {% if total_count > 0 %}
                <span class="badge bg-success bg-opacity-10 text-success ms-2" id="headerBadge">
                    <span id="headerChecked">{{ checked_count }}</span>/<span id="headerTotal">{{ total_count }}</span>
                </span>
                {% endif %}
            </div>
            <div class="col-auto d-flex gap-2 pe-3">
                {% if total_count > 0 %}
                <button class="btn btn-sm btn-outline-dark" onclick="toggleStoreMode()" id="btnStoreModeHeader" title="Store Mode">
                    <i class="fas fa-store"></i><span class="d-none d-md-inline ms-1">Shop</span>
                </button>
                {% endif %}
                <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        {% if total_count > 0 %}
                        <li><a class="dropdown-item" href="#" onclick="copyList(); return false;"><i class="fas fa-copy me-2 text-muted"></i>Copy List</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#" onclick="uncheckAll(); return false;"><i class="fas fa-undo me-2 text-muted"></i>Uncheck All</a></li>
                        <li><a class="dropdown-item text-danger" href="#" onclick="showConfirm('Clear Everything','Remove all items from your shopping list?','Clear All','btn-danger',clearAll); return false;"><i class="fas fa-trash me-2"></i>Clear All</a></li>
                        <li><hr class="dropdown-divider"></li>
                        {% endif %}
                        <li><a class="dropdown-item" href="#" onclick="openGenerateModal(); return false;"><i class="fas fa-magic me-2 text-muted"></i>Generate from Plan</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css">

{% set pct = ((checked_count / total_count * 100)|round(0)|int) if total_count > 0 else 0 %}

<div id="shopWrapper" style="max-width:56rem;margin:0 auto;padding:1rem;">

    <!-- STORE MODE TOP BAR -->
    <div class="store-top-bar" id="storeTopBar">
        <div class="d-flex align-items-center gap-3">
            <div class="store-progress-ring">
                <svg viewBox="0 0 36 36" width="52" height="52">
                    <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#e5e7eb" stroke-width="3"/>
                    <path id="storeRingFill" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round" stroke-dasharray="{{ pct }}, 100" style="transition:stroke-dasharray .4s ease;"/>
                </svg>
                <div class="store-progress-text" id="storeRingPct">{{ pct }}%</div>
            </div>
            <div>
                <div class="fw-bold text-dark" style="font-size:.95rem;">Shopping</div>
                <div class="store-remaining" id="storeRemaining">{{ total_count - checked_count }} item{{ 's' if (total_count - checked_count) != 1 else '' }} left</div>
            </div>
        </div>
        <button class="btn btn-sm btn-outline-dark" onclick="toggleStoreMode()"><i class="fas fa-times me-1"></i>Exit</button>
    </div>

    <!-- COMPLETION STATE -->
    <div class="complete-state {% if total_count > 0 and checked_count == total_count %}show{% endif %}" id="completeState">
        <div class="complete-icon">🎉</div>
        <h5>All Done!</h5>
        <p>You've checked off everything. Nice shopping!</p>
        <div class="d-flex gap-2 justify-content-center flex-wrap mt-3">
            <button class="btn btn-success btn-sm" onclick="addCheckedToPantry()"><i class="fas fa-box-open me-1"></i>Add All to Pantry</button>
            <button class="btn btn-outline-secondary btn-sm" onclick="showConfirm('Clear List','Remove all checked items?','Clear','btn-warning',clearChecked)"><i class="fas fa-broom me-1"></i>Clear Checked</button>
        </div>
    </div>

    <!-- ADD BAR -->
    <div class="hide-in-store" id="addBarSection">
        <div class="add-bar">
            <div class="add-search">
                <select id="addItemSelect" placeholder="Search ingredients or type a custom item…"></select>
            </div>
            <div class="add-qty">
                <input type="text" class="form-control" id="addQtyInput" placeholder="Qty" autocomplete="off"
                       onkeydown="if(event.key==='Enter'){addSelectedItem();event.preventDefault();}">
            </div>
            <div class="add-unit-col">
                <select class="form-select" id="addUnitSelect">
                    <option value="">—</option>
                    {% for u in units %}
                    <option value="{{ u.abbreviation }}">{{ u.abbreviation }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="add-btn-col">
                <button class="btn btn-success" onclick="addSelectedItem()" id="addBtn" style="white-space:nowrap;height:38px;">
                    <i class="fas fa-plus me-1"></i>Add
                </button>
            </div>
        </div>

        <!-- MODIFIER PANEL (populated via AJAX) -->
        <div id="modifierPanel" class="modifier-panel" style="display:none;"></div>
    </div>

    {% if grouped_items %}

    <!-- PROGRESS -->
    <div class="progress-section hide-in-store" id="progressSection">
        <div class="progress-ring-wrap">
            <svg viewBox="0 0 36 36" width="72" height="72">
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#bbf7d0" stroke-width="3"/>
                <path id="progressRingFill" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round" stroke-dasharray="{{ pct }}, 100" style="transition:stroke-dasharray .4s ease;"/>
            </svg>
            <div class="progress-ring-text" id="ringPctText">{{ pct }}%</div>
        </div>
        <div class="progress-info">
            <h6><span id="statChecked">{{ checked_count }}</span> of <span id="statTotal">{{ total_count }}</span> items</h6>
            <p id="progressMsg">{% if pct == 0 %}Ready to shop!{% elif pct < 25 %}Just getting started…{% elif pct < 50 %}Making progress!{% elif pct < 75 %}More than halfway there!{% elif pct < 100 %}Almost done!{% else %}All done! 🎉{% endif %}</p>
        </div>
    </div>

    <!-- MEAL TYPE TABS -->
    <div class="hide-in-store mb-2" id="mealTabsSection">
        <div class="d-flex gap-1" id="mealTypeTabs">
            <button class="btn btn-sm btn-success meal-tab active" data-meal="all" onclick="filterMealTab(this,'all')">All</button>
            <button class="btn btn-sm btn-outline-success meal-tab" data-meal="breakfast" onclick="filterMealTab(this,'breakfast')">Breakfast</button>
            <button class="btn btn-sm btn-outline-success meal-tab" data-meal="lunch" onclick="filterMealTab(this,'lunch')">Lunch</button>
            <button class="btn btn-sm btn-outline-success meal-tab" data-meal="dinner" onclick="filterMealTab(this,'dinner')">Dinner</button>
        </div>
    </div>

    <!-- SEARCH & FILTER -->
    <div class="hide-in-store mb-3">
        <div class="position-relative mb-2">
            <i class="fas fa-search position-absolute text-muted" style="left:.75rem;top:50%;transform:translateY(-50%);font-size:.8rem;"></i>
            <input type="text" class="form-control form-control-sm" id="searchInput" placeholder="Filter items…" autocomplete="off" style="padding-left:2.25rem;padding-right:2.25rem;" oninput="searchItems(this.value)">
            <button class="btn btn-sm position-absolute text-muted px-2" id="searchClear" style="right:.15rem;top:50%;transform:translateY(-50%);display:none;" onclick="document.getElementById('searchInput').value='';searchItems('');"><i class="fas fa-times"></i></button>
        </div>
        <div class="filter-pills" id="filterPills">
            <button class="filter-pill active" onclick="filterDept(this,'all')">All</button>
            {% for dept in grouped_items.keys() %}
            <button class="filter-pill" onclick="filterDept(this,'{{ dept }}')">{{ dept_emojis.get(dept,'📦') }} {{ dept }}</button>
            {% endfor %}
        </div>
    </div>

    <!-- DEPARTMENT CARDS -->
    <div id="itemsContainer">
        {% for dept, items in grouped_items.items() %}
        {% set dept_checked = items|selectattr('checked')|list|length %}
        {% set dept_meals = items|map(attribute='meal_type')|select|unique|list %}
        {% set has_manual = items|selectattr('meal_type', 'none')|list|length > 0 or items|selectattr('meal_type', 'equalto', None)|list|length > 0 %}
        <div class="dept-card" data-dept="{{ dept }}" data-meals="{{ dept_meals|join(' ') }}" {% if has_manual %}data-has-manual="true"{% endif %}>
            <button class="dept-toggle" type="button" onclick="toggleDeptCollapse(this)" aria-expanded="true">
                <span class="dept-emoji">{{ dept_emojis.get(dept,'📦') }}</span>
                <span class="dept-name">{{ dept }}</span>
                <span class="dept-badge {% if dept_checked == items|length and items|length > 0 %}all-done{% endif %}" data-dept-badge="{{ dept }}">{{ dept_checked }}/{{ items|length }}</span>
                <i class="fas fa-chevron-down chevron"></i>
            </button>
            <div class="dept-body">
                <div class="dept-items">
                    {% for it in items %}
                    <div class="shop-item {% if it.checked %}is-checked{% endif %}" id="row-{{ it.id }}" data-id="{{ it.id }}" data-checked="{{ 'true' if it.checked else 'false' }}" data-dept="{{ dept }}" data-name="{{ it.name|lower }}" data-meal="{{ it.meal_type or 'manual' }}">
                        <button class="check-btn {% if it.checked %}checked{% endif %}" onclick="toggleItem({{ it.id }})" aria-label="Toggle"><i class="fas fa-check"></i></button>
                        {% if '(hierarchy match)' in it.name %}
                        <span class="item-name">{{ it.name.replace(' (hierarchy match)', '') }}</span>
                        <span class="badge bg-warning text-dark ms-1" style="font-size:.6rem" title="Pantry match via ingredient hierarchy — close enough?">~ match</span>
                        {% else %}
                        <span class="item-name">{{ it.name }}</span>
                        {% endif %}
                        <button class="del-btn" onclick="deleteItem({{ it.id }})" aria-label="Delete"><i class="fas fa-trash-alt"></i></button>
                    </div>
                    {% endfor %}
                </div>
                <div class="dept-mini-progress">
                    <div class="dept-mini-progress-fill" data-dept-progress="{{ dept }}" style="width:{{ (dept_checked / items|length * 100)|round(1) if items|length > 0 else 0 }}%;"></div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- BOTTOM ACTIONS -->
    <div class="bottom-actions" id="bottomActions">
        <button class="btn btn-success btn-sm" onclick="addCheckedToPantry()" id="btnPantry" {% if checked_count == 0 %}style="display:none"{% endif %}><i class="fas fa-box-open me-1"></i>Add Checked to Pantry</button>
        <button class="btn btn-warning btn-sm text-white" id="btnClearChecked" onclick="showConfirm('Clear Checked','Remove all checked items from the list?','Clear Checked','btn-warning',clearChecked)" {% if checked_count == 0 %}style="display:none"{% endif %}><i class="fas fa-broom me-1"></i>Clear Checked</button>
        <button class="btn btn-outline-secondary btn-sm hide-in-store" onclick="showConfirm('Clear Everything','Remove all items from your shopping list?','Clear All','btn-danger',clearAll)"><i class="fas fa-trash me-1"></i>Clear All</button>
    </div>

    {% else %}

    <!-- EMPTY STATE -->
    <div class="empty-state" id="emptyState">
        <div class="empty-icon">🛒</div>
        <h4>Your list is empty</h4>
        <p>Search from hundreds of ingredients above, type a custom item, or generate a full list from your meal plan.</p>
        <button class="btn btn-success" onclick="openGenerateModal()"><i class="fas fa-magic me-1"></i>Generate from Meal Plan</button>
    </div>

    {% endif %}
</div>

<!-- GENERATE MODAL -->
<div class="modal fade" id="generateModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold"><i class="fas fa-cart-plus text-success me-2"></i>Generate Shopping List</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">

                <!-- SCOPE SELECTOR -->
                <p class="text-muted small mb-2">What are you shopping for?</p>
                <div class="btn-group w-100 mb-3" role="group" id="scopeBtnGroup">
                    <button type="button" class="btn btn-success btn-sm scope-btn" data-scope="meal" onclick="setScope('meal')">This Meal</button>
                    <button type="button" class="btn btn-outline-success btn-sm scope-btn" data-scope="today" onclick="setScope('today')">Today</button>
                    <button type="button" class="btn btn-outline-success btn-sm scope-btn" data-scope="week" onclick="setScope('week')">This Week</button>
                    <button type="button" class="btn btn-outline-success btn-sm scope-btn" data-scope="range" onclick="setScope('range')">Custom Range</button>
                </div>

                <!-- MEAL SCOPE OPTIONS -->
                <div id="scopeMealOpts" class="mb-3">
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label small fw-semibold mb-1">Meal</label>
                            <select class="form-select form-select-sm" id="genMealType">
                                <option value="breakfast">Breakfast</option>
                                <option value="lunch">Lunch</option>
                                <option value="dinner" selected>Dinner</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label small fw-semibold mb-1">Date</label>
                            <input type="date" class="form-control form-control-sm" id="genMealDate" value="{{ today.strftime('%Y-%m-%d') }}">
                        </div>
                    </div>
                </div>

                <!-- TODAY SCOPE INFO -->
                <div id="scopeTodayOpts" class="mb-3" style="display:none">
                    <div class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2 w-100 text-start" style="font-size:.82rem">
                        <i class="fas fa-calendar-day me-1"></i>
                        All meals planned for today — {{ today.strftime('%A, %b %d') }}
                    </div>
                </div>

                <!-- WEEK SCOPE INFO -->
                <div id="scopeWeekOpts" class="mb-3" style="display:none">
                    <div class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2 w-100 text-start" style="font-size:.82rem">
                        <i class="fas fa-calendar-week me-1"></i>
                        Week of {{ current_week_start.strftime('%b %d, %Y') }}
                        &mdash; {{ available_weeks|length }} meal{{ 's' if available_weeks|length != 1 else '' }} planned
                    </div>
                </div>

                <!-- RANGE SCOPE OPTIONS -->
                <div id="scopeRangeOpts" class="mb-3" style="display:none">
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label small fw-semibold mb-1">From</label>
                            <input type="date" class="form-control form-control-sm" id="genDateFrom" value="{{ today.strftime('%Y-%m-%d') }}">
                        </div>
                        <div class="col-6">
                            <label class="form-label small fw-semibold mb-1">To</label>
                            <input type="date" class="form-control form-control-sm" id="genDateTo" value="{{ (today + timedelta(days=6)).strftime('%Y-%m-%d') }}">
                        </div>
                    </div>
                </div>

                <!-- PANTRY TOGGLE -->
                <div class="d-flex align-items-center gap-3 mb-3 p-2 bg-light rounded-3">
                    <i class="fas fa-carrot text-success"></i>
                    <div class="flex-grow-1">
                        <div class="small fw-semibold">Subtract pantry items</div>
                        <div class="text-muted" style="font-size:.72rem">Only show what you still need to buy</div>
                    </div>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" id="genSubtractPantry" checked>
                    </div>
                </div>

                {% if grouped_items %}
                <div class="alert alert-warning small py-2 px-3 mb-3">
                    <i class="fas fa-exclamation-triangle me-1"></i>This will <strong>replace</strong> your current list.
                </div>
                {% endif %}

                <button class="btn btn-success w-100 fw-bold" id="genBtn" onclick="generateFromPlan()">
                    <i class="fas fa-cart-plus me-1"></i>Generate List
                </button>
            </div>
        </div>
    </div>
</div>

<!-- CONFIRM MODAL -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <div style="font-size:2.5rem;margin-bottom:.5rem;">⚠️</div>
                <h6 class="fw-bold" id="confirmTitle">Are you sure?</h6>
                <p class="text-muted small mb-3" id="confirmText"></p>
                <div class="d-flex gap-2 justify-content-center">
                    <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-sm" id="confirmActionBtn">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

<script>
var INGREDIENTS = {{ ingredient_json | tojson }};
var DEPT_EMOJIS = {{ dept_emojis | tojson }};

var _modifierGroups = [];
var _selectedModifiers = {};
var _currentIngredientId = null;
var _modFetchAbort = null;

var _ts = null;

(function initTomSelect() {
    var el = document.getElementById('addItemSelect');
    if (!el || typeof TomSelect === 'undefined') return;

    var deptMap = {};
    INGREDIENTS.forEach(function(item) {
        if (!deptMap[item.dept]) deptMap[item.dept] = true;
    });
    var optgroups = Object.keys(deptMap).sort().map(function(d) {
        return { value: d, label: (DEPT_EMOJIS[d] || '📦') + '  ' + d };
    });
    optgroups.push({ value: 'Custom', label: '📝  Custom / Household' });

    var options = INGREDIENTS.map(function(item) {
        return { id: String(item.id), name: item.name, dept: item.dept };
    });

    _ts = new TomSelect(el, {
        options: options,
        optgroups: optgroups,
        optgroupField: 'dept',
        labelField: 'name',
        valueField: 'id',
        searchField: ['name'],
        sortField: [{ field: 'name', direction: 'asc' }],
        maxItems: 1,
        maxOptions: 80,
        closeAfterSelect: true,
        selectOnTab: true,
        openOnFocus: true,
        create: function(input, callback) {
            callback({
                id: 'custom:' + input.trim(),
                name: input.trim(),
                dept: 'Custom'
            });
        },
        render: {
            option: function(data, escape) {
                var badge = '';
                if (data.dept && data.dept !== 'Custom') {
                    badge = '<span class="ts-opt-dept">' + escape(data.dept) + '</span>';
                }
                return '<div>' + escape(data.name) + badge + '</div>';
            },
            item: function(data, escape) {
                return '<div>' + escape(data.name) + '</div>';
            },
            optgroup_header: function(data, escape) {
                return '<div class="optgroup-header">' + escape(data.label) + '</div>';
            },
            option_create: function(data, escape) {
                return '<div class="create">Add <strong>' + escape(data.input) + '</strong> as custom item…</div>';
            },
            no_results: function() {
                return '<div class="no-results">Type to add a custom item</div>';
            }
        },
        onItemAdd: function(value) {
            _fetchModifiers(value);
        },
        onItemRemove: function() {
            _hideModifiers();
        },
        onChange: function(value) {
            if (!value) _hideModifiers();
        }
    });
})();

function _fetchModifiers(tsValue) {
    _hideModifiers();
    if (!tsValue) return;
    var isCustom = tsValue.toString().indexOf('custom:') === 0;
    if (isCustom) {
        _currentIngredientId = null;
        setTimeout(function() {
            var q = document.getElementById('addQtyInput');
            if (q) q.focus();
        }, 50);
        return;
    }
    var ingId = parseInt(tsValue, 10);
    if (!ingId) return;
    _currentIngredientId = ingId;
    if (_modFetchAbort) {
        try { _modFetchAbort.abort(); } catch(e) {}
    }
    _modFetchAbort = new AbortController();
    fetch('/api/ingredient/' + ingId + '/modifiers', {
        signal: _modFetchAbort.signal
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (d.success && d.groups && d.groups.length > 0) {
            _modifierGroups = d.groups;
            _renderModifierPanel(d.groups);
        } else {
            setTimeout(function() {
                var q = document.getElementById('addQtyInput');
                if (q) q.focus();
            }, 50);
        }
    })
    .catch(function(err) {
        if (err.name !== 'AbortError') {
            console.warn('Modifier fetch error:', err);
        }
    });
}

function _renderModifierPanel(groups) {
    var panel = document.getElementById('modifierPanel');
    if (!panel) return;
    _selectedModifiers = {};
    var html = '';
    var hasDefaults = false;
    groups.forEach(function(group) {
        html += '<div class="mod-group" data-group-key="' + group.key + '" '
              + 'data-mode="' + (group.selection_mode || 'multi') + '" '
              + 'data-max="' + (group.max_selections || 5) + '">';
        html += '<div class="mod-group-label">' + _escHtml(group.display_name) + '</div>';
        html += '<div class="mod-pills">';
        group.modifiers.forEach(function(mod) {
            var cls = 'mod-pill';
            if (mod.is_default) {
                cls += ' is-default selected';
                _selectedModifiers[mod.id] = {
                    id: mod.id,
                    name: mod.name,
                    category: group.key
                };
                hasDefaults = true;
            }
            html += '<button type="button" class="' + cls + '" '
                  + 'data-mod-id="' + mod.id + '" '
                  + 'data-mod-name="' + _escHtml(mod.name) + '" '
                  + 'data-mod-cat="' + _escHtml(group.key) + '" '
                  + 'onclick="_toggleModPill(this)">'
                  + _escHtml(mod.name)
                  + '</button>';
        });
        html += '</div></div>';
    });
    if (hasDefaults) {
        html += '<div class="mod-panel-hint">Defaults pre-selected — click to change</div>';
    } else {
        html += '<div class="mod-panel-hint">Optional — select modifiers to be more specific</div>';
    }
    panel.innerHTML = html;
    panel.style.display = '';
    setTimeout(function() {
        var q = document.getElementById('addQtyInput');
        if (q) q.focus();
    }, 100);
}

function _toggleModPill(btn) {
    var modId = parseInt(btn.dataset.modId, 10);
    var modName = btn.dataset.modName;
    var modCat = btn.dataset.modCat;
    var group = btn.closest('.mod-group');
    var mode = group ? group.dataset.mode : 'multi';
    var maxSel = parseInt(group ? group.dataset.max : '5', 10) || 5;
    if (btn.classList.contains('selected')) {
        btn.classList.remove('selected');
        delete _selectedModifiers[modId];
    } else {
        if (mode === 'single') {
            var siblings = group.querySelectorAll('.mod-pill.selected');
            siblings.forEach(function(sib) {
                sib.classList.remove('selected');
                delete _selectedModifiers[parseInt(sib.dataset.modId, 10)];
            });
        } else {
            var count = group.querySelectorAll('.mod-pill.selected').length;
            if (count >= maxSel) {
                toast('Max ' + maxSel + ' selections for this group', 'info');
                return;
            }
        }
        btn.classList.add('selected');
        _selectedModifiers[modId] = {
            id: modId,
            name: modName,
            category: modCat
        };
    }
}

function _hideModifiers() {
    var panel = document.getElementById('modifierPanel');
    if (panel) {
        panel.style.display = 'none';
        panel.innerHTML = '';
    }
    _modifierGroups = [];
    _selectedModifiers = {};
    _currentIngredientId = null;
}

function _escHtml(str) {
    var d = document.createElement('div');
    d.textContent = str || '';
    return d.innerHTML;
}

function addSelectedItem() {
    if (!_ts) return;
    var val = _ts.getValue();
    if (!val) { toast('Select or type an item first', 'info'); return; }
    var isCustom = val.toString().indexOf('custom:') === 0;
    var ingredientId = null;
    var name = '';
    if (isCustom) {
        name = val.substring(7);
    } else {
        ingredientId = parseInt(val, 10);
        var opt = _ts.options[val];
        name = opt ? opt.name : '';
    }
    if (!name) return;
    var qty = (document.getElementById('addQtyInput').value || '').trim();
    var unit = document.getElementById('addUnitSelect').value || '';
    var modifierIds = Object.keys(_selectedModifiers).map(function(k) {
        return parseInt(k, 10);
    });
    var btn = document.getElementById('addBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>';
    fetch('/shopping-list/add-manual', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            name: name,
            ingredient_id: ingredientId,
            quantity: qty,
            unit: unit,
            modifier_ids: modifierIds
        })
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-plus me-1"></i>Add';
        if (d.success) {
            _ts.clear(true);
            document.getElementById('addQtyInput').value = '';
            document.getElementById('addUnitSelect').value = '';
            _hideModifiers();
            toast('Added "' + (d.name || name) + '"', 'success');
            setTimeout(function() { location.reload(); }, 500);
        } else {
            toast(d.error || 'Failed to add item', 'error');
        }
    })
    .catch(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-plus me-1"></i>Add';
        toast('Network error', 'error');
    });
}

// toast -> kcToast (global alias in base.html)

var _confirmCb = null;
function showConfirm(title, text, btnText, btnClass, cb) {
    document.getElementById('confirmTitle').textContent = title;
    document.getElementById('confirmText').textContent = text;
    var btn = document.getElementById('confirmActionBtn');
    btn.textContent = btnText;
    btn.className = 'btn btn-sm ' + btnClass;
    _confirmCb = cb;
    btn.onclick = function() {
        bootstrap.Modal.getInstance(document.getElementById('confirmModal')).hide();
        if (_confirmCb) _confirmCb();
    };
    new bootstrap.Modal(document.getElementById('confirmModal')).show();
}

function openGenerateModal() {
    // Smart default — find first uncooked meal today from server data
    var mealOrder = ['breakfast','lunch','dinner'];
    var todayMeals = {{ today_meals_json|tojson }};
    var cookedMeals = {{ today_cooked_json|tojson }};
    var defaultMeal = 'dinner';
    for (var i = 0; i < mealOrder.length; i++) {
        var mt = mealOrder[i];
        if (todayMeals.indexOf(mt) >= 0 && cookedMeals.indexOf(mt) < 0) {
            defaultMeal = mt;
            break;
        }
    }
    document.getElementById('genMealType').value = defaultMeal;
    new bootstrap.Modal(document.getElementById('generateModal')).show();
}

var _activeMealTab = 'all';

function filterMealTab(btn, meal) {
    _activeMealTab = meal;

    // Update tab button styles
    document.querySelectorAll('.meal-tab').forEach(function(b) {
        b.classList.toggle('active', b.dataset.meal === meal);
        b.classList.toggle('btn-success', b.dataset.meal === meal);
        b.classList.toggle('btn-outline-success', b.dataset.meal !== meal);
    });

    // Remove any existing general separator
    var existing = document.getElementById('generalItemsSeparator');
    if (existing) existing.remove();

    if (meal === 'all') {
        // Show all items and all dept cards
        document.querySelectorAll('.shop-item').forEach(function(row){ row.style.display = ''; });
        document.querySelectorAll('.dept-card').forEach(function(card){ card.style.display = ''; card.classList.remove('is-general-only'); });
        return;
    }

    // Step 1: Show/hide individual items
    document.querySelectorAll('.shop-item').forEach(function(row) {
        var rowMeal = row.dataset.meal || 'manual';
        row.style.display = (rowMeal === meal || rowMeal === 'manual') ? '' : 'none';
    });

    // Step 2: Categorise each dept-card as meal-matched or general-only
    var firstGeneralCard = null;
    document.querySelectorAll('.dept-card').forEach(function(card) {
        var allVisible = card.querySelectorAll('.shop-item:not([style*="none"])');
        var mealVisible = Array.from(allVisible).filter(function(r){ return r.dataset.meal === meal; });
        var manualVisible = Array.from(allVisible).filter(function(r){ return (r.dataset.meal || 'manual') === 'manual'; });

        if (allVisible.length === 0) {
            // Nothing visible — hide the card
            card.style.display = 'none';
            card.classList.remove('is-general-only');
        } else if (mealVisible.length === 0 && manualVisible.length > 0) {
            // Only manual items visible — mark as general
            card.style.display = '';
            card.classList.add('is-general-only');
            if (!firstGeneralCard) firstGeneralCard = card;
        } else {
            // Has meal-matched items — normal dept card
            card.style.display = '';
            card.classList.remove('is-general-only');
        }
    });

    // Step 3: Insert separator before first general-only card
    if (firstGeneralCard) {
        var sep = document.createElement('div');
        sep.id = 'generalItemsSeparator';
        sep.style.cssText = 'font-size:.7rem;font-weight:700;color:#9ca3af;letter-spacing:.08em;padding:.75rem .85rem .25rem;text-transform:uppercase;border-top:1px solid #f3f4f6;margin-top:.25rem';
        sep.textContent = '— General Items —';
        firstGeneralCard.parentNode.insertBefore(sep, firstGeneralCard);
    }
}

var _currentScope = 'meal';

function setScope(scope) {
    _currentScope = scope;
    document.querySelectorAll('.scope-btn').forEach(function(b) {
        var isActive = b.dataset.scope === scope;
        b.classList.toggle('btn-success', isActive);
        b.classList.toggle('btn-outline-success', !isActive);
    });
    document.getElementById('scopeMealOpts').style.display  = scope === 'meal'  ? '' : 'none';
    document.getElementById('scopeTodayOpts').style.display = scope === 'today' ? '' : 'none';
    document.getElementById('scopeWeekOpts').style.display  = scope === 'week'  ? '' : 'none';
    document.getElementById('scopeRangeOpts').style.display = scope === 'range' ? '' : 'none';
}

function generateFromPlan() {
    var btn = document.getElementById('genBtn');
    var subtractPantry = document.getElementById('genSubtractPantry').checked;
    var payload = { scope: _currentScope, subtract_pantry: subtractPantry };

    if (_currentScope === 'meal') {
        payload.meal_type = document.getElementById('genMealType').value;
        payload.date = document.getElementById('genMealDate').value;
    } else if (_currentScope === 'range') {
        payload.date_from = document.getElementById('genDateFrom').value;
        payload.date_to = document.getElementById('genDateTo').value;
        if (!payload.date_from || !payload.date_to) {
            toast('Please select both dates', 'error'); return;
        }
        if (payload.date_from > payload.date_to) {
            toast('From date must be before To date', 'error'); return;
        }
    }

    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';

    fetch('/meal-planner/generate-list', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (d.success) {
            toast('List generated - ' + (d.count||0) + ' item' + (d.count!==1?'s':''), 'success');
            setTimeout(function() { location.reload(); }, 600);
        } else {
            toast(d.error || 'Generation failed', 'error');
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-cart-plus me-1"></i>Generate List';
        }
    })
    .catch(function() {
        toast('Network error', 'error');
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-cart-plus me-1"></i>Generate List';
    });
}

function toggleItem(id) {
    fetch('/shopping-list/item/' + id + '/toggle', { method: 'POST' })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (!d.success) { toast(d.error||'Toggle failed','error'); return; }
        var row = document.getElementById('row-' + id);
        if (!row) return;
        var btn = row.querySelector('.check-btn');
        if (d.checked) {
            row.classList.add('is-checked'); row.dataset.checked = 'true';
            btn.classList.add('checked');
            row.classList.add('just-checked');
            setTimeout(function(){ row.classList.remove('just-checked'); }, 400);
        } else {
            row.classList.remove('is-checked'); row.dataset.checked = 'false';
            btn.classList.remove('checked');
        }
        updateAllStats();
    })
    .catch(function(){ toast('Network error','error'); });
}

function deleteItem(id) {
    fetch('/shopping-list/item/' + id + '/delete', { method: 'POST' })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (!d.success) { toast(d.error||'Delete failed','error'); return; }
        var row = document.getElementById('row-' + id);
        if (row) {
            var card = row.closest('.dept-card');
            row.style.transition = 'opacity .25s, max-height .25s';
            row.style.opacity = '0'; row.style.maxHeight = '0';
            row.style.overflow = 'hidden'; row.style.padding = '0 1rem';
            setTimeout(function() {
                row.remove();
                if (card && card.querySelectorAll('.shop-item').length === 0) {
                    card.style.transition = 'opacity .25s'; card.style.opacity = '0';
                    setTimeout(function(){ card.remove(); checkEmpty(); }, 250);
                }
                updateAllStats();
            }, 260);
        }
        toast('Item removed','success');
    })
    .catch(function(){ toast('Network error','error'); });
}

function clearChecked() {
    fetch('/shopping-list/clear', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({ mode:'checked' })
    })
    .then(function(r){ return r.json(); })
    .then(function(d){
        if (d.success){ toast('Checked items cleared','success'); setTimeout(function(){ location.reload(); },400); }
        else toast(d.error||'Failed','error');
    })
    .catch(function(){ toast('Network error','error'); });
}

function clearAll() {
    fetch('/shopping-list/clear', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({ mode:'all' })
    })
    .then(function(r){ return r.json(); })
    .then(function(d){
        if (d.success){ toast('Shopping list cleared','success'); setTimeout(function(){ location.reload(); },400); }
        else toast(d.error||'Failed','error');
    })
    .catch(function(){ toast('Network error','error'); });
}

function uncheckAll() {
    var checked = document.querySelectorAll('.shop-item[data-checked="true"]');
    if (checked.length === 0){ toast('Nothing to uncheck','info'); return; }
    var ids = []; checked.forEach(function(r){ ids.push(r.dataset.id); });
    var done = 0;
    ids.forEach(function(id) {
        fetch('/shopping-list/item/' + id + '/toggle', { method:'POST' })
        .then(function(r){ return r.json(); })
        .then(function(){
            done++;
            if (done >= ids.length){ toast('All items unchecked','success'); setTimeout(function(){ location.reload(); },400); }
        });
    });
}

function addCheckedToPantry() {
    var checked = document.querySelectorAll('.shop-item[data-checked="true"]');
    if (checked.length === 0){ toast('Nothing checked','info'); return; }
    fetch('/shopping-list/add-to-pantry', { method:'POST' })
    .then(function(r){ return r.json(); })
    .then(function(d){
        if (d.success){
            toast('Added ' + (d.added_count||0) + ' item(s) to pantry','success');
            setTimeout(function(){ location.reload(); },800);
        } else toast(d.error||'Failed','error');
    })
    .catch(function(){ toast('Network error','error'); });
}

function searchItems(query) {
    query = (query||'').toLowerCase().trim();
    var cb = document.getElementById('searchClear');
    if (cb) cb.style.display = query ? 'block' : 'none';
    document.querySelectorAll('.shop-item').forEach(function(item) {
        item.classList.toggle('search-hidden', query !== '' && (item.dataset.name||'').indexOf(query) === -1);
    });
    document.querySelectorAll('.dept-card').forEach(function(card) {
        var vis = card.querySelectorAll('.shop-item:not(.search-hidden)');
        card.style.display = vis.length === 0 && query !== '' ? 'none' : '';
    });
}

function filterDept(btn, dept) {
    document.querySelectorAll('.filter-pill').forEach(function(p){ p.classList.remove('active'); });
    btn.classList.add('active');
    document.querySelectorAll('.dept-card').forEach(function(card) {
        card.classList.toggle('filtered-out', dept !== 'all' && card.dataset.dept !== dept);
    });
}

function toggleDeptCollapse(btn) {
    var body = btn.closest('.dept-card').querySelector('.dept-body');
    var isOpen = btn.getAttribute('aria-expanded') === 'true';
    if (isOpen) {
        body.style.maxHeight = body.scrollHeight + 'px';
        requestAnimationFrame(function(){
            body.style.transition = 'max-height .25s ease, opacity .2s';
            body.style.maxHeight = '0'; body.style.opacity = '0'; body.style.overflow = 'hidden';
        });
        btn.setAttribute('aria-expanded','false'); btn.classList.add('collapsed');
    } else {
        body.style.transition = 'max-height .3s ease, opacity .2s';
        body.style.maxHeight = body.scrollHeight + 200 + 'px';
        body.style.opacity = '1'; body.style.overflow = '';
        btn.setAttribute('aria-expanded','true'); btn.classList.remove('collapsed');
        setTimeout(function(){ body.style.maxHeight = ''; }, 350);
    }
}

function toggleStoreMode() {
    document.body.classList.toggle('store-mode');
    window.scrollTo(0, 0);
}

function copyList() {
    var text = '🛒 Shopping List\n\n';
    document.querySelectorAll('.dept-card').forEach(function(card) {
        var emoji = (card.querySelector('.dept-emoji')||{}).textContent||'';
        var name = (card.querySelector('.dept-name')||{}).textContent||'';
        var items = card.querySelectorAll('.shop-item');
        if (items.length === 0) return;
        text += emoji.trim() + ' ' + name.trim() + '\n';
        items.forEach(function(item) {
            var chk = item.dataset.checked === 'true';
            var label = (item.querySelector('.item-name')||{}).textContent||'';
            text += '  ' + (chk ? '☑' : '☐') + ' ' + label.trim() + '\n';
        });
        text += '\n';
    });
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(function(){ toast('Copied to clipboard!','success'); })
        .catch(function(){ _fbCopy(text); });
    } else { _fbCopy(text); }
}
function _fbCopy(text) {
    var ta = document.createElement('textarea');
    ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
    document.body.appendChild(ta); ta.select();
    try { document.execCommand('copy'); toast('Copied!','success'); }
    catch(e) { toast('Copy failed','error'); }
    document.body.removeChild(ta);
}

function updateAllStats() {
    // Count only visible items (respects current meal tab filter)
    var all  = Array.from(document.querySelectorAll('.shop-item')).filter(function(r){ return r.style.display !== 'none'; });
    var done = all.filter(function(r){ return r.dataset.checked === 'true'; });
    var total = all.length, chk = done.length;
    var pct = total ? Math.round(chk / total * 100) : 0;
    var remaining = total - chk;

    var hc = document.getElementById('headerChecked');
    var ht = document.getElementById('headerTotal');
    if (hc) hc.textContent = chk;
    if (ht) ht.textContent = total;

    var rf = document.getElementById('progressRingFill');
    if (rf) rf.setAttribute('stroke-dasharray', pct + ', 100');
    var rt = document.getElementById('ringPctText');
    if (rt) rt.textContent = pct + '%';

    var sr = document.getElementById('storeRingFill');
    if (sr) sr.setAttribute('stroke-dasharray', pct + ', 100');
    var sp = document.getElementById('storeRingPct');
    if (sp) sp.textContent = pct + '%';
    var sm = document.getElementById('storeRemaining');
    if (sm) sm.textContent = remaining + ' item' + (remaining !== 1 ? 's' : '') + ' left';

    var sc = document.getElementById('statChecked');
    var st = document.getElementById('statTotal');
    if (sc) sc.textContent = chk;
    if (st) st.textContent = total;

    var msg = document.getElementById('progressMsg');
    if (msg) {
        if (pct === 0)       msg.textContent = 'Ready to shop!';
        else if (pct < 25)   msg.textContent = 'Just getting started…';
        else if (pct < 50)   msg.textContent = 'Making progress!';
        else if (pct < 75)   msg.textContent = 'More than halfway there!';
        else if (pct < 100)  msg.textContent = 'Almost done!';
        else                 msg.textContent = 'All done! 🎉';
    }

    var bp = document.getElementById('btnPantry');
    var bc = document.getElementById('btnClearChecked');
    if (bp) bp.style.display = chk > 0 ? '' : 'none';
    if (bc) bc.style.display = chk > 0 ? '' : 'none';

    document.querySelectorAll('.dept-card').forEach(function(card) {
        var dept = card.dataset.dept;
        var dAll  = card.querySelectorAll('.shop-item').length;
        var dDone = card.querySelectorAll('.shop-item[data-checked="true"]').length;
        var badge = card.querySelector('[data-dept-badge="' + dept + '"]');
        if (badge) {
            badge.textContent = dDone + '/' + dAll;
            badge.classList.toggle('all-done', dDone === dAll && dAll > 0);
        }
        var prog = card.querySelector('[data-dept-progress="' + dept + '"]');
        if (prog) prog.style.width = (dAll ? (dDone / dAll * 100) : 0) + '%';
    });

    var cs = document.getElementById('completeState');
    if (cs) cs.classList.toggle('show', total > 0 && chk === total);
}

function checkEmpty() {
    if (document.querySelectorAll('.shop-item').length === 0) {
        setTimeout(function(){ location.reload(); }, 300);
    }
}
</script>
{% endblock %}