@php
    $isAdmin = auth()->check() ? auth()->user()->isDistrictUser() : false;

    $suggestedItems = $suggestedItems ?? collect();
    $prefill = $prefill ?? request('prefill', '');

    $priorities = [
        'low' => 'Niedrig',
        'medium' => 'Mittel',
        'high' => 'Hoch',
    ];

    $urgencies = [
        'normal' => 'Normal',
        'urgent' => 'Dringend',
        'immediate' => 'Sofort',
    ];

    // Für JS: Produkte+Varianten als Array
    $productPayload = $products
        ->map(function ($p) {
            return [
                'id' => $p->id,
                'name' => $p->name,
                'has_variants' => (bool) $p->has_variants,
                'variants' => $p->variants->map(fn($v) => ['id' => $v->id, 'name' => $v->name])->values(),
            ];
        })
        ->values();

    // Prefill payload: suggestedItems -> JS
    $suggestedPayload = $suggestedItems
        ->map(function ($inv) {
            return [
                'product_id' => $inv->product_id,
                'variant_id' => $inv->variant_id,
                'quantity' => (int) ($inv->suggest_qty ?? ($inv->quantity ?? 1)),
                'note' => '',
                'level' => (string) ($inv->level ?? ''),
            ];
        })
        ->values();

    // OLD payload (bei Validation-Error): hat Priorität gegenüber Prefill
    $oldItems = collect(old('items', []))
        ->map(function ($it) {
            return [
                'product_id' => $it['product_id'] ?? null,
                'variant_id' => $it['variant_id'] ?? null,
                'quantity' => isset($it['quantity']) ? (int) $it['quantity'] : 1,
                'note' => $it['note'] ?? '',
                'level' => '', // old-items haben kein level
            ];
        })
        ->values();

    $initialItemsPayload = $oldItems->count() > 0 ? $oldItems : $suggestedPayload;
@endphp

