@php
    $foodInventoryRecipe = old('inventory_recipe', $foodProduct->inventory_recipe ?? []);
    $foodInventoryItems = collect($foodInventoryCatalog ?? [])->values()->all();
@endphp

@push('styles')
<style>
    .food-recipe-card {
        border-radius: 1.35rem;
    }

    .food-recipe-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .food-recipe-row {
        border-radius: 1rem;
    }

    .food-recipe-stat {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.96);
        padding: 0.55rem 0.85rem;
        box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
    }

    .food-recipe-stat-label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgb(100 116 139);
    }

    .food-recipe-stat-value {
        font-size: 0.95rem;
        font-weight: 800;
        line-height: 1;
    }

    .food-recipe-row-grid {
        display: grid;
        gap: 0.65rem;
        grid-template-columns: minmax(0, 1.55fr) 92px 110px minmax(0, 1fr) 108px;
        align-items: end;
    }

    @media (max-width: 640px) {
        .food-recipe-card {
            padding: 0.72rem !important;
            border-radius: 1rem;
        }

        .food-recipe-summary {
            gap: 0.35rem;
        }

        .food-recipe-stat {
            flex: 1 1 calc(33.33% - 0.35rem);
            min-width: 0;
            justify-content: space-between;
            padding: 0.48rem 0.62rem;
        }

        .food-recipe-row {
            padding: 0.68rem !important;
        }

        .food-recipe-row-grid {
            gap: 0.5rem;
            grid-template-columns: minmax(0, 1fr) 82px 82px;
        }

        .food-recipe-actions {
            width: 100%;
        }

        .food-recipe-actions > * {
            flex: 1 1 auto;
            justify-content: center;
        }

        .food-recipe-stat-label {
            font-size: 0.6rem;
        }

        .food-recipe-stat-value {
            font-size: 0.84rem;
        }
    }
</style>
@endpush

<div class="food-recipe-card mb-4 rounded-2xl border border-emerald-200 bg-emerald-50/80 p-4">
    <div class="mb-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div>
            <h3 class="text-lg font-semibold text-slate-900">Recette & stock cuisine</h3>
        </div>

        <div class="food-recipe-actions flex flex-wrap items-center gap-2">
            <span class="inline-flex items-center rounded-full bg-white px-3 py-1 text-xs font-semibold text-emerald-700">
                Deduction auto
            </span>
            @if(Route::has('prestataire.food-stock.create'))
                <a
                    href="{{ route('prestataire.food-stock.create', ['return_to' => request()->fullUrl()]) }}"
                    class="inline-flex items-center justify-center rounded-xl border border-emerald-200 bg-white px-3 py-2 text-xs font-semibold text-emerald-700 transition hover:bg-emerald-100"
                >
                    Creer stock
                </a>
            @endif
            @if(Route::has('prestataire.food-stock.index'))
                <a
                    href="{{ route('prestataire.food-stock.index') }}"
                    class="inline-flex items-center justify-center rounded-xl border border-emerald-200 bg-white px-3 py-2 text-xs font-semibold text-emerald-700 transition hover:bg-emerald-100"
                >
                    Voir stock
                </a>
            @endif
        </div>
    </div>

    <div
        id="foodRecipeBuilder"
        data-initial-recipe='@json($foodInventoryRecipe)'
        data-inventory-items='@json($foodInventoryItems)'
        class="space-y-4"
    >
        <div class="food-recipe-summary">
            <div class="food-recipe-stat">
                <span class="food-recipe-stat-label">Ingredients</span>
                <span data-recipe-ingredients class="food-recipe-stat-value text-slate-900">0</span>
            </div>
            <div class="food-recipe-stat">
                <span class="food-recipe-stat-label">Cout</span>
                <span data-recipe-cost class="food-recipe-stat-value text-emerald-700">0,00 €</span>
            </div>
            <div class="food-recipe-stat">
                <span class="food-recipe-stat-label">Marge</span>
                <span data-recipe-margin class="food-recipe-stat-value text-orange-600">0,00 €</span>
            </div>
        </div>

        @if(empty($foodInventoryItems))
            <div class="rounded-xl border border-dashed border-emerald-300 bg-white/90 p-4 text-sm text-slate-600">
                Aucun article cuisine disponible. Ajoutez d'abord vos ingredients, boissons, sauces ou emballages dans le stock cuisine.
            </div>
        @else
            <div id="foodRecipeEmptyState" class="hidden rounded-xl border border-dashed border-emerald-300 bg-white/90 p-3 text-sm text-slate-500">
                Aucun ingredient configure. Choisis un ingredient dans la ligne ci-dessous ou ajoute une nouvelle ligne.
            </div>

            <div id="foodRecipeList" class="space-y-3"></div>

            <button
                type="button"
                id="addFoodRecipeRow"
                class="inline-flex items-center gap-2 rounded-xl bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-700"
            >
                <span>＋</span>
                Ajouter a la recette
            </button>
        @endif
    </div>
