{% extends 'base.html.twig' %}

{% block title %}Nouveau repas — Garde-manger{% endblock %}
{% block theme_color %}#f5f5f4{% endblock %}

{% block body_class %}bg-stone-100 text-stone-900 dark:bg-stone-950 dark:text-stone-100{% endblock %}

{% block body %}

{% embed 'ui/index_shell.html.twig' with {
    title: 'Nouveau repas',
    eyebrow: 'Repas',
    subtitle: 'Nom, date puis aliments à déduire du stock.',
    accent_rgb: '245,158,11',
    back_href: path('front.pantry.meal.index'),
} %}
{% block index_card %}

    <form action="{{ path('front.pantry.meal.new') }}" method="post"
          class="relative"
          data-controller="meal-picker"
          data-action="submit->meal-picker#validateSubmit">

        <div class="rounded-2xl bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 shadow-sm p-4 mb-4 space-y-3">
            <div>
                <label for="meal-name" class="block text-[10px] font-bold uppercase tracking-widest text-stone-400 dark:text-stone-500 mb-1.5">Nom du repas</label>
                <input id="meal-name" type="text" name="name" required
                       placeholder="Ex. Dîner lasagnes, Petit-déj…"
                       class="w-full rounded-xl border border-stone-200 dark:border-stone-700 bg-white dark:bg-stone-900 dark:text-stone-100 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 transition">
            </div>
            <div>
                <label for="meal-eaten-at" class="block text-[10px] font-bold uppercase tracking-widest text-stone-400 dark:text-stone-500 mb-1.5">Date et heure</label>
                <input id="meal-eaten-at" type="datetime-local" name="eaten_at"
                       value="{{ 'now'|date('Y-m-d\\TH:i') }}"
                       class="w-full rounded-xl border border-stone-200 dark:border-stone-700 bg-white dark:bg-stone-900 dark:text-stone-100 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 transition">
            </div>
            <div>
                <label for="meal-description" class="block text-[10px] font-bold uppercase tracking-widest text-stone-400 dark:text-stone-500 mb-1.5">Note <span class="font-normal normal-case text-stone-400">(optionnel)</span></label>
                <textarea id="meal-description" name="description" rows="2" placeholder="Commentaire court…"
                          class="w-full rounded-xl border border-stone-200 dark:border-stone-700 bg-white dark:bg-stone-900 dark:text-stone-100 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 transition resize-none min-h-[4.5rem]"></textarea>
            </div>
        </div>

        <h2 class="text-[10px] font-bold uppercase tracking-widest text-stone-400 dark:text-stone-500 mb-2 px-0.5">Aliments</h2>

        <div class="mb-3 space-y-2">
            <div class="relative">
                <svg class="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-stone-400 dark:text-stone-500 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.197 5.197a7.5 7.5 0 0 0 10.606 10.606Z"/></svg>
                <input type="text"
                       data-meal-picker-target="search"
                       data-action="input->meal-picker#search"
                       placeholder="Rechercher un aliment…"
                       class="w-full rounded-xl border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-800 dark:text-stone-100 pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-amber-600 transition">
            </div>

            {% if categories is not empty %}
            <div class="flex gap-1.5 overflow-x-auto pb-1 scrollbar-hide">
                {% for cat in categories %}
                    <button type="button"
                            data-meal-picker-target="categoryBtn"
                            data-action="meal-picker#filterCategory"
                            data-category="{{ cat }}"
                            class="shrink-0 rounded-full bg-white dark:bg-stone-800 text-stone-600 dark:text-stone-300 border border-stone-200 dark:border-stone-600 px-3 py-1 text-xs font-semibold transition-all whitespace-nowrap">
                        {{ cat }}
                    </button>
                {% endfor %}
            </div>
            {% endif %}
        </div>

        {% set inStock = items|filter(i => i.stockQuantity > 0) %}
        {% set outStock = items|filter(i => i.stockQuantity <= 0) %}

        {% if inStock is empty and outStock is empty %}
        <div class="rounded-2xl border border-dashed border-stone-200 dark:border-stone-700 bg-white/80 dark:bg-stone-900/60 px-5 py-12 text-center mb-4">
            <p class="text-sm font-semibold text-stone-600 dark:text-stone-300">Aucun article dans le garde-manger</p>
            <a href="{{ path('front.pantry.index') }}" class="mt-3 inline-block text-sm font-semibold text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300">
                Ajouter des articles →
            </a>
        </div>
        {% else %}
        <div class="grid grid-cols-2 gap-2.5 mb-4">

            {% for item in inStock %}
            <div
                data-meal-picker-target="item"
                data-item-id="{{ item.id }}"
                data-item-name="{{ item.name }}"
                data-item-stock="{{ item.stockQuantity }}"
                data-item-calories="{{ item.nutriments.calories ?? 0 }}"
                data-item-category="{{ item.category ?? '' }}"
                data-selected="false"
                data-action="click->meal-picker#toggleItem"
                class="relative rounded-2xl bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 shadow-sm p-3 cursor-pointer select-none transition-all duration-150 active:scale-95">

                <div class="hidden absolute top-2 left-2 z-10" data-check-icon>
                    <div class="size-5 rounded-full bg-amber-500 flex items-center justify-center shadow">
                        <svg class="size-3 text-white" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
                    </div>
                </div>

                {% if item.nutriscoreGrade %}
                    <span class="absolute top-2 right-2 rounded-md px-1.5 py-0.5 text-white font-black text-[9px] leading-none z-10"
                          style="background-color: {{ item.nutriscoreColor }}">
                        {{ item.nutriscoreGrade|upper }}
                    </span>
                {% endif %}

                {% if item.imageUrl %}
                    <img src="{{ item.imageUrl }}" alt="{{ item.name }}"
                         class="w-full h-20 object-contain bg-white dark:bg-stone-900 rounded-xl mb-2.5">
                {% else %}
                    <div class="w-full h-20 rounded-xl bg-white dark:bg-stone-900 flex items-center justify-center mb-2.5">
                        <div class="size-3 rounded-full {{ item.status.dotClass }}"></div>
                    </div>
                {% endif %}

                <p class="text-xs font-semibold text-stone-800 dark:text-stone-100 leading-snug line-clamp-2">{{ item.name }}</p>
                {% if item.brand %}
                    <p class="text-[10px] text-stone-400 dark:text-stone-500 truncate mt-0.5">{{ item.brand }}</p>
                {% endif %}

                <p class="text-[10px] text-stone-400 dark:text-stone-500 mt-1">
                    {{ item.stockQuantity }}{% if item.stockUnit %} {{ item.stockUnit }}{% else %}×{% endif %} restant{{ item.stockQuantity > 1 ? 's' : '' }}
                </p>

                <div class="hidden mt-2.5 pt-2.5 border-t border-stone-100 dark:border-stone-700 flex items-center justify-between gap-1" data-qty-controls>
                    <button type="button"
                            data-action="click->meal-picker#decrement"
                            class="size-7 rounded-full bg-stone-100 dark:bg-stone-800 hover:bg-red-100 dark:hover:bg-red-950/40 text-stone-600 dark:text-stone-300 hover:text-red-600 dark:hover:text-red-400 font-bold text-base leading-none flex items-center justify-center transition-colors shrink-0">
                        −
                    </button>
                    <span class="text-sm font-bold text-stone-800 dark:text-stone-100 tabular-nums" data-qty-display>1</span>
                    <button type="button"
                            data-action="click->meal-picker#increment"
                            class="size-7 rounded-full bg-stone-100 dark:bg-stone-800 hover:bg-amber-100 dark:hover:bg-amber-950/40 text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 font-bold text-base leading-none flex items-center justify-center transition-colors shrink-0">
                        +
                    </button>
                </div>

                <input type="hidden" name="lines[{{ loop.index0 }}][item_id]" value="{{ item.id }}" disabled data-form-input>
                <input type="hidden" name="lines[{{ loop.index0 }}][quantity]" value="1" data-qty-input data-form-input disabled>
            </div>
            {% endfor %}

            {% for item in outStock %}
            <div
                data-meal-picker-target="item"
                data-item-id="{{ item.id }}"
                data-item-name="{{ item.name }}"
                data-item-stock="0"
                data-item-calories="0"
                data-item-category="{{ item.category ?? '' }}"
                data-selected="false"
                class="relative rounded-2xl bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 p-3 opacity-40 select-none cursor-not-allowed">

                {% if item.imageUrl %}
                    <img src="{{ item.imageUrl }}" alt="{{ item.name }}"
                         class="w-full h-20 object-contain bg-white dark:bg-stone-900 rounded-xl mb-2.5">
                {% else %}
                    <div class="w-full h-20 rounded-xl bg-white dark:bg-stone-900 flex items-center justify-center mb-2.5">
                        <div class="size-3 rounded-full bg-stone-300 dark:bg-stone-600"></div>
                    </div>
                {% endif %}

                <p class="text-xs font-semibold text-stone-800 dark:text-stone-100 line-clamp-2">{{ item.name }}</p>
                <p class="text-[10px] text-red-400 mt-1">Rupture de stock</p>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if items is not empty %}
        <div class="hidden text-center py-10 text-stone-400 dark:text-stone-500" data-meal-picker-target="emptyState">
            <p class="text-sm">Aucun aliment ne correspond à cette recherche.</p>
        </div>
        {% endif %}

        <div class="h-28"></div>

        <div class="fixed inset-x-0 z-[35] flex justify-center px-4 pointer-events-none bottom-[calc(4.75rem+var(--safe-bottom))]">
            <div class="pointer-events-auto w-full max-w-lg">
            <div class="rounded-2xl bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 shadow-xl px-5 py-3.5 flex items-center gap-3">
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-semibold text-stone-700 dark:text-stone-200" data-meal-picker-target="count">Aucune sélection</p>
                    <p class="text-xs text-amber-600 dark:text-amber-400 font-medium hidden" data-meal-picker-target="calories"></p>
                </div>
                <button type="submit"
                        data-meal-picker-target="submitBtn"
                        disabled
                        class="shrink-0 rounded-xl bg-amber-500 hover:bg-amber-600 text-white font-semibold px-5 py-2.5 text-sm transition-colors opacity-40 cursor-not-allowed">
                    Enregistrer
                </button>
            </div>
            </div>
        </div>

    </form>

{% endblock %}
{% endembed %}

{% endblock %}