<x-layouts.app title="Bestellung erstellen" userRole="{{ $isAdmin ? 'Bezirksstelle' : 'Ortstelle' }}">
    <div class="flex flex-col gap-4">

        {{-- Header --}}
        <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Bestellung erstellen</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Artikel auswählen, Mengen definieren, Priorität &amp; Dringlichkeit setzen.
                </div>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('orders.index') }}" class="btn-rk-soft">
                    Abbrechen
                </a>
                <button form="order-form" type="submit" class="btn-rk-soft-green">
                    Bestellung speichern
                </button>
            </div>
        </div>

        {{-- Prefill hint --}}
        @if (!$isAdmin)
            <div class="rounded-3xl border border-rk bg-white p-5 shadow-sm">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">Auto-Vorschlag: Unter Mindestbestand</div>
                        <div class="mt-1 text-xs text-rk-slate">
                            Füllt Positionen automatisch vor, wenn der Bestand unter dem Mindestbestand liegt.
                        </div>
                        <div class="mt-2 text-xs text-rk-slate">
                            @if ($prefill === 'under_min' && $suggestedItems->count() > 0)
                                Vorbefüllt: <span
                                    class="font-semibold text-rk-charcoal">{{ $suggestedItems->count() }}</span>
                                Position(en).
                            @elseif ($prefill === 'under_min')
                                Keine Positionen unter Mindestbestand gefunden.
                            @else
                                Klicke rechts, um automatisch vorzubefüllen.
                            @endif

                            @if ($oldItems->count() > 0)
                                <span class="ml-1">· Hinweis: Deine Eingaben wurden wiederhergestellt.</span>
                            @endif
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <a href="{{ route('orders.create', ['prefill' => 'under_min']) }}" class="btn-rk-soft-green">
                            Unter Mindestbestand vorfüllen
                        </a>
                    </div>
                </div>
            </div>
        @endif

        @if ($errors->any())
            <div class="rounded-3xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
                <div class="font-semibold">Bitte prüfe die Eingaben:</div>
                <ul class="mt-2 list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form id="order-form" method="POST" action="{{ route('orders.store') }}"
            class="grid grid-cols-1 xl:grid-cols-3 gap-4">
            @csrf

            {{-- Left: Items --}}
            <div class="xl:col-span-2 rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                <div
                    class="p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-b border-rk bg-white">
                    <div>
                        <div class="flex items-center gap-2">
                            <div class="text-sm font-semibold">Positionen</div>
                            <span id="items-count"
                                class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border bg-neutral-50 text-rk-slate border-rk">
                                0
                            </span>
                        </div>
                        <div class="mt-1 text-xs text-rk-slate">
                            Füge Artikel hinzu und setze Mengen. Mindestens 1 Position ist erforderlich.
                        </div>
                    </div>

                    <button type="button" id="add-item" class="btn-rk-soft">
                        + Position hinzufügen
                    </button>
                </div>

                <div class="px-5 py-5">
                    <div id="items" class="space-y-3"></div>

                    <div id="items-empty"
                        class="hidden mt-4 rounded-2xl border border-rk bg-neutral-50 p-4 text-sm text-rk-slate">
                        Keine Positionen. Klicke auf „Position hinzufügen“.
                    </div>

                    <div class="mt-4 rounded-2xl border border-rk bg-neutral-50 p-4 text-sm text-rk-red">
                        Tipp: Nutze „Sofort“ nur für echte Notfälle.
                    </div>
                </div>
            </div>

            {{-- Right: Meta --}}
            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-sm font-semibold">Details</div>

                <div class="mt-4 space-y-4">
                    <div>
                        <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Priorität</label>
                        <select name="priority"
                            class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                            @foreach ($priorities as $k => $label)
                                <option value="{{ $k }}" @selected(old('priority', 'medium') === $k)>{{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label
                            class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Dringlichkeit</label>
                        <select name="urgency"
                            class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                            @foreach ($urgencies as $k => $label)
                                <option value="{{ $k }}" @selected(old('urgency', 'normal') === $k)>{{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">
                            Kommentar (optional)
                        </label>
                        <textarea name="comment" rows="5"
                            class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm outline-none focus:ring-2 ring-rk focus:border-transparent"
                            placeholder="Zusatzinfo für Bezirksstelle…">{{ old('comment') }}</textarea>
                    </div>
                </div>

                <div class="mt-6 rounded-2xl border border-rk bg-neutral-50 p-4 text-sm text-rk-slate">
                    Nach dem Speichern: Status = <span class="font-semibold text-rk-charcoal">Aufgegeben</span>.
                </div>
            </div>
        </form>
    </div>

    <script>
        (function() {
            const products = @json($productPayload);
            const suggested = @json($suggestedPayload);
            const initialItems = @json($initialItemsPayload);

            const itemsEl = document.getElementById('items');
            const emptyEl = document.getElementById('items-empty');
            const countEl = document.getElementById('items-count');
            const addBtn = document.getElementById('add-item');

            let idx = 0;

            const el = (tag, attrs = {}, children = []) => {
                const node = document.createElement(tag);
                Object.entries(attrs).forEach(([k, v]) => {
                    if (k === 'class') node.className = v;
                    else if (k === 'html') node.innerHTML = v;
                    else node.setAttribute(k, v);
                });
                children.forEach(c => node.appendChild(c));
                return node;
            };

            const escapeHtml = (s) => (s ?? '').toString()
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#039;');

            const optionHtml = (list, placeholder = null) => {
                const opts = [];
                if (placeholder) opts.push(`<option value="">${escapeHtml(placeholder)}</option>`);
                for (const x of list) opts.push(`<option value="${x.id}">${escapeHtml(x.name)}</option>`);
                return opts.join('');
            };

            const findProduct = (id) => products.find(p => String(p.id) === String(id));

            function updateUiState() {
                const count = itemsEl.querySelectorAll('[data-item-row="1"]').length;
                countEl.textContent = String(count);
                emptyEl.classList.toggle('hidden', count !== 0);

                // Buttons: Entfernen nur sperren, wenn es die letzte Position wäre (UX)
                const removeBtns = itemsEl.querySelectorAll('[data-remove-btn="1"]');
                removeBtns.forEach(btn => {
                    btn.disabled = (count <= 1);
                    btn.classList.toggle('opacity-50', count <= 1);
                    btn.classList.toggle('cursor-not-allowed', count <= 1);
                });
            }

            function levelBadge(level) {
                const lvl = (level || '').toLowerCase();
                if (!lvl) return '';
                const cls = (lvl === 'kritisch') ?
                    'bg-red-50 text-red-700 border-red-200' :
                    'bg-amber-50 text-amber-700 border-amber-200';

                const label = (lvl === 'kritisch') ? 'kritisch' : 'warn';

                return `
                    <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border ${cls}">
                        ${escapeHtml(label)} (Mindestbestand)
                    </span>
                `;
            }

            function buildRow(initial = {}) {
                const rowIndex = idx++;

                const wrapper = el('div', {
                    class: 'rounded-3xl border border-rk p-4 bg-white',
                    'data-item-row': '1',
                });

                const top = el('div', {
                    class: 'flex flex-col lg:flex-row lg:items-end gap-3'
                });

                // Product
                const productWrap = el('div', {
                    class: 'flex-1'
                });
                productWrap.appendChild(el('label', {
                    class: 'text-xs font-semibold text-rk-slate/80 uppercase tracking-wider',
                    html: 'Artikel'
                }));

                const productSelect = el('select', {
                    class: 'mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm',
                    name: `items[${rowIndex}][product_id]`,
                });
                productSelect.innerHTML = optionHtml(products, 'Bitte wählen…');
                if (initial.product_id) productSelect.value = initial.product_id;
                productWrap.appendChild(productSelect);

                // Variant
                const variantWrap = el('div', {
                    class: 'flex-1'
                });
                variantWrap.appendChild(el('label', {
                    class: 'text-xs font-semibold text-rk-slate/80 uppercase tracking-wider',
                    html: 'Variante'
                }));

                const variantSelect = el('select', {
                    class: 'mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm',
                    name: `items[${rowIndex}][variant_id]`,
                });
                variantSelect.innerHTML = `<option value="">—</option>`;
                variantWrap.appendChild(variantSelect);

                // Quantity
                const qtyWrap = el('div', {
                    class: 'w-full lg:w-40'
                });
                qtyWrap.appendChild(el('label', {
                    class: 'text-xs font-semibold text-rk-slate/80 uppercase tracking-wider',
                    html: 'Menge'
                }));

                const qtyInput = el('input', {
                    type: 'number',
                    min: '1',
                    value: initial.quantity ?? 1,
                    class: 'mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm outline-none focus:ring-2 ring-rk focus:border-transparent',
                    name: `items[${rowIndex}][quantity]`,
                });
                qtyWrap.appendChild(qtyInput);

                // Right controls
                const rightWrap = el('div', {
                    class: 'w-full lg:w-auto lg:ml-auto flex flex-col items-end gap-2'
                });

                const badge = el('div', {
                    class: 'mt-2 lg:mt-0',
                    html: levelBadge(initial.level)
                });
                rightWrap.appendChild(badge);

                const removeBtn = el('button', {
                    type: 'button',
                    class: 'rounded-2xl border border-rk bg-white px-4 py-3 text-sm font-semibold hover:bg-neutral-50 transition-rk hover:shadow-button',
                    'data-remove-btn': '1',
                });
                removeBtn.textContent = 'Entfernen';
                removeBtn.addEventListener('click', () => {
                    const count = itemsEl.querySelectorAll('[data-item-row="1"]').length;
                    if (count <= 1) return; // letzte Position nicht entfernen
                    wrapper.remove();
                    updateUiState();
                });
                rightWrap.appendChild(removeBtn);

                top.appendChild(productWrap);
                top.appendChild(variantWrap);
                top.appendChild(qtyWrap);
                top.appendChild(rightWrap);

                // Note
                const note = el('div', {
                    class: 'mt-4'
                });
                note.appendChild(el('label', {
                    class: 'text-xs font-semibold text-rk-slate/80 uppercase tracking-wider',
                    html: 'Notiz (optional)'
                }));

                const noteInput = el('input', {
                    type: 'text',
                    class: 'mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm outline-none focus:ring-2 ring-rk focus:border-transparent',
                    placeholder: 'z.B. Ersatz für Variante X…',
                    name: `items[${rowIndex}][note]`,
                    value: initial.note ?? '',
                });
                note.appendChild(noteInput);

                function syncVariants() {
                    const p = findProduct(productSelect.value);

                    if (!p || !p.has_variants || !p.variants || p.variants.length === 0) {
                        variantSelect.innerHTML = `<option value="">—</option>`;
                        variantSelect.disabled = true;
                        variantSelect.classList.add('opacity-70');
                        return;
                    }

                    variantSelect.disabled = false;
                    variantSelect.classList.remove('opacity-70');
                    variantSelect.innerHTML = optionHtml(p.variants, 'Bitte wählen…');

                    if (initial.variant_id) variantSelect.value = initial.variant_id;
                }

                productSelect.addEventListener('change', () => {
                    initial.variant_id = null;
                    syncVariants();
                });

                syncVariants();

                wrapper.appendChild(top);
                wrapper.appendChild(note);

                return wrapper;
            }

            addBtn.addEventListener('click', () => {
                itemsEl.prepend(buildRow());
                updateUiState();
            });

            // INITIAL RENDER:
            // 1) old(items) -> initialItemsPayload
            // 2) else: suggested (under_min)
            // 3) else: 1 empty row
            if (Array.isArray(initialItems) && initialItems.length > 0) {
                for (const s of initialItems) itemsEl.appendChild(buildRow(s));
            } else if (Array.isArray(suggested) && suggested.length > 0) {
                for (const s of suggested) itemsEl.appendChild(buildRow(s));
            } else {
                itemsEl.appendChild(buildRow());
            }

            updateUiState();
        })();
    </script>
</x-layouts.app>