@php
    $role = $role ?? 'bezirksstelle_admin';

    $roles = [
        'bezirksstelle_admin' => 'Bezirksstelle Admin',
        'bezirksstelle_staff' => 'Bezirksstelle Mitarbeiter',
        'ortstelle_admin' => 'Ortstelle Admin',
        'ortstelle_user' => 'Ortstelle Benutzer',
        'readonly_audit' => 'Read-Only (Audit)',
    ];

    $modules = [
        'dashboard' => 'Dashboard',
        'orders' => 'Bestellungen',
        'inventory' => 'Lager',
        'consumption' => 'Verbrauch',
        'stations' => 'Ortstellen',
        'products' => 'Artikel & Varianten',
        'exports' => 'Export / Reports',
        'security' => 'Sicherheit (User/Rollen)',
        'audit' => 'Audit Log',
    ];

    $actions = [
        'lesen' => 'Lesen',
        'anlegen' => 'Anlegen',
        'bearbeiten' => 'Bearbeiten',
        'löschen' => 'Löschen',
        'freigabe' => 'Freigabe',
    ];
@endphp

<x-layouts.app title="Rollen & Rechte" userRole="Bezirksstelle">
    <div class="flex flex-col gap-4">

        <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Rollen & Rechte</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Rechte-Matrix pro Modul · maximale Sicherheit über Policies (UI).
                </div>
            </div>

            <div class="flex items-center gap-2">
                <button
                    class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                    Neue Rolle
                </button>
                <button 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>

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
            {{-- Role List --}}
            <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                <div class="px-5 py-4 border-b border-rk">
                    <div class="text-sm font-semibold">Rollen</div>
                    <div class="mt-1 text-xs text-rk-slate">Vorlagen + Custom Rollen (UI).</div>
                </div>

                <div class="p-3 space-y-2">
                    @foreach ($roles as $key => $label)
                        <a href="{{ route('ui.security.roles', ['role' => $key]) }}"
                            class="block rounded-2xl border px-4 py-3 text-sm font-semibold
                           {{ $role === $key ? 'bg-rk-red text-white border-transparent' : 'bg-white border-rk hover:bg-neutral-50 text-rk-charcoal' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>
            </div>

            {{-- Permission Matrix --}}
            <div class="xl:col-span-2 rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                <div class="px-5 py-4 border-b border-rk flex items-center justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">Rechte-Matrix</div>
                        <div class="mt-1 text-xs text-rk-slate">Rolle: <span
                                class="font-semibold text-rk-charcoal">{{ $roles[$role] ?? $role }}</span></div>
                    </div>
                    <div class="text-xs text-rk-slate">UI: später „Default Deny“ + Audit</div>
                </div>

                <div class="p-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">Modul</th>
                                @foreach ($actions as $key => $label)
                                    <th class="py-3 text-center">{{ $label }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-[color:var(--rk-border)]">
                            @foreach ($modules as $mKey => $mLabel)
                                <tr class="hover:bg-neutral-50">
                                    <td class="py-4 font-semibold">{{ $mLabel }}</td>
                                    @foreach ($actions as $aKey => $aLabel)
                                        <td class="py-4 text-center">
                                            <input type="checkbox"
                                                class="rounded border-rk text-[color:var(--rk-red)] focus:ring-2 ring-rk"
                                                @checked(in_array($role, ['bezirksstelle_admin']) ? true : false)>
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <div class="mt-4 rounded-2xl border border-rk bg-neutral-50 p-4 text-sm text-rk-slate">
                        Konzept (Code-Teil): Default-Deny Policies, Scope nach Bezirksstelle/Ortstelle, Audit bei
                        Rechteänderungen.
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-layouts.app>