</div>

<template id="foodRecipeRowTemplate">
    <div data-recipe-row class="food-recipe-row rounded-2xl border border-emerald-200 bg-white p-4 shadow-sm">
        <div class="food-recipe-row-grid">
            <div>
                <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Ingredient</label>
                <select
                    data-recipe-item
                    class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
                >
                    <option value="">Choisir un article</option>
                </select>
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Qte</label>
                <input
                    type="number"
                    min="0.001"
                    step="0.001"
                    data-recipe-quantity
                    class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
                    placeholder="1"
                >
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Unite</label>
                <select
                    data-recipe-unit
                    class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
                >
                    <option value="">Unite</option>
                </select>
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Note</label>
                <input
                    type="text"
                    maxlength="160"
                    data-recipe-notes
                    class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
                    placeholder="Portion, dosage"
                >
            </div>

            <div class="flex items-end">
                <button
                    type="button"
                    data-remove-recipe
                    class="w-full rounded-xl bg-red-50 px-3 py-2 text-sm font-semibold text-red-600 transition hover:bg-red-100"
                >
                    Retirer
                </button>
            </div>
        </div>

        <div class="mt-2 flex flex-wrap gap-1.5 text-xs">
            <span data-recipe-unit-pill class="hidden rounded-full bg-slate-100 px-2.5 py-0.5 font-medium text-slate-600"></span>
            <span data-recipe-cost-pill class="hidden rounded-full bg-emerald-100 px-2.5 py-0.5 font-medium text-emerald-700"></span>
            <span data-recipe-stock-pill class="hidden rounded-full bg-amber-100 px-2.5 py-0.5 font-medium text-amber-700"></span>
        </div>
    </div>
</template>

