@php
    $isAdmin = ($mode ?? (auth()->user()?->isDistrictUser() ? 'bezirksstelle' : 'ortstelle')) === 'bezirksstelle';

    $kpis = $kpis ?? [
        'openOrders' => 0,
        'movements30' => 0,
        'critical' => 0,
    ];

    $recentOrders = $recentOrders ?? collect();
    $topWarnings = $topWarnings ?? collect();

    $statusLabel = [
        'placed' => 'Aufgegeben',
        'processing' => 'In Bearbeitung',
        'ready' => 'Abholbereit',
        'received' => 'Erhalten',
    ];

    $statusPill = [
        'placed' => 'bg-neutral-100 text-rk-slate border-rk',
        'processing' => 'bg-blue-50 text-blue-700 border-blue-200',
        'ready' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
        'received' => 'bg-neutral-100 text-rk-slate border-rk',
    ];

    $orderStatus = $orderStatus ?? request('status', 'alle');
    $statusOptions = ['alle' => 'Alle'] + ($statusLabel ?? []);
@endphp

<x-layouts.app :title="$isAdmin ? 'Dashboard · Bezirksstelle' : 'Dashboard · Ortstelle'" :userRole="$isAdmin ? 'Bezirksstelle' : 'Ortstelle'">
    <div class="flex flex-col gap-6">

        {{-- Header --}}
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Dashboard</div>
                <div class="mt-1 text-sm text-rk-slate">
                    {{ $isAdmin ? 'Überblick über Bestellungen, Lagerstände und Warnungen im Bezirk.' : 'Überblick über Bestellungen, Bestand und Buchungen deiner Ortstelle.' }}
                </div>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('orders.index') }}" class="btn-rk-soft">
                    Bestellungen
                </a>

                <a href="{{ $isAdmin ? route('district.inventory.index') : route('inventory.index') }}"
                    class="btn-rk-soft">
                    Lager
                </a>

                <a href="{{ route('movements.index') }}" class="btn-rk-soft">
                    Buchungen
                </a>
            </div>
        </div>

        {{-- KPI Row --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Offene Bestellungen</div>
                <div class="mt-2 text-3xl font-semibold">{{ (int) ($kpis['openOrders'] ?? 0) }}</div>
                <div class="mt-2 text-xs text-rk-slate">
                    {{ $isAdmin ? 'Bezirk gesamt' : 'Deine Ortstelle' }}
                </div>
            </div>

            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Buchungen (30 Tage)</div>
                <div class="mt-2 text-3xl font-semibold">{{ (int) ($kpis['movements30'] ?? 0) }}</div>
                <div class="mt-2 text-xs text-rk-slate">Zugänge, Verbräuche & Korrekturen</div>
            </div>

            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Kritische Bestände</div>
                <div class="mt-2 text-3xl font-semibold {{ (int) ($kpis['critical'] ?? 0) > 0 ? 'text-red-600' : '' }}">
                    {{ (int) ($kpis['critical'] ?? 0) }}
                </div>
                <div class="mt-2 text-xs text-rk-slate">
                    Unter Mindestbestand / Bestand 0
                </div>
            </div>
        </div>

        {{-- Widgets --}}
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
            {{-- Recent / Urgent Orders --}}
            <div class="xl:col-span-2 rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                <div class="p-5 flex items-center justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">
                            {{ $isAdmin ? 'Aktuelle Bestellungen' : 'Deine Bestellungen' }}</div>
                        <div class="text-xs text-rk-slate">Neueste Vorgänge (Live-Daten)</div>
                    </div>

                    @if (!$isAdmin)
                        <a href="{{ route('orders.create', ['prefill' => 'under_min']) }}" class="btn-rk-soft-green">
                            Neue Bestellung
                        </a>
                    @else
                        <a href="{{ route('orders.index') }}" class="btn-rk-soft-green">
                            Alle ansehen
                        </a>
                    @endif
                </div>

                <form method="GET" action="{{ route('dashboard') }}" class="px-5 pt-4">
                    <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
                        <div class="w-full sm:max-w-xs">
                            <label
                                class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Bestellstatus</label>
                            <select name="status"
                                class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                                @foreach ($statusOptions as $key => $lbl)
                                    <option value="{{ $key }}" @selected($orderStatus === $key)>
                                        {{ $lbl }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="flex gap-2">
                            <a href="{{ route('dashboard') }}"
                                class="rounded-2xl border border-rk bg-white px-4 py-3 text-sm font-semibold hover:bg-neutral-50 transition-rk">
                                Reset
                            </a>
                            <button
                                class="rounded-2xl bg-rk-red px-4 py-3 text-sm font-semibold text-white hover:bg-rk-red-dark transition-rk">
                                Filtern
                            </button>
                        </div>
                    </div>
                </form>
                <div class="px-5 pb-5 overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="text-xs text-rk-slate/80 uppercase tracking-wider">
                            <tr class="border-b border-rk">
                                <th class="py-3 text-left">Bestellung</th>
                                <th class="py-3 text-left">{{ $isAdmin ? 'Ortstelle' : 'Priorität' }}</th>
                                <th class="py-3 text-left">Status</th>
                                <th class="py-3 text-right">Aktion</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-[color:var(--rk-border)]">
                            @forelse($recentOrders as $o)
                                @php
                                    $s = (string) $o->status;
                                    $pill = $statusPill[$s] ?? 'bg-neutral-100 text-rk-slate border-rk';
                                    $label = $statusLabel[$s] ?? $s;
                                @endphp
                                <tr class="hover:bg-neutral-50">
                                    <td class="py-4 font-medium">#{{ $o->id }}</td>

                                    <td class="py-4">
                                        @if ($isAdmin)
                                            {{ $o->station?->name ?? '—' }}
                                        @else
                                            <span class="text-rk-slate">
                                                {{ strtoupper($o->priority ?? '—') }} ·
                                                {{ strtoupper($o->urgency ?? '—') }}
                                            </span>
                                        @endif
                                    </td>

                                    <td class="py-4">
                                        <span
                                            class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $pill }}">
                                            {{ $label }}
                                        </span>
                                    </td>

                                    <td class="py-4 px-6 text-right">
                                        <a href="{{ route('orders.show', ['order' => $o->id]) }}"
                                            class="inline-flex items-center justify-center h-10 w-10 rounded-2xl border border-rk bg-white hover:bg-neutral-50 transition-rk"
                                            title="Öffnen" aria-label="Öffnen">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                aria-hidden="true" class="text-rk-green">
                                                <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
                                                <circle cx="12" cy="12" r="3" />
                                            </svg>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="py-10 text-center text-rk-slate">Keine Bestellungen
                                        gefunden.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Warnings --}}
            <div class="rounded-3xl bg-white border border-rk shadow-sm">
                <div class="p-5 flex items-start justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">Kritische Lagerstände</div>
                        <div class="text-xs text-rk-slate">
                            {{ $isAdmin ? 'Bezirk: kritisch / warn' : 'Deine Ortstelle' }}
                        </div>
                    </div>

                    <a href="{{ $isAdmin ? route('district.inventory.warnings') : route('inventory.warnings') }}"
                        class="text-rk-slate hover:text-rk-red transition-rk font-semibold font-serif">
                        Alle →
                    </a>
                </div>

                <div class="px-5 pb-5 space-y-3">
                    @forelse($topWarnings as $w)
                        @php
                            $level = (string) ($w->level ?? 'warn');
                            $badge =
                                $level === 'kritisch'
                                    ? 'bg-red-50 text-red-700 border-red-200'
                                    : 'bg-amber-50 text-amber-700 border-amber-200';

                            $badgeLabel = $level === 'kritisch' ? 'Kritisch' : 'Warnung';
                        @endphp

                        <div class="rounded-2xl border border-rk p-4">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="text-sm font-semibold truncate">{{ $w->product?->name ?? '—' }}</div>
                                    <div class="mt-1 text-xs text-rk-slate">
                                        @if ($isAdmin)
                                            Ortstelle: {{ $w->station?->name ?? '—' }}
                                        @else
                                            Variante: {{ $w->variant?->name ?? '—' }}
                                        @endif
                                    </div>
                                </div>

                                <span
                                    class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $badge }}">
                                    {{ $badgeLabel }}
                                </span>
                            </div>

                            <div class="mt-3 text-sm text-rk-slate">
                                Ist: <span class="font-semibold text-rk-charcoal">{{ (int) $w->quantity }}</span>
                                · Mindest: <span
                                    class="font-semibold text-rk-charcoal">{{ (int) ($w->minimum_quantity ?? 0) }}</span>
                            </div>

                            <div class="mt-3">
                                <a href="{{ $isAdmin
                                    ? route('district.inventory.show', ['inventory' => $w->id])
                                    : route('inventory.show', ['inventory' => $w->id]) }}"
                                    class="text-sm text-rk-red font-semibold hover:underline">
                                    Position öffnen →
                                </a>
                            </div>
                        </div>
                    @empty
                        <div class="rounded-2xl border border-rk bg-neutral-50 p-4 text-sm text-rk-slate">
                            Keine Warnungen vorhanden.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Quick Actions --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <a href="{{ $isAdmin ? route('district.inventory.index') : route('inventory.index') }}"
                class="rounded-3xl bg-white border border-rk p-6 shadow-sm hover:bg-neutral-50">
                <div class="text-sm font-semibold">Lager verwalten</div>
                <div class="mt-1 text-xs text-rk-slate">
                    {{ $isAdmin ? 'Ortstellen auswählen & Mindestbestand setzen' : 'Bestand prüfen & Positionen öffnen' }}
                </div>
            </a>

            <a href="{{ route('orders.index') }}"
                class="rounded-3xl bg-white border border-rk p-6 shadow-sm hover:bg-neutral-50">
                <div class="text-sm font-semibold">Bestellungen</div>
                <div class="mt-1 text-xs text-rk-slate">Status, Prioritäten, Abholschein.</div>
            </a>

            <a href="{{ route('movements.index') }}"
                class="rounded-3xl bg-white border border-rk p-6 shadow-sm hover:bg-neutral-50">
                <div class="text-sm font-semibold">Buchungen</div>
                <div class="mt-1 text-xs text-rk-slate">Zugänge, Verbräuche, Korrekturen.</div>
            </a>
        </div>

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