{{-- Day-tabs meal planner — the consultant first picks how many days the
     menu covers (1–7), then each day is generated by the same one-day
     MenuGenerationService via `portal.api.meal-planner.generate-days`,
     which keeps components from repeating across days. Each day sits in
     its own tab and can be edited (swap / remove / add) or regenerated on
     its own. Save / Save & email submit every day as one visit — see
     ReviewerController::syncMenuDaysPreview().

     Relies on helpers defined in _form.blade.php's main script
     (selectedDietWizardKey, currentTarget, excludedIds, likedIds,
     mealSlotLabels, macroChart, componentToItem,
     fetchMealComponentsCatalog, renderMealSearchResults). --}}
@php
    $daysPlan = ($existingMenuPlan ?? null)?->structure ? $existingMenuPlan : null;
    $daysPlanTarget = $daysPlan ? [
        'calories' => $daysPlan->target_calories,
        'protein_g' => $daysPlan->protein_g,
        'carbs_g' => $daysPlan->carbs_g,
        'fat_g' => $daysPlan->fat_g,
    ] : null;
@endphp
<section class="card-sc" id="mealDaysPlanner">
    @if ($isNewVisit ?? false)
        <div class="mb-3 rounded-xl bg-brand-50 px-4 py-2.5 text-sm text-brand-800">
            {{ __('patients.new_visit_hint') }}
        </div>
    @elseif ($existingMenuPlan ?? null)
        <div class="mb-3 rounded-xl bg-ink-50 px-4 py-2.5 text-sm text-ink-600">
            {{ __('patients.editing_visit_hint', ['date' => $existingMenuPlan->starts_on?->format('Y-m-d') ?? $existingMenuPlan->created_at->format('Y-m-d')]) }}
        </div>
    @endif

    <div class="mb-1 flex flex-wrap items-center justify-between gap-3">
        <h2 class="text-lg">{{ __('patients.section_meal_planner_days') }}</h2>
        <div class="flex flex-wrap gap-2">
            <button type="button" class="btn-ghost !px-4 !py-2 text-sm" id="mealDaysRegenerateBtn" onclick="generateMealDays()" style="display:none;">
                {{ __('patients.regenerate_all_days') }}
            </button>
            <button type="submit" class="btn-soft !px-4 !py-2 text-sm" id="mealDaysSaveBtn"
                    onclick="return prepareMenuDaysSubmit('save')" disabled>
                {{ __('patients.save_menu') }}
            </button>
            <button type="submit" class="btn-brand !px-4 !py-2 text-sm" id="mealDaysSaveEmailBtn"
                    onclick="return prepareMenuDaysSubmit('email')" disabled>
                {{ __('patients.save_and_email_menu') }}
            </button>
        </div>
    </div>
    <p class="mb-4 text-sm text-ink-400">{{ __('patients.meal_planner_days_hint') }}</p>

    <div class="mb-4 flex flex-wrap items-end gap-3">
        <div>
            <span class="field-label">{{ __('patients.menu_days_count') }}</span>
            <div class="flex flex-wrap gap-1.5" id="mealDaysCountPicker">
                @for ($n = 1; $n <= \App\Services\MultiDayMenuGenerationService::MAX_DAYS; $n++)
                    <button type="button" class="days-pill numeric" data-days="{{ $n }}" onclick="setMealDaysCount({{ $n }})">{{ $n }}</button>
                @endfor
            </div>
        </div>
        <button type="button" class="btn-brand !px-4 !py-2 text-sm" id="mealDaysGenerateBtn" onclick="generateMealDays()">
            {{ __('patients.generate_menu_days') }}
        </button>
    </div>

    <div class="mb-4 flex flex-wrap gap-1 border-b border-ink-100" id="mealDaysTabs" role="tablist"></div>
    <div id="mealDaysBody"></div>
    <p class="mt-2 text-xs text-amber-600" id="mealDaysEmailHint" style="display:none;">{{ __('patients.menu_email_missing') }}</p>

    <input type="hidden" name="menu_days_json" id="menu_days_json" value="{{ old('menu_days_json') }}">
    {{-- Which visit Save writes to — blank inserts a new visit. --}}
    <input type="hidden" name="menu_days_target_id" id="menu_days_target_id"
           value="{{ old('menu_days_target_id', ($existingMenuPlan ?? null)?->id) }}">
