{{-- resources/views/users/index.blade.php --}}

@php
    $vehicle = app(\App\Support\VehicleContext::class)->current();

    $title = ($vehicle?->call_sign ?? 'RTW') . ' – Benutzer';
    $pageTitle = 'Benutzer';
    $pageSubtitle = $vehicle
        ? trim(($vehicle->call_sign ?? '') . ' • ' . ($vehicle->license_plate ?? '') . ' • Benutzer & Rollen')
        : 'Benutzer & Rollen';
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
        {{-- Header --}}
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
            <h1 class="text-xl font-semibold text-gray-900">Benutzer</h1>

            {{-- Desktop Actions --}}
            <div class="hidden sm:flex items-center gap-2">
                <a href="{{ route('invitations.index') }}"
                    class="rounded-xl px-3 py-2 text-sm font-semibold text-gray-700 ring-1 ring-gray-200 hover:bg-gray-50">
                    Einladungen
                </a>
                <a href="{{ route('invitations.create') }}"
                    class="inline-flex items-center rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-600">
                    Einladung senden
                </a>
            </div>

            {{-- Mobile Actions --}}
            <div class="grid grid-cols-2 gap-2 sm:hidden">
                <a href="{{ route('invitations.index') }}"
                    class="w-full rounded-xl px-3 py-2 text-sm font-semibold text-gray-700 ring-1 ring-gray-200 hover:bg-gray-50 text-center">
                    Einladungen
                </a>
                <a href="{{ route('invitations.create') }}"
                    class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-600">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        aria-hidden="true">
                        <path d="M12 5v14M5 12h14" />
                    </svg>
                    <span class="truncate">Einladung</span>
                </a>
            </div>
        </div>

        @if (session('status'))
            <div class="mb-4 rounded-xl bg-green-50 p-4 text-sm text-green-700 ring-1 ring-green-100">
                {{ session('status') }}
            </div>
        @endif

        <div class="bg-white rounded-2xl shadow-sm ring-1 ring-black/5 overflow-hidden">
            <div class="divide-y divide-gray-100">
                @forelse($users as $u)
                    <div class="p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        {{-- Left --}}
                        <div class="min-w-0">
                            <div class="flex items-center gap-2 min-w-0">
                                <div class="text-sm font-semibold text-gray-900 truncate">{{ $u->name }}</div>

                                @if (!$u->is_active)
                                    <span
                                        class="inline-flex items-center rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-red-700 shrink-0">
                                        deaktiviert
                                    </span>
                                @endif
                            </div>

                            <div class="mt-1 text-xs text-gray-500 truncate">{{ $u->email }}</div>

                            <div class="mt-2 flex flex-wrap gap-2">
                                <span
                                    class="inline-flex items-center rounded-full bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-700">
                                    {{ $u->roles->first()?->name ?? '—' }}
                                </span>
                                <span
                                    class="inline-flex items-center rounded-full bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-700">
                                    Fahrzeuge: {{ $u->vehicles_count }}
                                </span>
                            </div>
                        </div>

                        {{-- Right Actions (mobile: full width, wrapping) --}}
                        <div
                            class="w-full sm:w-auto shrink-0 flex flex-wrap items-center justify-start sm:justify-end gap-2">
                            <a href="{{ route('users.edit', $u) }}"
                                class="inline-flex w-full sm:w-auto items-center justify-center rounded-xl px-3 py-2 text-sm font-semibold text-gray-700 ring-1 ring-gray-200 hover:bg-gray-50">
                                Bearbeiten
                            </a>

                            <form method="POST" action="{{ route('users.reset', $u) }}"
                                onsubmit="return confirm('Reset-Link wirklich senden?');" class="w-full sm:w-auto">
                                @csrf
                                <button type="submit"
                                    class="inline-flex w-full sm:w-auto items-center justify-center rounded-xl px-3 py-2 text-sm font-semibold text-gray-700 ring-1 ring-gray-200 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                                    @disabled(!$u->is_active)>
                                    Reset-Link
                                </button>
                            </form>

                            @if ($u->is_active)
                                <form method="POST" action="{{ route('users.destroy', $u) }}"
                                    onsubmit="return confirm('Benutzer wirklich deaktivieren?');"
                                    class="w-full sm:w-auto">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                        class="inline-flex w-full sm:w-auto items-center justify-center rounded-xl px-3 py-2 text-sm font-semibold text-red-700 ring-1 ring-red-200 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
                                        @disabled(auth()->id() === $u->id)>
                                        Deaktivieren
                                    </button>
                                </form>
                            @else
                                <form method="POST" action="{{ route('users.reactivate', $u) }}"
                                    class="w-full sm:w-auto">
                                    @csrf
                                    <button type="submit"
                                        class="inline-flex w-full sm:w-auto items-center justify-center rounded-xl px-3 py-2 text-sm font-semibold text-green-700 ring-1 ring-green-200 hover:bg-green-50">
                                        Reaktivieren
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="p-6 text-sm text-gray-600">Keine Benutzer vorhanden.</div>
                @endforelse
            </div>
        </div>

        <div class="mt-6 overflow-x-auto">
            {{ $users->links() }}
        </div>
    </div>
</x-ux-layout>