@php
    $q = $q ?? request('q', '');
    $type = $type ?? request('type', 'alle');
    $from = $from ?? request('from', '');
    $to = $to ?? request('to', '');

    $isDistrict = auth()->user()->isDistrictUser();

    $types = [
        'alle' => 'Alle',
        'in' => 'Zugang',
        'out' => 'Verbrauch',
        'adjust' => 'Korrektur',
    ];

    $typePills = [
        'in' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
        'out' => 'bg-red-50 text-red-700 border-red-200',
        'adjust' => 'bg-neutral-100 text-rk-slate border-rk',
    ];

    $reasonLabels = [
        'verbrauch_einsatz' => ['label' => 'Verbrauch (Einsatz)', 'hint' => 'Material im Einsatz verbraucht'],
        'korrektur' => ['label' => 'Korrektur Lager', 'hint' => 'Bestand wurde auf Inhalt kontrolliert'],
        'order_received' => ['label' => 'Bestellung erhalten', 'hint' => 'Wareneingang aus Bestellung'],
    ];

    $prettyReason = function ($m) use ($reasonLabels) {
        $key = (string) ($m->reason ?? '');
        $map = $reasonLabels[$key] ?? null;

        // Falls reason nicht gemappt ist: Original anzeigen
        return [
            'label' => $map['label'] ?? ($key !== '' ? $key : '—'),
            'hint' => $map['hint'] ?? null,
        ];
    };

    $deltaText = fn($d) => ((int) $d > 0 ? '+' : '') . (int) $d;
    $deltaPill = function ($m) use ($typePills) {
        // Delta Badge soll primär nach TYPE färben (konstant), nicht nach Vorzeichen.
        return $typePills[$m->type] ?? 'bg-neutral-100 text-rk-slate border-rk';
    };

    $typeLabel = [
        'in' => 'Zugang',
        'out' => 'Verbrauch',
        'adjust' => 'Korrektur',
    ];
@endphp

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

        {{-- Header --}}
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Buchungen</div>
                <div class="mt-1 text-sm text-rk-slate">Zugänge, Verbräuche & Korrekturen inkl. Audit-Trail.</div>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('movements.index', request()->query()) }}" class="btn-rk-soft">
                    Aktualisieren
                </a>

                @if (auth()->user()->isStationUser())
                    <a href="{{ route('movements.create') }}" class="btn-rk-soft-green">
                        Buchung erstellen
                    </a>
                @endif
            </div>
        </div>

        {{-- Filter --}}
        <form method="GET" action="{{ route('movements.index') }}"
            class="rounded-3xl bg-white border border-rk p-4 shadow-sm">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 lg:items-end">
                <div class="lg:col-span-5">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Suche</label>
                    <input name="q" value="{{ $q }}"
                        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="Artikel, Variante, Grund…">
                </div>

                <div class="lg:col-span-2">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Typ</label>
                    <select name="type" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        @foreach ($types as $k => $lbl)
                            <option value="{{ $k }}" @selected($type === $k)>{{ $lbl }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="lg:col-span-2">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Von</label>
                    <input name="from" type="date" value="{{ $from }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                </div>

                <div class="lg:col-span-2">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Bis</label>
                    <input name="to" type="date" value="{{ $to }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                </div>

                <div class="lg:col-span-1 flex gap-2">
                    <a href="{{ route('movements.index') }}"
                        class="w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm font-semibold hover:bg-neutral-50 text-center transition-rk hover:shadow-soft">
                        Reset
                    </a>
                </div>

                <div class="lg:col-span-12 flex gap-2">
                    <button
                        class="rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark transition-rk hover:shadow-soft">
                        Filtern
                    </button>

                    <div class="ml-auto flex flex-wrap items-center gap-2">
                        <span
                            class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Schnellfilter:</span>

                        <a href="{{ route('movements.index', array_filter(['type' => 'alle', 'q' => $q, 'from' => $from, 'to' => $to])) }}"
                            class="rounded-full px-3 py-1 text-xs font-semibold border {{ $type === 'alle' ? 'bg-rk-red text-white border-transparent' : 'btn-rk-soft' }}">
                            Alle
                        </a>
                        @foreach (['in', 'out', 'adjust'] as $k)
                            <a href="{{ route('movements.index', array_filter(['type' => $k, 'q' => $q, 'from' => $from, 'to' => $to])) }}"
                                class="rounded-full px-3 py-1 text-xs font-semibold border {{ $type === $k ? 'bg-rk-red text-white border-transparent' : 'btn-rk-soft' }}">
                                {{ $types[$k] }}
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </form>

        {{-- Table --}}
        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="px-5 py-4 flex items-center justify-between gap-3 border-b border-rk bg-white">
                <div>
                    <div class="text-sm font-semibold">Übersicht</div>
                    <div class="text-xs text-rk-slate">
                        {{ $movements->total() }} Buchungen
                        @if ($type !== 'alle')
                            · Filter: <span class="font-semibold">{{ $types[$type] ?? $type }}</span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="text-xs text-rk-slate/80 uppercase tracking-wider bg-neutral-50">
                        <tr class="border-t border-b border-rk">
                            <th class="py-3 px-5 text-left">Zeitpunkt</th>
                            <th class="py-3 px-5 text-left">Artikel</th>
                            <th class="py-3 px-5 text-left">Variante</th>
                            <th class="py-3 px-5 text-left">Typ</th>
                            <th class="py-3 px-5 text-left">Grund</th>
                            <th class="py-3 px-5 text-right">Delta</th>
                            @if ($isDistrict)
                                <th class="py-3 px-5 text-left">Ortstelle</th>
                            @endif
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        @forelse($movements as $m)
                            @php
                                $pill = $deltaPill($m);
                                $tLbl = $typeLabel[$m->type] ?? $m->type;
                                $note = data_get($m->meta, 'note');
                            @endphp

                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-5 text-rk-slate whitespace-nowrap">
                                    {{ optional($m->booked_at)->format('d.m.Y H:i') ?? '—' }}
                                </td>

                                <td class="py-4 px-5 font-medium">
                                    {{ $m->product?->name ?? '—' }}
                                </td>

                                <td class="py-4 px-5 text-rk-slate">
                                    {{ $m->variant?->name ?? '—' }}
                                </td>

                                <td class="py-4 px-5">
                                    <span
                                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $pill }}">
                                        {{ $tLbl }}
                                    </span>
                                </td>
                                @php
                                    $r = $prettyReason($m);
                                    $note = data_get($m->meta, 'note');
                                @endphp

                                <td class="py-4 px-5">
                                    <div class="font-medium">{{ $r['label'] }}</div>

                                    @if (!empty($r['hint']))
                                        <div class="mt-1 text-xs text-rk-slate">{{ $r['hint'] }}</div>
                                    @endif

                                    @if (!empty($note))
                                        <div class="mt-1 text-xs text-rk-slate">{{ $note }}</div>
                                    @endif
                                </td>

                                <td class="py-4 px-5 text-right whitespace-nowrap">
                                    <span
                                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $pill }}">
                                        {{ $deltaText($m->quantity_delta) }}
                                    </span>
                                </td>

                                @if ($isDistrict)
                                    <td class="py-4 px-5 text-rk-slate">
                                        {{ $m->station?->name ?? '—' }}
                                    </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ $isDistrict ? 7 : 6 }}" class="py-10 px-5 text-center text-rk-slate">
                                    Keine Buchungen.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="px-5 py-4 border-t border-rk bg-white">
                {{ $movements->onEachSide(1)->links() }}
            </div>
        </div>

    </div>
</x-layouts.app>