@php
    $title = 'Rollen & Rechte';
    $pageTitle = 'Rollen & Rechte';
    $pageSubtitle = 'Rollen verwalten und Berechtigungen zuweisen.';
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="max-w-6xl space-y-6">

        @if (session('status'))
            <div class="rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-4 text-sm text-emerald-800">
                {{ session('status') }}
            </div>
        @endif

        <!-- Header / Actions -->
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-center gap-3">
                <div
                    class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-brand/10 text-brand ring-1 ring-brand/15">
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
                        <path
                            d="M19.4 15a7.97 7.97 0 0 0 .1-1 7.97 7.97 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7.8 7.8 0 0 0-1.7-1L12 2 9.6 5a7.8 7.8 0 0 0-1.7 1l-2.4-1-2 3.5L5.5 10a7.97 7.97 0 0 0-.1 1c0 .34.03.67.1 1l-2 1.5 2 3.5 2.4-1c.52.4 1.09.73 1.7 1L12 22l2.4-3a7.8 7.8 0 0 0 1.7-1l2.4 1 2-3.5-2-1.5Z" />
                    </svg>
                </div>

                <div>
                    <div class="text-sm font-semibold text-gray-900">Übersicht</div>
                    <div class="text-sm text-gray-600">
                        {{ $roles->count() }} Rollen • Berechtigungen pro Rolle
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('roles.create') }}"
                    class="inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600 focus:outline-none focus:ring-4 focus:ring-brand/25">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 5v14" />
                        <path d="M5 12h14" />
                    </svg>
                    Rolle erstellen
                </a>
            </div>
        </div>

        <!-- Table Card -->
        <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm ring-1 ring-black/5">
            <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
                <div class="text-sm font-semibold text-gray-900">Rollen</div>
                <div class="text-xs text-gray-500">Klicke „Bearbeiten“, um Permissions zu ändern.</div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead class="bg-gray-50 text-gray-600">
                        <tr>
                            <th class="px-5 py-3 text-left font-semibold">Rolle</th>
                            <th class="px-5 py-3 text-left font-semibold">Permissions</th>
                            <th class="px-5 py-3 text-left font-semibold">User</th>
                            <th class="px-5 py-3 text-right font-semibold"></th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-gray-200">
                        @foreach ($roles as $role)
                            @php
                                $isProtected = in_array($role->name, ['Chef', 'KFZ Beauftragter', 'Mitarbeiter'], true);
                                $permCount = $role->permissions?->count() ?? 0;
                                $preview = $role->permissions?->take(6) ?? collect();
                                $more = max(0, $permCount - $preview->count());
                            @endphp

                            <tr class="bg-white align-top hover:bg-gray-50/60">
                                <td class="px-5 py-4">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gray-100 ring-1 ring-gray-200">
                                            <svg class="h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2">
                                                <path d="M12 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
                                                <path
                                                    d="M19.4 15a7.97 7.97 0 0 0 .1-1 7.97 7.97 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7.8 7.8 0 0 0-1.7-1L12 2 9.6 5a7.8 7.8 0 0 0-1.7 1l-2.4-1-2 3.5L5.5 10a7.97 7.97 0 0 0-.1 1c0 .34.03.67.1 1l-2 1.5 2 3.5 2.4-1c.52.4 1.09.73 1.7 1L12 22l2.4-3a7.8 7.8 0 0 0 1.7-1l2.4 1 2-3.5-2-1.5Z" />
                                            </svg>
                                        </div>

                                        <div class="min-w-0">
                                            <div class="flex items-center gap-2">
                                                <div class="truncate text-sm font-semibold text-gray-900">
                                                    {{ $role->name }}
                                                </div>

                                                @if ($isProtected)
                                                    <span
                                                        class="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">
                                                        geschützt
                                                    </span>
                                                @endif
                                            </div>

                                            <div class="mt-0.5 text-xs text-gray-500">
                                                {{ $permCount }} Permissions • {{ (int) $role->users_count }} User
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                <td class="px-5 py-4">
                                    <div class="flex flex-wrap gap-1.5">
                                        @forelse ($preview as $p)
                                            <span
                                                class="rounded-full bg-gray-50 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">
                                                {{ $p->name }}
                                            </span>
                                        @empty
                                            <span class="text-gray-500">—</span>
                                        @endforelse

                                        @if ($more > 0)
                                            <span
                                                class="rounded-full bg-brand/10 px-2.5 py-1 text-xs font-semibold text-brand ring-1 ring-brand/15"
                                                title="Weitere {{ $more }} Permissions">
                                                +{{ $more }}
                                            </span>
                                        @endif
                                    </div>
                                </td>

                                <td class="px-5 py-4">
                                    <span
                                        class="inline-flex items-center rounded-xl bg-gray-50 px-3 py-2 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">
                                        {{ (int) $role->users_count }}
                                    </span>
                                </td>

                                <td class="px-5 py-4 text-right">
                                    <a href="{{ route('roles.edit', $role) }}"
                                        class="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-brand/20">
                                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2">
                                            <path d="M12 20h9" />
                                            <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z" />
                                        </svg>
                                        Bearbeiten
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if ($roles->isEmpty())
                <div class="px-6 py-10 text-sm text-gray-600">
                    Keine Rollen vorhanden.
                </div>
            @endif
        </div>
    </div>
</x-ux-layout>