@php
    use App\Models\KitchenRecipe;
    $editing = $recipe !== null;
    $action = $editing ? route('kitchen.recipes.update', $recipe) : route('kitchen.recipes.store');
    $method = $editing ? 'PUT' : 'POST';
    $sel = $sel ?? 'h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50';
    $ings = $editing ? $recipe->ingredients : collect();
    $comp = $editing ? $recipe->composed->pluck('id')->all() : [];
@endphp

<form method="post" action="{{ $action }}" class="grid gap-4">
    @csrf @method($method)

    <div class="grid gap-3 md:grid-cols-5">
        <div class="md:col-span-2">
            <x-field label="Dish name *" required>
                <x-input name="name" value="{{ old('name', $editing ? $recipe->name : '') }}" placeholder="e.g. Rice &amp; Beans" required />
            </x-field>
        </div>
        <x-field label="Portions per batch *" required>
            <x-input type="number" min="1" name="portions" value="{{ old('portions', $editing ? $recipe->portions : '') }}" required />
        </x-field>
        <x-field label="Portion size">
            <x-input type="number" step="0.01" min="0" name="portion_size" value="{{ old('portion_size', $editing ? $recipe->portion_size : '') }}" />
        </x-field>
        <x-field label="Portion unit">
            <select name="portion_unit" class="{{ $sel }}">
                @foreach (KitchenRecipe::UNITS as $u)
                    <option value="{{ $u }}" @selected(old('portion_unit', $editing ? $recipe->portion_unit : 'g') === $u)>{{ $u }}</option>
                @endforeach
            </select>
        </x-field>
        <div class="md:col-span-5">
            <x-field label="Batch yield">
                <x-input name="batch_yield" value="{{ old('batch_yield', $editing ? $recipe->batch_yield : '') }}" placeholder="e.g. 20 kg" />
            </x-field>
        </div>
    </div>

    <div>
        <p class="mb-1.5 text-xs font-medium">Ingredients *</p>
        <div class="overflow-x-auto rounded-lg border border-border">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-border bg-muted/30 text-left text-xs text-muted-foreground">
                        <th class="px-3 py-2 font-medium">Item</th>
                        <th class="px-3 py-2 text-right font-medium">Qty per batch</th>
                        <th class="px-3 py-2 font-medium">Unit</th>
                        <th class="px-3 py-2 text-right font-medium">Yield %</th>
                        <th class="px-3 py-2"></th>
                    </tr>
                </thead>
                <tbody data-recipe-lines>
                    @forelse ($ings as $ing)
                        <tr data-recipe-line>
                            <td class="px-3 py-1.5">
                                <select name="lines[{{ $loop->index }}][item_id]" class="{{ $sel }}" required>
                                    <option value="">Select item</option>
                                    @foreach ($items as $item)
                                        <option value="{{ $item->id }}" @selected($ing->item_id == $item->id)>
                                            {{ $item->name }} ({{ $item->store?->name }}) &middot; {{ $item->unit }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-1.5">
                                <input type="number" step="0.001" min="0" name="lines[{{ $loop->index }}][qty]" value="{{ $ing->qty }}"
                                       class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring" required>
                            </td>
                            <td class="px-3 py-1.5">
                                <select name="lines[{{ $loop->index }}][unit]" class="{{ $sel }}" required>
                                    @foreach (KitchenRecipe::UNITS as $u)
                                        <option value="{{ $u }}" @selected($ing->unit === $u)>{{ $u }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-1.5">
                                <input type="number" step="0.01" min="0" max="100" name="lines[{{ $loop->index }}][yield_pct]" value="{{ $ing->yield_pct ?? 100 }}"
                                       class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring">
                            </td>
                            <td class="px-3 py-1.5 text-right">
                                <button type="button" data-remove-line class="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-accent">Remove</button>
                            </td>
                        </tr>
                    @empty
                        <tr data-recipe-line>
                            <td class="px-3 py-1.5">
                                <select name="lines[0][item_id]" class="{{ $sel }}" required>
                                    <option value="">Select item</option>
                                    @foreach ($items as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->store?->name }}) &middot; {{ $item->unit }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-1.5">
                                <input type="number" step="0.001" min="0" name="lines[0][qty]" value="0"
                                       class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring" required>
                            </td>
                            <td class="px-3 py-1.5">
                                <select name="lines[0][unit]" class="{{ $sel }}" required>
                                    @foreach (KitchenRecipe::UNITS as $u)
                                        <option value="{{ $u }}" @selected($u === 'g')>{{ $u }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-1.5">
                                <input type="number" step="0.01" min="0" max="100" name="lines[0][yield_pct]" value="100"
                                       class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring">
                            </td>
                            <td class="px-3 py-1.5 text-right">
                                <button type="button" data-remove-line class="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-accent">Remove</button>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-2">
            <button type="button" data-add-line
                    class="rounded-lg border border-border px-3 py-1.5 text-sm hover:bg-accent">Add ingredient</button>
        </div>
    </div>

    <div>
        <p class="mb-1.5 text-xs font-medium">Composed recipes (optional)</p>
        <div class="grid gap-2 md:grid-cols-2">
            @foreach ($allRecipes as $ar)
                @if (!$editing || $ar->id !== $recipe->id)
                    <label class="flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-sm">
                        <input type="checkbox" name="composed[]" value="{{ $ar->id }}" class="size-4 rounded border-input"
                               @checked(in_array($ar->id, $comp))>
                        <span class="flex flex-col">
                            <span class="font-medium">{{ $ar->name }}</span>
                            <span class="text-xs text-muted-foreground">{{ $ar->portions }} portions &middot; {{ $money($ar->costPerPortion()) }}/portion</span>
                        </span>
                    </label>
                @endif
            @endforeach
            @if (($allRecipes->count() <= 1) && !$allRecipes->firstWhere('id', $editing ? $recipe->id : null))
                <p class="col-span-2 text-xs text-muted-foreground">No other recipes yet to compose from.</p>
            @endif
        </div>
        <p class="mt-1 text-xs text-muted-foreground">Composed sub-recipes inherit their ingredient cost; ingredient list is additive.</p>
    </div>

    <div>
        <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
            {{ $editing ? 'Update recipe' : 'Save recipe' }}
        </button>
        <a href="{{ route('kitchen.recipes') }}"
           class="ml-2 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Cancel</a>
    </div>
</form>

<div class="hidden" data-recipe-template>
    <tr data-recipe-line>
        <td class="px-3 py-1.5">
            <select data-recipe-field="item_id" class="{{ $sel }}" required>
                <option value="">Select item</option>
                @foreach ($items as $item)
                    <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->store?->name }}) &middot; {{ $item->unit }}</option>
                @endforeach
            </select>
        </td>
        <td class="px-3 py-1.5">
            <input type="number" step="0.001" min="0" data-recipe-field="qty" value="0"
                   class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring" required>
        </td>
        <td class="px-3 py-1.5">
            <select data-recipe-field="unit" class="{{ $sel }}" required>
                @foreach (KitchenRecipe::UNITS as $u)
                    <option value="{{ $u }}" @selected($u === 'g')>{{ $u }}</option>
                @endforeach
            </select>
        </td>
        <td class="px-3 py-1.5">
            <input type="number" step="0.01" min="0" max="100" data-recipe-field="yield_pct" value="100"
                   class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring">
        </td>
        <td class="px-3 py-1.5 text-right">
            <button type="button" data-remove-line class="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-accent">Remove</button>
        </td>
    </tr>