</section>

<style>
    .days-pill {
        min-width: 2.4rem; padding: .45rem .7rem; border-radius: .7rem; font-weight: 700; font-size: .9rem;
        border: 1.5px solid #e2e8f0; background: #fff; color: #263A17; transition: all .15s ease;
    }
    .days-pill:hover { border-color: #7FA945; }
    .days-pill.is-selected { border-color: #5F8A31; background: #5F8A31; color: #fff; }
    .day-tab {
        padding: .55rem 1rem; font-size: .88rem; font-weight: 600; color: #7a7566;
        border-bottom: 2.5px solid transparent; margin-bottom: -1px;
    }
    .day-tab:hover { color: #263A17; }
    .day-tab.is-active { color: #5F8A31; border-bottom-color: #5F8A31; }
</style>

<script>
    // ── Day-tabs meal planner ──
    var mealDays = null;        // [{ day, meals, target, daily_totals, warnings }, ...] — exactly what Save submits
    var mealDaysActive = 0;     // index of the visible tab
    var mealDaysCount = {{ (int) ($daysPlan?->duration_days ?: 1) }};
    var mealDaysSeed = 0;
    var mealDaysBusy = false;

    function escapeMealDaysHtml(value) {
        return String(value == null ? '' : value).replace(/[&<>"']/g, function (ch) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch];
        });
    }

    /** Server message when there is one, else the generic failure text (never a raw JS error). */
    function mealDaysMessage(message) {
        return typeof message === 'string' && message ? message : @json(__('patients.preview_failed'));
    }

    function mealDaysError(message) {
        document.getElementById('mealDaysBody').innerHTML =
            '<p class="text-danger small">' + escapeMealDaysHtml(mealDaysMessage(message)) + '</p>';
    }

    function setMealDaysBusy(busy) {
        mealDaysBusy = busy;
        document.getElementById('mealDaysGenerateBtn').disabled = busy;
        document.getElementById('mealDaysRegenerateBtn').disabled = busy;
        document.querySelectorAll('.meal-day-regenerate').forEach(function (b) { b.disabled = busy; });
    }

    function setMealDaysSaveEnabled(enabled) {
        document.getElementById('mealDaysSaveBtn').disabled = !enabled;
        document.getElementById('mealDaysSaveEmailBtn').disabled = !enabled;
    }

    function renderMealDaysCountPicker() {
        document.querySelectorAll('#mealDaysCountPicker .days-pill').forEach(function (pill) {
            pill.classList.toggle('is-selected', parseInt(pill.dataset.days, 10) === mealDaysCount);
        });
    }

    /** Component ids used on every day except `skipIndex` (null = all days). */
    function mealDaysUsedIds(skipIndex) {
        var ids = [];
        (mealDays || []).forEach(function (day, i) {
            if (i === skipIndex) return;
            Object.keys(day.meals || {}).forEach(function (slot) {
                (day.meals[slot].components || []).forEach(function (c) {
                    if (c.component_id && ids.indexOf(c.component_id) === -1) ids.push(c.component_id);
                });
            });
        });
        return ids;
    }

    function requestMealDays(days, avoidIds) {
        var wizard = selectedDietWizardKey();
        var target = currentTarget();
        if (!wizard || !target) return Promise.reject(null);

        return fetch(@json(route('portal.api.meal-planner.generate-days')), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || document.querySelector('input[name="_token"]').value,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                diet_type: wizard.key,
                phase: wizard.phase,
                calories: target,
                days: days,
                excluded_component_ids: Array.from(excludedIds),
                liked_component_ids: Array.from(likedIds),
                avoid_component_ids: avoidIds || [],
                rotation_seed: mealDaysSeed++,
            }),
        })
        .then(function (r) { return r.json(); })
        .then(function (json) {
            if (!json.status) return Promise.reject(json.message || null);
            return json.days;
        });
    }

    function afterMealDaysChanged() {
        mealDays.forEach(function (day, i) { day.day = i + 1; });
        if (mealDaysActive >= mealDays.length) mealDaysActive = mealDays.length - 1;
        renderMealDays();
        document.getElementById('mealDaysRegenerateBtn').style.display = '';
        setMealDaysSaveEnabled(true);
    }

    /** (Re)generates every day from scratch for the selected day count. */
    function generateMealDays() {
        if (mealDaysBusy) return;
        setMealDaysBusy(true);
        setMealDaysSaveEnabled(false);

        requestMealDays(mealDaysCount, [])
            .then(function (days) {
                mealDays = days;
                mealDaysActive = 0;
                afterMealDaysChanged();
            })
            .catch(function (message) { mealDays = null; renderMealDaysTabs(); mealDaysError(message); })
            .finally(function () { setMealDaysBusy(false); });
    }

    /** Regenerates one day only, avoiding every component the other days use. */
    function regenerateMealDay(index) {
        if (mealDaysBusy || !mealDays || !mealDays[index]) return;
        setMealDaysBusy(true);

        requestMealDays(1, mealDaysUsedIds(index))
            .then(function (days) {
                mealDays[index] = days[0];
                afterMealDaysChanged();
            })
            .catch(function (message) { alert(mealDaysMessage(message)); })
            .finally(function () { setMealDaysBusy(false); });
    }

    /**
     * Picking a different day count on an existing plan keeps the days
     * already built (and any edits on them): fewer days trims from the end,
     * more days generates only the missing ones, still avoiding repeats.
     */
    function setMealDaysCount(n) {
        if (mealDaysBusy) return;
        var previous = mealDaysCount;
        mealDaysCount = n;
        renderMealDaysCountPicker();

        if (!mealDays) return;

        if (n < mealDays.length) {
            mealDays = mealDays.slice(0, n);
            afterMealDaysChanged();
            return;
        }

        if (n > mealDays.length) {
            setMealDaysBusy(true);
            requestMealDays(n - mealDays.length, mealDaysUsedIds(null))
                .then(function (days) {
                    mealDays = mealDays.concat(days);
                    mealDaysActive = mealDays.length - days.length;
                    afterMealDaysChanged();
                })
                .catch(function (message) {
                    mealDaysCount = previous;
                    renderMealDaysCountPicker();
                    alert(mealDaysMessage(message));
                })
                .finally(function () { setMealDaysBusy(false); });
        }
    }

    function selectMealDay(index) {
        mealDaysActive = index;
        renderMealDays();
    }

    function renderMealDaysTabs() {
        var tabs = document.getElementById('mealDaysTabs');
        if (!mealDays || !mealDays.length) { tabs.innerHTML = ''; return; }

        tabs.innerHTML = mealDays.map(function (day, i) {
            return '<button type="button" role="tab" class="day-tab' + (i === mealDaysActive ? ' is-active' : '') + '"' +
                ' aria-selected="' + (i === mealDaysActive) + '" onclick="selectMealDay(' + i + ')">' +
                @json(__('common.day')) + ' <span class="numeric">' + (i + 1) + '</span></button>';
        }).join('');
    }

    function mealDayTotals(day) {
        var totals = { calories: 0, protein_g: 0, carbs_g: 0, fat_g: 0 };
        Object.keys(day.meals || {}).forEach(function (slot) {
            var meal = day.meals[slot];
            totals.calories += parseFloat(meal.calories) || 0;
            totals.protein_g += parseFloat(meal.protein_g) || 0;
            totals.carbs_g += parseFloat(meal.carbs_g) || 0;
            totals.fat_g += parseFloat(meal.fat_g) || 0;
        });
        return totals;
    }

    function renderMealDays() {
        renderMealDaysTabs();

        var body = document.getElementById('mealDaysBody');
        var day = mealDays && mealDays[mealDaysActive];
        if (!day) { body.innerHTML = ''; return; }

        var d = mealDaysActive;
        var unitG = @json(__('common.grams'));
        var unitMl = @json(__('common.ml'));
        var kcal = @json(__('common.kcal'));
        var totals = mealDayTotals(day);
        var dayTarget = (day.target && day.target.calories) || 0;

        var html = '<div class="mb-3 flex flex-wrap items-center justify-between gap-2">' +
            '<p class="m-0 text-sm text-ink-600">' + @json(__('patients.day_total')) + ': ' +
            '<span class="numeric font-bold text-ink-900">' + Math.round(totals.calories) + (dayTarget ? ' / ' + Math.round(dayTarget) : '') + ' ' + kcal + '</span>' +
            ' <span class="numeric text-xs text-ink-400">(' + Math.round(totals.protein_g) + 'g P · ' + Math.round(totals.carbs_g) + 'g C · ' + Math.round(totals.fat_g) + 'g F)</span></p>' +
            '<button type="button" class="meal-day-regenerate btn-ghost !px-3 !py-1.5 text-xs" onclick="regenerateMealDay(' + d + ')"' + (mealDaysBusy ? ' disabled' : '') + '>' +
            @json(__('patients.regenerate_day')) + '</button>' +
            '</div>' +
            '<div class="grid gap-4 md:grid-cols-3">';

        ['breakfast', 'lunch', 'dinner'].forEach(function (slot) {
            var meal = day.meals[slot];
            if (!meal) return;

            var pct = meal.target_calories > 0 ? Math.min(100, Math.round((meal.calories / meal.target_calories) * 100)) : 0;
            var fillColor = pct >= 100 ? '#22c55e' : '#ef4444';
            var key = d + '_' + slot;

            html += '<div class="rounded-2xl border border-ink-100 p-4">' +
                '<div class="mb-2 flex items-center gap-2">' +
                '<span style="width:10px;height:10px;border-radius:50%;background:' + fillColor + ';display:inline-block;"></span>' +
                '<h3 class="text-base m-0">' + mealSlotLabels[slot] + '</h3>' +
                '<span class="ms-auto numeric text-sm font-bold" style="color:' + fillColor + '">' + Math.round(meal.calories) + ' ' + kcal + '</span>' +
                '</div>' +
                '<div style="height:6px;border-radius:99px;background:#eef0f7;overflow:hidden;margin-bottom:.5rem;">' +
                '<span style="display:block;height:100%;width:' + pct + '%;background:' + fillColor + ';"></span>' +
                '</div>' +
                macroChart(meal) +
                '<ul class="list-none space-y-1.5 ps-0 m-0">';

            (meal.components || []).forEach(function (c, index) {
                html += '<li class="text-sm">' +
                    '<div class="flex items-center justify-between gap-2">' +
                    '<span class="text-ink-700">' + escapeMealDaysHtml(c.name) + '</span>' +
                    '<span class="flex shrink-0 items-center gap-1.5">' +
                    '<span class="numeric font-semibold text-ink-500">' + c.grams + (c.unit === 'ml' ? unitMl : unitG) + '</span>' +
                    '<button type="button" class="day-item-swap text-ink-400 hover:text-brand-600" data-slot="' + slot + '" data-index="' + index + '" title="' + @json(__('patients.swap_component')) + '">&#8646;</button>' +
                    '<button type="button" class="day-item-remove text-ink-400 hover:text-red-600" data-slot="' + slot + '" data-index="' + index + '" title="' + @json(__('onsite.remove_component')) + '">&times;</button>' +
                    '</span>' +
                    '</div>' +
                    '<div class="day-search hidden mt-1.5" id="daySwapSearch_' + key + '_' + index + '">' +
                    '<input type="text" class="field-input day-swap-input !py-1 !text-xs" data-slot="' + slot + '" data-index="' + index + '" placeholder="' + @json(__('patients.search_component_to_swap')) + '">' +
                    '<div class="mt-1 space-y-1" id="daySwapResults_' + key + '_' + index + '"></div>' +
                    '</div>' +
                    '</li>';
            });

            html += '</ul>' +
                '<button type="button" class="day-add-toggle mt-2 text-xs font-semibold text-brand-700 hover:underline" data-slot="' + slot + '">+ ' + @json(__('patients.add_component')) + '</button>' +
                '<div class="day-search hidden mt-1.5" id="dayAddSearch_' + key + '">' +
                '<input type="text" class="field-input day-add-input !py-1 !text-xs" data-slot="' + slot + '" placeholder="' + @json(__('onsite.search_component_to_add')) + '">' +
                '<div class="mt-1 space-y-1" id="dayAddResults_' + key + '"></div>' +
                '</div>' +
                '</div>';
        });

        html += '</div>';

        if (day.warnings && day.warnings.length) {
            html += '<div class="mt-3 rounded-xl bg-amber-50 px-4 py-3 text-sm text-amber-900">' +
                day.warnings.map(escapeMealDaysHtml).join('<br>') + '</div>';
        }

        body.innerHTML = html;
    }

    // ── Per-day editing: swap / remove / add, on the visible day only ──

    function recomputeMealDayMeal(meal) {
        var sums = (meal.components || []).reduce(function (acc, item) {
            acc.calories += parseFloat(item.calories) || 0;
            acc.protein_g += parseFloat(item.protein_g) || 0;
            acc.carbs_g += parseFloat(item.carbs_g) || 0;
            acc.fat_g += parseFloat(item.fat_g) || 0;
            return acc;
        }, { calories: 0, protein_g: 0, carbs_g: 0, fat_g: 0 });

        meal.calories = Math.round(sums.calories * 10) / 10;
        meal.protein_g = Math.round(sums.protein_g * 10) / 10;
        meal.carbs_g = Math.round(sums.carbs_g * 10) / 10;
        meal.fat_g = Math.round(sums.fat_g * 10) / 10;
    }

    function activeMealDayMeal(slot) {
        var day = mealDays && mealDays[mealDaysActive];
        return day ? day.meals[slot] : null;
    }

    /** Ids already on the visible day — not offered again by the search. */
    function activeMealDayIds() {
        var ids = [];
        var day = mealDays && mealDays[mealDaysActive];
        Object.keys((day && day.meals) || {}).forEach(function (slot) {
            (day.meals[slot].components || []).forEach(function (c) { ids.push(String(c.component_id)); });
        });
        return ids;
    }

    function openMealDaySearch(id) {
        var target = document.getElementById(id);
        if (!target) return;
        var wasOpen = !target.classList.contains('hidden');
        document.querySelectorAll('#mealDaysBody .day-search').forEach(function (el) { el.classList.add('hidden'); });
        if (wasOpen) return;

        target.classList.remove('hidden');
        var results = target.querySelector('div');
        results.innerHTML = '<p class="text-xs text-ink-400">' + @json(__('common.loading')) + '</p>';
        fetchMealComponentsCatalog(function (list) {
            mealComponentsCatalog = list;
            results.innerHTML = '';
            target.querySelector('input').focus();
        });
    }

    function editActiveMealDay(slot, mutate) {
        var meal = activeMealDayMeal(slot);
        if (!meal) return;
        mutate(meal);
        recomputeMealDayMeal(meal);
        renderMealDays();
    }

    document.getElementById('mealDaysBody').addEventListener('click', function (e) {
        var key = mealDaysActive + '_';

        var swapBtn = e.target.closest('.day-item-swap');
        if (swapBtn) { openMealDaySearch('daySwapSearch_' + key + swapBtn.dataset.slot + '_' + swapBtn.dataset.index); return; }

        var removeBtn = e.target.closest('.day-item-remove');
        if (removeBtn) {
            var removeIndex = parseInt(removeBtn.dataset.index, 10);
            editActiveMealDay(removeBtn.dataset.slot, function (meal) { meal.components.splice(removeIndex, 1); });
            return;
        }

        var addToggle = e.target.closest('.day-add-toggle');
        if (addToggle) { openMealDaySearch('dayAddSearch_' + key + addToggle.dataset.slot); }
    });

    document.getElementById('mealDaysBody').addEventListener('input', function (e) {
        var slot = e.target.dataset.slot;
        var key = mealDaysActive + '_' + slot;

        if (e.target.classList.contains('day-swap-input')) {
            var index = parseInt(e.target.dataset.index, 10);
            renderMealSearchResults(document.getElementById('daySwapResults_' + key + '_' + index), e.target.value, activeMealDayIds(), function (component) {
                // Same portion size as the item being replaced.
                editActiveMealDay(slot, function (meal) {
                    meal.components[index] = componentToItem(component, meal.components[index].grams);
                });
            });
        } else if (e.target.classList.contains('day-add-input')) {
            renderMealSearchResults(document.getElementById('dayAddResults_' + key), e.target.value, activeMealDayIds(), function (component) {
                // No portion to match — default to the component's reference serving.
                editActiveMealDay(slot, function (meal) {
                    meal.components.push(componentToItem(component, parseFloat(component.reference_quantity) || 100));
                });
            });
        }
    });

    function prepareMenuDaysSubmit(action) {
        if (!mealDays || !mealDays.length) return false;

        var hint = document.getElementById('mealDaysEmailHint');
        if (action === 'email' && !document.getElementById('email').value.trim()) {
            hint.style.display = 'block';
            return false;
        }
        hint.style.display = 'none';

        document.querySelectorAll('input[name="menu_action"]').forEach(function (el) { el.value = action; });
        document.getElementById('menu_days_json').value = JSON.stringify(mealDays);
        return true;
    }

    /** A saved structure day -> the same shape the generate-days endpoint returns. */
    function mealDayFromStructure(day, index, target) {
        var preview = { day: index + 1, meals: {}, target: target, warnings: day.warnings || [] };
        (day.meals || []).forEach(function (meal) {
            // Never reopen an item that's on the current exclusion list.
            var items = (meal.items || meal.components || []).filter(function (i) {
                return !i.component_id || !excludedIds.has(i.component_id);
            });
            preview.meals[meal.slot] = { target_calories: meal.target_calories, components: items };
            recomputeMealDayMeal(preview.meals[meal.slot]);
        });
        return preview;
    }

    document.addEventListener('DOMContentLoaded', function () {
        renderMealDaysCountPicker();

        // This planner replaces the one-day preview, so exclusion / liked
        // changes now invalidate and regenerate these days instead.
        var exclusionsTimer = null;
        window.onExclusionsChanged = function () {
            if (!mealDays) return;
            setMealDaysSaveEnabled(false);
            clearTimeout(exclusionsTimer);
            exclusionsTimer = setTimeout(generateMealDays, 300);
        };

        // A different diet system means different components — drop the plan.
        document.querySelectorAll('.option-card[data-option="diet_type_id"]').forEach(function (card) {
            card.addEventListener('click', function () {
                mealDays = null;
                renderMealDays();
                document.getElementById('mealDaysRegenerateBtn').style.display = 'none';
                setMealDaysSaveEnabled(false);
            });
        });

        // Restore: the days posted before a validation error, else the visit being edited.
        var restored = null;
        try { restored = JSON.parse(document.getElementById('menu_days_json').value || 'null'); } catch (e) { restored = null; }

        @if ($daysPlan)
            if (!Array.isArray(restored) || !restored.length) {
                var savedTarget = @json($daysPlanTarget);
                restored = (@json($daysPlan->structure) || []).map(function (day, i) {
                    return mealDayFromStructure(day, i, savedTarget);
                });
            }
        @endif

        if (Array.isArray(restored) && restored.length) {
            mealDays = restored.slice(0, {{ \App\Services\MultiDayMenuGenerationService::MAX_DAYS }});
            mealDaysCount = mealDays.length;
            renderMealDaysCountPicker();
            afterMealDaysChanged();
        }
    });
</script>