@php
    $assigned = $assigned ?? [];
    $isSelf = (int) auth()->id() === (int) $user->id;

    $statusPill = $user->active
        ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
        : 'bg-red-50 text-red-700 border-red-200';
@endphp

<x-layouts.app title="Benutzer bearbeiten" userRole="Bezirksstelle">
    <div class="flex flex-col gap-4">

        <div class="flex items-end justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">{{ $user->name }}</div>
                <div class="mt-1 text-sm text-rk-slate">{{ $user->email }}</div>
                <div class="mt-2 flex flex-wrap gap-2">
                    <span
                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $statusPill }}">
                        {{ $user->active ? 'Aktiv' : 'Inaktiv' }}
                    </span>
                    <span
                        class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border bg-neutral-100 text-rk-slate border-rk">
                        {{ $user->district_id ? 'Bezirksstelle' : 'Ortstelle' }}
                    </span>
                    @if ($user->station)
                        <span
                            class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border bg-neutral-100 text-rk-slate border-rk">
                            {{ $user->station->name }}
                        </span>
                    @endif
                </div>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('security.users.index') }}"
                    class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                    Zurück
                </a>
                <button type="submit" form="userForm"
                    class="rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark">
                    Speichern
                </button>
            </div>
        </div>

        @if (session('success'))
            <div class="rounded-3xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800">
                <div class="font-semibold">{{ session('success') }}</div>
            </div>
        @endif

        <form id="userForm" method="POST" action="{{ route('security.users.update', $user) }}"
            class="rounded-3xl bg-white border border-rk p-6 shadow-sm space-y-6">
            @csrf

            <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">

                <div class="xl:col-span-1 rounded-3xl border border-rk p-5">
                    <div class="text-sm font-semibold">Status</div>
                    <div class="mt-1 text-xs text-rk-slate">Benutzer aktivieren/deaktivieren.</div>

                    <div class="mt-4 rounded-2xl border border-rk bg-neutral-50 p-4">
                        <label class="flex items-start gap-3">
                            <input type="hidden" name="active" value="0">
                            <input type="checkbox" name="active" value="1" @checked(old('active', (int) $user->active) === 1)
                                class="mt-1 h-4 w-4 rounded border-rk">
                            <span>
                                <div class="text-sm font-semibold">Aktiv</div>
                                <div class="mt-1 text-xs text-rk-slate">
                                    @if ($isSelf)
                                        Du kannst dich nicht selbst deaktivieren.
                                    @else
                                        Inaktive Benutzer können sich nicht einloggen.
                                    @endif
                                </div>
                            </span>
                        </label>
                    </div>

                    @if ($isSelf)
                        <div class="mt-3 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-xs text-amber-900">
                            <div class="font-semibold">Hinweis</div>
                            Du bearbeitest deinen eigenen Benutzer. Kritische Änderungen werden blockiert.
                        </div>
                    @endif
                </div>

                <div class="xl:col-span-2 rounded-3xl border border-rk p-5">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-sm font-semibold">Rollen</div>
                            <div class="mt-1 text-xs text-rk-slate">Rollen zuweisen. (Mehrfach möglich.)</div>
                        </div>
                        <div class="flex gap-2">
                            <button type="button" id="selectAll"
                                class="rounded-2xl border border-rk bg-white px-3 py-2 text-xs font-semibold hover:bg-neutral-50">
                                Alle
                            </button>
                            <button type="button" id="selectNone"
                                class="rounded-2xl border border-rk bg-white px-3 py-2 text-xs font-semibold hover:bg-neutral-50">
                                Keine
                            </button>
                        </div>
                    </div>

                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
                        @foreach ($roles as $r)
                            @php
                                $checked = in_array($r->id, old('roles', $assigned), true);
                                $scopePill = match ($r->scope) {
                                    'district' => 'bg-blue-50 text-blue-700 border-blue-200',
                                    'station' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
                                    'global' => 'bg-neutral-100 text-rk-slate border-rk',
                                    default => 'bg-neutral-100 text-rk-slate border-rk',
                                };
                            @endphp
                            <label
                                class="flex items-start gap-3 rounded-2xl border border-rk bg-white p-3 hover:bg-neutral-50">
                                <input type="checkbox" class="roleBox mt-1 h-4 w-4 rounded border-rk" name="roles[]"
                                    value="{{ $r->id }}" @checked($checked)>
                                <span class="min-w-0">
                                    <div class="flex items-center gap-2">
                                        <div class="text-sm font-semibold">{{ $r->label ?? $r->name }}</div>
                                        <span
                                            class="inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px] font-semibold border {{ $scopePill }}">
                                            {{ $r->scope ?? '—' }}
                                        </span>
                                    </div>
                                    <div class="mt-0.5 text-xs text-rk-slate">{{ $r->name }}</div>
                                </span>
                            </label>
                        @endforeach
                    </div>

                    @error('roles')
                        <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="flex justify-end gap-2 pt-2">
                <a href="{{ route('security.users.index') }}"
                    class="rounded-2xl border border-rk bg-white px-5 py-3 text-sm font-semibold hover:bg-neutral-50">
                    Abbrechen
                </a>
                <button class="rounded-2xl bg-rk-red px-5 py-3 text-sm font-semibold text-white hover:bg-rk-red-dark">
                    Speichern
                </button>
            </div>
        </form>

        <script>
            (function() {
                const allBtn = document.getElementById('selectAll');
                const noneBtn = document.getElementById('selectNone');
                const boxes = () => Array.from(document.querySelectorAll('.roleBox'));

                allBtn?.addEventListener('click', () => boxes().forEach(b => b.checked = true));
                noneBtn?.addEventListener('click', () => boxes().forEach(b => b.checked = false));
            })();
        </script>
    </div>
</x-layouts.app>