</div>

@once
    @push('scripts')
        <script>
            (function () {
                function reindexLines(form) {
                    const rows = form.querySelectorAll('[data-recipe-line]');
                    rows.forEach((row, i) => {
                        row.querySelectorAll('[data-recipe-field]').forEach((el) => {
                            el.name = `lines[${i}][${el.dataset.recipeField}]`;
                        });
                        row.querySelectorAll('select[name], input[name]').forEach((el) => {
                            if (el.dataset.recipeField) return;
                            const m = el.name.match(/lines\[(\d+)\]/);
                            if (m) el.name = el.name.replace(/lines\[\d+\]/, `lines[${i}]`);
                        });
                    });
                }

                document.addEventListener('click', function (e) {
                    const add = e.target.closest('[data-add-line]');
                    if (add) {
                        const form = add.closest('form');
                        const body = form.querySelector('[data-recipe-lines]');
                        const tpl = form.parentElement.querySelector('[data-recipe-template]') || document.querySelector('[data-recipe-template]');
                        if (!body || !tpl) return;
                        const node = tpl.firstElementChild.cloneNode(true);
                        body.appendChild(node);
                        reindexLines(form);
                        return;
                    }
                    const rm = e.target.closest('[data-remove-line]');
                    if (rm) {
                        const form = rm.closest('form');
                        const body = form.querySelector('[data-recipe-lines]');
                        if (body.querySelectorAll('[data-recipe-line]').length <= 1) return;
                        rm.closest('[data-recipe-line]').remove();
                        reindexLines(form);
                    }
                });
            })();
        </script>
    @endpush
@endonce