@if(!empty($foodInventoryItems))
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const builder = document.getElementById('foodRecipeBuilder');
    if (!builder) {
        return;
    }

    const list = document.getElementById('foodRecipeList');
    const emptyState = document.getElementById('foodRecipeEmptyState');
    const addRowButton = document.getElementById('addFoodRecipeRow');
    const rowTemplate = document.getElementById('foodRecipeRowTemplate');
    const priceInput = document.getElementById('priceInput');
    const ingredientCountNode = builder.querySelector('[data-recipe-ingredients]');
    const costNode = builder.querySelector('[data-recipe-cost]');
    const marginNode = builder.querySelector('[data-recipe-margin]');

    let inventoryItems = [];
    let initialRecipe = [];

    try {
        inventoryItems = JSON.parse(builder.dataset.inventoryItems || '[]');
    } catch (error) {
        inventoryItems = [];
    }

    try {
        initialRecipe = JSON.parse(builder.dataset.initialRecipe || '[]');
    } catch (error) {
        initialRecipe = [];
    }

    const inventoryMap = new Map(inventoryItems.map(function (item) {
        return [String(item.id), item];
    }));

    function formatCurrency(amount) {
        return new Intl.NumberFormat('fr-FR', {
            style: 'currency',
            currency: 'EUR',
        }).format(amount || 0);
    }

    function formatQuantity(quantity) {
        const value = Number(quantity || 0);

        if (Number.isInteger(value)) {
            return String(value);
        }

        return value.toLocaleString('fr-FR', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 3,
        });
    }

    function normalizeUnit(unit) {
        const value = String(unit || '').trim().toLowerCase();
        const aliases = {
            'litre': 'l',
            'litres': 'l',
            'gramme': 'g',
            'grammes': 'g',
            'kilo': 'kg',
            'kilos': 'kg',
            'kilogramme': 'kg',
            'kilogrammes': 'kg',
            'pièce': 'piece',
            'pièces': 'piece',
            'pieces': 'piece',
        };

        return aliases[value] || value;
    }

    function conversionFactor(unit) {
        switch (normalizeUnit(unit)) {
            case 'g':
                return { family: 'mass', factor: 1 };
            case 'kg':
                return { family: 'mass', factor: 1000 };
            case 'ml':
                return { family: 'volume', factor: 1 };
            case 'cl':
                return { family: 'volume', factor: 10 };
            case 'l':
                return { family: 'volume', factor: 1000 };
            default:
                return null;
        }
    }

    function compatibleUnits(stockUnit) {
        const normalized = normalizeUnit(stockUnit);
        const factor = conversionFactor(normalized);

        if (factor?.family === 'mass') {
            return ['g', 'kg'];
        }

        if (factor?.family === 'volume') {
            return ['ml', 'cl', 'L'];
        }

        return [stockUnit || 'unité'];
    }

    function convertToStockQuantity(quantity, inputUnit, stockUnit) {
        const value = Math.max(0, Number(quantity || 0));
        const from = conversionFactor(inputUnit);
        const to = conversionFactor(stockUnit);

        if (!value || !from || !to || from.family !== to.family) {
            return value;
        }

        return Math.round(((value * from.factor) / to.factor) * 1000) / 1000;
    }

    function populateInventoryOptions(select, selectedValue) {
        inventoryItems.forEach(function (item) {
            const option = document.createElement('option');
            option.value = item.id;
            option.textContent = item.name + ' (' + item.quantity + ' ' + item.unit + ')';
            option.selected = String(selectedValue || '') === String(item.id);
            select.appendChild(option);
        });
    }

    function populateUnitOptions(select, inventoryItem, selectedValue = '') {
        const preferred = selectedValue || inventoryItem?.unit || '';
        const units = compatibleUnits(inventoryItem?.unit || preferred || 'unité');

        select.innerHTML = '';

        units.forEach(function (unit) {
            const option = document.createElement('option');
            option.value = unit;
            option.textContent = unit;
            option.selected = normalizeUnit(preferred) === normalizeUnit(unit);
            select.appendChild(option);
        });
    }

    function syncRowMeta(row) {
        const select = row.querySelector('[data-recipe-item]');
        const quantityInput = row.querySelector('[data-recipe-quantity]');
        const unitSelect = row.querySelector('[data-recipe-unit]');
        const unitPill = row.querySelector('[data-recipe-unit-pill]');
        const costPill = row.querySelector('[data-recipe-cost-pill]');
        const stockPill = row.querySelector('[data-recipe-stock-pill]');
        const inventoryItem = inventoryMap.get(select.value);
        const quantity = Math.max(0, Number(quantityInput.value || 0));

        if (!inventoryItem) {
            [unitPill, costPill, stockPill].forEach(function (pill) {
                pill.classList.add('hidden');
                pill.textContent = '';
            });
            populateUnitOptions(unitSelect, null, unitSelect.value);
            return;
        }

        if (!unitSelect.options.length) {
            populateUnitOptions(unitSelect, inventoryItem, unitSelect.value);
        }

        const convertedQuantity = convertToStockQuantity(quantity, unitSelect.value, inventoryItem.unit);

        unitPill.textContent = quantity > 0
            ? 'Deduction: ' + formatQuantity(convertedQuantity) + ' ' + inventoryItem.unit
            : 'Stock en ' + inventoryItem.unit;
        unitPill.classList.remove('hidden');

        stockPill.textContent = 'Stock: ' + formatQuantity(inventoryItem.quantity) + ' ' + inventoryItem.unit;
        stockPill.classList.remove('hidden');

        if (quantity > 0) {
            costPill.textContent = 'Cout: ' + formatCurrency((Number(inventoryItem.cost_per_unit || 0) * convertedQuantity));
            costPill.classList.remove('hidden');
        } else {
            costPill.classList.add('hidden');
            costPill.textContent = '';
        }
    }

    function updateSummary() {
        let ingredientCount = 0;
        let totalCost = 0;

        list.querySelectorAll('[data-recipe-row]').forEach(function (row) {
            const select = row.querySelector('[data-recipe-item]');
            const quantityInput = row.querySelector('[data-recipe-quantity]');
            const unitSelect = row.querySelector('[data-recipe-unit]');
            const inventoryItem = inventoryMap.get(select.value);
            const quantity = Math.max(0, Number(quantityInput.value || 0));

            if (!inventoryItem || quantity <= 0) {
                return;
            }

            ingredientCount += 1;
            totalCost += Number(inventoryItem.cost_per_unit || 0) * convertToStockQuantity(quantity, unitSelect.value, inventoryItem.unit);
        });

        const price = Number(priceInput ? priceInput.value : 0);
        const margin = price - totalCost;

        ingredientCountNode.textContent = String(ingredientCount);
        costNode.textContent = formatCurrency(totalCost);
        marginNode.textContent = formatCurrency(margin);
        marginNode.classList.toggle('text-red-600', margin < 0);
        marginNode.classList.toggle('text-orange-600', margin >= 0);

        if (emptyState) {
            emptyState.classList.toggle('hidden', list.children.length > 0);
        }
    }

    function reindexRows() {
        Array.from(list.children).forEach(function (row, index) {
            row.querySelector('[data-recipe-item]').setAttribute('name', 'inventory_recipe[' + index + '][inventory_item_id]');
            row.querySelector('[data-recipe-quantity]').setAttribute('name', 'inventory_recipe[' + index + '][quantity]');
            row.querySelector('[data-recipe-unit]').setAttribute('name', 'inventory_recipe[' + index + '][quantity_unit]');
            row.querySelector('[data-recipe-notes]').setAttribute('name', 'inventory_recipe[' + index + '][notes]');
            syncRowMeta(row);
        });

        updateSummary();
    }

    function createRow(rowData = {}) {
        const fragment = rowTemplate.content.cloneNode(true);
        const row = fragment.querySelector('[data-recipe-row]');
        const select = row.querySelector('[data-recipe-item]');
        const quantityInput = row.querySelector('[data-recipe-quantity]');
        const unitSelect = row.querySelector('[data-recipe-unit]');
        const notesInput = row.querySelector('[data-recipe-notes]');

        populateInventoryOptions(select, rowData.inventory_item_id || '');
        populateUnitOptions(unitSelect, inventoryMap.get(String(rowData.inventory_item_id || '')), rowData.quantity_unit || rowData.unit || '');
        quantityInput.value = rowData.quantity_input != null
            ? rowData.quantity_input
            : (rowData.quantity != null ? rowData.quantity : '');
        notesInput.value = rowData.notes || '';

        row.querySelector('[data-remove-recipe]').addEventListener('click', function () {
            row.remove();
            reindexRows();
        });

        select.addEventListener('change', function () {
            populateUnitOptions(unitSelect, inventoryMap.get(select.value), unitSelect.value);
            syncRowMeta(row);
            updateSummary();
        });

        quantityInput.addEventListener('input', function () {
            syncRowMeta(row);
            updateSummary();
        });

        unitSelect.addEventListener('change', function () {
            syncRowMeta(row);
            updateSummary();
        });

        return row;
    }

    addRowButton?.addEventListener('click', function () {
        list.appendChild(createRow({}));
        reindexRows();
    });

    if (Array.isArray(initialRecipe) && initialRecipe.length > 0) {
        initialRecipe.forEach(function (rowData) {
            list.appendChild(createRow(rowData));
        });
    } else if (inventoryItems.length > 0) {
        list.appendChild(createRow({}));
    }

    priceInput?.addEventListener('input', updateSummary);
    reindexRows();
});
</script>
@endpush
@endif