@php
    $title = 'Benutzer – Verwaltung';
    $pageTitle = 'Benutzer';
    $pageSubtitle = 'Zugriffe für die Organisation verwalten';

    $roles = [
        'Chef' => 'bg-brand/10 text-brand ring-brand/15',
        'KFZ Beauftragter' => 'bg-yellow-50 text-yellow-800 ring-yellow-200',
        'Mitarbeiter' => 'bg-gray-100 text-gray-700 ring-gray-200',
    ];

    $users = [
        ['name' => 'Max Mustermann', 'email' => 'chef@firma.at', 'role' => 'Chef', 'status' => 'Aktiv'],
        ['name' => 'Markus Barth', 'email' => 'kfz@firma.at', 'role' => 'KFZ Beauftragter', 'status' => 'Aktiv'],
        ['name' => 'Lisa König', 'email' => 'lisa@firma.at', 'role' => 'Mitarbeiter', 'status' => 'Aktiv'],
        ['name' => 'Mitarbeiter 2', 'email' => 'team2@firma.at', 'role' => 'Mitarbeiter', 'status' => 'Deaktiviert'],
    ];
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div x-data="{ inviteOpen: false }" class="space-y-6">

        <!-- Toolbar -->
        <div class="rounded-2xl border border-gray-200 bg-white p-5">
            <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                <div class="flex flex-col gap-3 md:flex-row md:items-center">
                    <label class="relative w-full md:w-[420px]">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 21l-4.3-4.3" />
                                <circle cx="11" cy="11" r="7" />
                            </svg>
                        </span>
                        <input type="text" placeholder="Benutzer suchen…"
                            class="w-full rounded-xl border-gray-200 bg-gray-50 pl-9 pr-3 py-2.5 text-sm focus:border-brand focus:ring-brand">
                    </label>

                    <select
                        class="rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                        <option>Rolle: Alle</option>
                        <option>Chef</option>
                        <option>KFZ Beauftragter</option>
                        <option>Mitarbeiter</option>
                    </select>

                    <select
                        class="rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                        <option>Status: Alle</option>
                        <option>Aktiv</option>
                        <option>Deaktiviert</option>
                    </select>
                </div>

                <div class="flex items-center gap-2">
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                        Export
                    </button>
                    <button class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600"
                        @click="inviteOpen = true">
                        Benutzer einladen
                    </button>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="rounded-2xl border border-gray-200 bg-white overflow-hidden">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200">
                <h2 class="text-lg font-semibold">Benutzerliste</h2>
                <div class="text-sm text-gray-500">Organisation</div>
            </div>

            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-gray-600">
                    <tr>
                        <th class="px-5 py-3 text-left font-semibold">Name</th>
                        <th class="px-5 py-3 text-left font-semibold">E-Mail</th>
                        <th class="px-5 py-3 text-left font-semibold">Rolle</th>
                        <th class="px-5 py-3 text-left font-semibold">Status</th>
                        <th class="px-5 py-3 text-right font-semibold"></th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200">
                    @foreach ($users as $u)
                        <tr class="bg-white">
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="h-9 w-9 rounded-full bg-gray-200"></div>
                                    <div class="min-w-0">
                                        <div class="font-semibold truncate">{{ $u['name'] }}</div>
                                        <div class="text-xs text-gray-500 truncate">Zugriff: RTW-Daten</div>
                                    </div>
                                </div>
                            </td>

                            <td class="px-5 py-4">{{ $u['email'] }}</td>

                            <td class="px-5 py-4">
                                <span
                                    class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $roles[$u['role']] ?? 'bg-gray-100 text-gray-700 ring-gray-200' }}">
                                    {{ $u['role'] }}
                                </span>
                            </td>

                            <td class="px-5 py-4">
                                @if ($u['status'] === 'Aktiv')
                                    <span
                                        class="rounded-full bg-brand/10 px-2.5 py-1 text-xs font-semibold text-brand ring-1 ring-brand/15">
                                        Aktiv
                                    </span>
                                @else
                                    <span
                                        class="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">
                                        Deaktiviert
                                    </span>
                                @endif
                            </td>

                            <td class="px-5 py-4 text-right">
                                <div class="inline-flex items-center gap-2">
                                    <button
                                        class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                        Rolle ändern
                                    </button>
                                    <button
                                        class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                        {{ $u['status'] === 'Aktiv' ? 'Deaktivieren' : 'Aktivieren' }}
                                    </button>
                                    <button
                                        class="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs font-semibold text-red-700 hover:bg-red-100">
                                        Entfernen
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="px-5 py-4 border-t border-gray-200 text-xs text-gray-500">
                UX-only: Rollen/Status werden später mit Berechtigungen umgesetzt.
            </div>
        </div>

        <!-- Invite Modal -->
        <div x-show="inviteOpen" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center"
            aria-hidden="true">
            <div class="absolute inset-0 bg-gray-900/50" @click="inviteOpen = false"></div>

            <div x-show="inviteOpen" x-transition
                class="relative w-full max-w-2xl rounded-2xl bg-white shadow-xl ring-1 ring-black/5" role="dialog"
                aria-modal="true">
                <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
                    <div>
                        <div class="text-lg font-semibold">Benutzer einladen</div>
                        <div class="text-sm text-gray-600">Einladung per E-Mail (UX-only)</div>
                    </div>

                    <button
                        class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-white hover:bg-gray-50"
                        @click="inviteOpen = false" aria-label="Schließen">
                        <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M6 6l12 12M18 6l-12 12" />
                        </svg>
                    </button>
                </div>

                <div class="px-6 py-5">
                    <form class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">E-Mail</label>
                                <input type="email" placeholder="name@firma.at"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            </div>

                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Rolle</label>
                                <select
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                                    <option>Chef</option>
                                    <option>KFZ Beauftragter</option>
                                    <option>Mitarbeiter</option>
                                </select>
                            </div>

                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Nachricht (optional)</label>
                                <textarea rows="3" placeholder="Optionaler Einladungstext…"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white text-sm focus:border-brand focus:ring-brand"></textarea>
                            </div>

                            <div class="md:col-span-2 rounded-2xl border border-gray-200 bg-gray-50 p-4">
                                <div class="text-sm font-semibold">Berechtigungen (Vorschau)</div>
                                <ul class="mt-2 text-sm text-gray-600 list-disc pl-5 space-y-1">
                                    <li><b>Chef:</b> alles verwalten</li>
                                    <li><b>KFZ Beauftragter:</b> Fahrzeuge/Dokumente/Schäden/Erinnerungen verwalten</li>
                                    <li><b>Mitarbeiter:</b> Dokumente/Schäden/Erinnerungen erstellen & ansehen</li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="flex items-center justify-between gap-3 border-t border-gray-200 px-6 py-4">
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                        @click="inviteOpen = false">
                        Abbrechen
                    </button>

                    <button class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                        Einladung senden
                    </button>
                </div>
            </div>
        </div>

    </div>
</x-ux-layout>