@php
    $permissionGroupLabel = static function (string $groupKey): string {
        $translationKey = 'messages.permission_group_'.$groupKey;
        $translated = __($translationKey);

        return $translated !== $translationKey ? $translated : str_replace('_', ' ', $groupKey);
    };

    $allPermissionNames = collect($permissionGroups)->flatten(1)->pluck('name')->values()->all();
    $groupKeys = array_keys($permissionGroups);
    $canCreateRoles = auth()->user()?->canAny(['create_roles', 'manage_roles_permissions']) ?? false;
    $canManagePermissions = auth()->user()?->canAny(['sync_role_permissions', 'manage_roles_permissions']) ?? false;
    $canDeleteRoles = auth()->user()?->canAny(['delete_roles', 'manage_roles_permissions']) ?? false;
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h2 class="text-2xl font-bold text-[var(--theme-text)]">{{ __('messages.roles_permissions') }}</h2>
                <p class="mt-1 text-sm text-[var(--theme-muted)]">{{ __('messages.roles_permissions_subtitle') }}</p>
            </div>

            <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-[var(--theme-border)] bg-[var(--theme-surface)] text-[var(--theme-primary)]">
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 11.25h.008v.008H12v-.008zm0 0V9.75m8.79.75a8.79 8.79 0 11-17.58 0 8.79 8.79 0 0117.58 0z" />
                </svg>
            </span>
        </div>
    </x-slot>

    <div
        x-data="rolesPermissionsPage()"
        class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-5"
    >
        @if ($canCreateRoles)
            <div class="flex items-center justify-start">
                <button type="button" class="theme-btn-primary !px-5 !py-3 text-base" @click="createModalOpen = true">
                    + {{ __('messages.create_role') }}
                </button>
            </div>
        @endif

        <section class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <article class="theme-surface-panel p-5">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <p class="text-sm text-[var(--theme-muted)]">{{ __('messages.roles_count') }}</p>
                        <p class="mt-1 text-3xl font-bold text-[var(--theme-text)]">{{ $rolesCount }}</p>
                    </div>
                    <span class="inline-flex h-12 w-12 items-center justify-center rounded-2xl text-[var(--theme-primary)]" style="background: color-mix(in srgb, var(--theme-primary) 12%, transparent 88%);">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 20h5V4H2v16h5m10 0v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4m10 0H7" />
                        </svg>
                    </span>
                </div>
            </article>

            <article class="theme-surface-panel p-5">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <p class="text-sm text-[var(--theme-muted)]">{{ __('messages.total_permissions') }}</p>
                        <p class="mt-1 text-3xl font-bold text-[var(--theme-text)]">{{ $permissionsCount }}</p>
                    </div>
                    <span class="inline-flex h-12 w-12 items-center justify-center rounded-2xl text-[var(--theme-primary)]" style="background: color-mix(in srgb, var(--theme-primary) 12%, transparent 88%);">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 7a3 3 0 11-6 0 3 3 0 016 0zM4 20a8 8 0 1116 0H4z" />
                        </svg>
                    </span>
                </div>
            </article>
        </section>

        <section class="theme-surface-panel overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="theme-table-head">
                        <tr>
                            <th class="px-4 py-3 text-start">{{ __('messages.role_name') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.permissions_count') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.created_at') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($roles as $role)
                            <tr class="border-t border-[var(--theme-border)]">
                                <td class="px-4 py-4">
                                    <div class="flex items-center gap-3">
                                        <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl text-[var(--theme-primary)]" style="background: color-mix(in srgb, var(--theme-primary) 10%, transparent 90%);">
                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5.25 9.75h13.5m-13.5 4.5h13.5M7.5 5.25h9a2.25 2.25 0 012.25 2.25v9A2.25 2.25 0 0116.5 18.75h-9A2.25 2.25 0 015.25 16.5v-9A2.25 2.25 0 017.5 5.25z" />
                                            </svg>
                                        </span>
                                        <span class="font-semibold text-base">{{ $role->name }}</span>
                                    </div>
                                </td>
                                <td class="px-4 py-4">
                                    <span class="theme-chip">{{ $role->permissions->count() }} {{ __('messages.permissions_label') }}</span>
                                </td>
                                <td class="px-4 py-4 text-[var(--theme-muted)]">{{ $role->created_at?->format('Y-m-d') ?? '-' }}</td>
                                <td class="px-4 py-4">
                                    <div class="flex flex-wrap items-center gap-2">
                                        @if ($canManagePermissions)
                                            <button type="button" class="theme-btn-outline !px-3 !py-1.5 text-xs" @click="activeRole = {{ $role->id }}">
                                                {{ __('messages.manage_permissions') }}
                                            </button>
                                        @endif

                                        @if ($canDeleteRoles && $role->name !== 'Super Admin')
                                            <form method="POST" action="{{ route('admin.roles-permissions.roles.destroy', $role) }}" data-confirm="{{ __('messages.confirm_delete') }}">
                                                @csrf
                                                @method('DELETE')
                                                <button class="theme-btn-outline !px-3 !py-1.5 text-xs !text-[var(--theme-primary)]">
                                                    {{ __('messages.delete') }}
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-4 py-10 text-center text-[var(--theme-muted)]">{{ __('messages.no_data') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>

        @if ($canCreateRoles)
            <template x-teleport="body">
                <div
                    x-cloak
                    x-show="createModalOpen"
                    class="fixed inset-0 z-[120] flex items-center justify-center p-4"
                    style="background: var(--theme-overlay);"
                    @keydown.escape.window="createModalOpen = false"
                >
                    <div
                        x-data="rolePermissionsModal([], @js($groupKeys))"
                        x-show="createModalOpen"
                        x-transition
                        class="w-full max-w-4xl max-h-[92vh] overflow-hidden rounded-3xl border border-[var(--theme-border)] bg-[var(--theme-surface)] shadow-2xl"
                        @click.outside="createModalOpen = false"
                    >
                        <form method="POST" action="{{ route('admin.roles-permissions.roles.store') }}" class="h-full flex flex-col">
                            @csrf

                        <div class="px-5 py-4 border-b border-[var(--theme-border)] flex items-center justify-between">
                            <h3 class="text-2xl font-bold">{{ __('messages.create_role') }}</h3>
                            <button type="button" class="theme-btn-outline !p-2 !rounded-full" @click="createModalOpen = false" aria-label="Close">
                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>

                        <div class="p-5 overflow-y-auto space-y-4">
                            <div>
                                <label for="new_role_name" class="block text-sm font-semibold mb-2">{{ __('messages.role_name') }}</label>
                                <input id="new_role_name" type="text" name="name" required placeholder="{{ __('messages.role_name_placeholder') }}" class="w-full rounded-xl theme-ring-brand">
                            </div>

                            <div class="flex items-center justify-between gap-3">
                                <p class="text-sm font-semibold">{{ __('messages.select_permissions') }}</p>
                                <div class="flex items-center gap-2 text-sm">
                                    <button type="button" class="text-[var(--theme-primary)] hover:underline" @click="selectAll(@js($allPermissionNames))">{{ __('messages.select_all') }}</button>
                                    <span class="text-[var(--theme-muted)]">|</span>
                                    <button type="button" class="text-[var(--theme-primary)] hover:underline" @click="clearAll(@js($allPermissionNames))">{{ __('messages.clear_all') }}</button>
                                </div>
                            </div>

                            <input type="text" x-model="searchTerm" placeholder="{{ __('messages.permission_search_placeholder') }}" class="w-full rounded-xl theme-ring-brand">

                            <div class="permissions-groups-scroll max-h-[46vh] overflow-y-scroll pe-2 ps-1 space-y-3 rounded-2xl border border-[var(--theme-border)] bg-[var(--theme-surface)] p-2">
                                @foreach ($permissionGroups as $groupKey => $groupPermissions)
                                    @php
                                        $groupNames = array_map(static fn (array $permission): string => $permission['name'], $groupPermissions);
                                    @endphp
                                    <section class="rounded-2xl border border-[var(--theme-border)] overflow-hidden">
                                        <button type="button" class="w-full flex items-center justify-between px-4 py-3 bg-[var(--theme-surface)]" @click="toggleGroup('{{ $groupKey }}')">
                                            <span class="font-semibold">{{ $permissionGroupLabel($groupKey) }}</span>
                                            <span class="text-xs text-[var(--theme-muted)]">
                                                <span x-text="selectedInGroup(@js($groupNames))"></span>/{{ count($groupPermissions) }}
                                            </span>
                                        </button>
                                        <div x-show="isGroupOpen('{{ $groupKey }}')" x-transition class="px-4 py-4 grid grid-cols-1 md:grid-cols-2 gap-2 border-t border-[var(--theme-border)]">
                                            @foreach ($groupPermissions as $permission)
                                                <label
                                                    x-show="matches(@js($permission['name']), @js($permission['label']))"
                                                    class="inline-flex items-center justify-between rounded-xl border border-[var(--theme-border)] px-3 py-2 text-sm"
                                                >
                                                    <span class="truncate pe-3">{{ $permission['label'] }}</span>
                                                    <input type="checkbox" class="rounded border-[var(--theme-border)] text-[var(--theme-primary)]" :value="@js($permission['name'])" x-model="selected">
                                                </label>
                                            @endforeach
                                        </div>
                                    </section>
                                @endforeach
                            </div>

                            <template x-for="permission in selected" :key="'new-' + permission">
                                <input type="hidden" name="permissions[]" :value="permission">
                            </template>
                        </div>

                        <div class="px-5 py-4 border-t border-[var(--theme-border)] grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <button type="submit" class="theme-btn-primary !py-3">{{ __('messages.save_role') }}</button>
                            <button type="button" class="theme-btn-outline !py-3" @click="createModalOpen = false">{{ __('messages.cancel') }}</button>
                        </div>
                        </form>
                    </div>
                </div>
            </template>
        @endif

        @if ($canManagePermissions)
            @foreach ($roles as $role)
                <template x-teleport="body">
                    <div
                        x-cloak
                        x-show="activeRole === {{ $role->id }}"
                        class="fixed inset-0 z-[120] flex items-center justify-center p-4"
                        style="background: var(--theme-overlay);"
                        @keydown.escape.window="activeRole = null"
                    >
                        <div
                            x-data="rolePermissionsModal(@js($role->permissions->pluck('name')->values()->all()), @js($groupKeys))"
                            x-show="activeRole === {{ $role->id }}"
                            x-transition
                            class="w-full max-w-4xl max-h-[92vh] overflow-hidden rounded-3xl border border-[var(--theme-border)] bg-[var(--theme-surface)] shadow-2xl"
                            @click.outside="activeRole = null"
                        >
                            <form method="POST" action="{{ route('admin.roles-permissions.sync', $role) }}" class="h-full flex flex-col">
                                @csrf
                                @method('PUT')

                            <div class="px-5 py-4 border-b border-[var(--theme-border)] flex items-center justify-between">
                                <h3 class="text-2xl font-bold">{{ __('messages.manage_permissions') }}</h3>
                                <button type="button" class="theme-btn-outline !p-2 !rounded-full" @click="activeRole = null" aria-label="Close">
                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>

                            <div class="p-5 overflow-y-auto space-y-4">
                                <div>
                                    <label for="role_name_{{ $role->id }}" class="block text-sm font-semibold mb-2">{{ __('messages.role_name') }}</label>
                                    <input id="role_name_{{ $role->id }}" type="text" name="role_name" value="{{ $role->name }}" required class="w-full rounded-xl theme-ring-brand">
                                </div>

                                <div class="flex items-center justify-between gap-3">
                                    <p class="text-sm font-semibold">{{ __('messages.select_permissions') }}</p>
                                    <div class="flex items-center gap-2 text-sm">
                                        <button type="button" class="text-[var(--theme-primary)] hover:underline" @click="selectAll(@js($allPermissionNames))">{{ __('messages.select_all') }}</button>
                                        <span class="text-[var(--theme-muted)]">|</span>
                                        <button type="button" class="text-[var(--theme-primary)] hover:underline" @click="clearAll(@js($allPermissionNames))">{{ __('messages.clear_all') }}</button>
                                    </div>
                                </div>

                                <input type="text" x-model="searchTerm" placeholder="{{ __('messages.permission_search_placeholder') }}" class="w-full rounded-xl theme-ring-brand">

                                <div class="permissions-groups-scroll max-h-[46vh] overflow-y-scroll pe-2 ps-1 space-y-3 rounded-2xl border border-[var(--theme-border)] bg-[var(--theme-surface)] p-2">
                                    @foreach ($permissionGroups as $groupKey => $groupPermissions)
                                        @php
                                            $groupNames = array_map(static fn (array $permission): string => $permission['name'], $groupPermissions);
                                        @endphp
                                        <section class="rounded-2xl border border-[var(--theme-border)] overflow-hidden">
                                            <button type="button" class="w-full flex items-center justify-between px-4 py-3 bg-[var(--theme-surface)]" @click="toggleGroup('{{ $groupKey }}')">
                                                <span class="font-semibold">{{ $permissionGroupLabel($groupKey) }}</span>
                                                <span class="text-xs text-[var(--theme-muted)]">
                                                    <span x-text="selectedInGroup(@js($groupNames))"></span>/{{ count($groupPermissions) }}
                                                </span>
                                            </button>
                                            <div x-show="isGroupOpen('{{ $groupKey }}')" x-transition class="px-4 py-4 grid grid-cols-1 md:grid-cols-2 gap-2 border-t border-[var(--theme-border)]">
                                                @foreach ($groupPermissions as $permission)
                                                    <label
                                                        x-show="matches(@js($permission['name']), @js($permission['label']))"
                                                        class="inline-flex items-center justify-between rounded-xl border border-[var(--theme-border)] px-3 py-2 text-sm"
                                                    >
                                                        <span class="truncate pe-3">{{ $permission['label'] }}</span>
                                                        <input type="checkbox" class="rounded border-[var(--theme-border)] text-[var(--theme-primary)]" :value="@js($permission['name'])" x-model="selected">
                                                    </label>
                                                @endforeach
                                            </div>
                                        </section>
                                    @endforeach
                                </div>

                                <template x-for="permission in selected" :key="'role-{{ $role->id }}-' + permission">
                                    <input type="hidden" name="permissions[]" :value="permission">
                                </template>
                            </div>

                            <div class="px-5 py-4 border-t border-[var(--theme-border)] grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <button type="submit" class="theme-btn-primary !py-3">{{ __('messages.save_role') }}</button>
                                <button type="button" class="theme-btn-outline !py-3" @click="activeRole = null">{{ __('messages.cancel') }}</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </template>
            @endforeach
        @endif
    </div>

    <script>
        function rolesPermissionsPage() {
            return {
                createModalOpen: false,
                activeRole: null,
            };
        }

        function rolePermissionsModal(initialSelected, groupKeys) {
            const cleanGroupKeys = Array.isArray(groupKeys) ? groupKeys : [];
            const openState = {};

            cleanGroupKeys.forEach((key) => {
                openState[key] = true;
            });

            return {
                selected: Array.isArray(initialSelected) ? [...initialSelected] : [],
                searchTerm: '',
                groupOpen: openState,
                normalize(value) {
                    return String(value ?? '').toLowerCase();
                },
                matches(permissionName, permissionLabel) {
                    const term = this.normalize(this.searchTerm).trim();
                    if (term === '') {
                        return true;
                    }

                    return this.normalize(permissionName).includes(term)
                        || this.normalize(permissionLabel).includes(term);
                },
                selectAll(permissionNames) {
                    if (!Array.isArray(permissionNames)) {
                        return;
                    }

                    permissionNames.forEach((permission) => {
                        if (!this.selected.includes(permission)) {
                            this.selected.push(permission);
                        }
                    });
                },
                clearAll(permissionNames) {
                    if (!Array.isArray(permissionNames)) {
                        this.selected = [];
                        return;
                    }

                    this.selected = this.selected.filter((permission) => !permissionNames.includes(permission));
                },
                selectedInGroup(permissionNames) {
                    if (!Array.isArray(permissionNames)) {
                        return 0;
                    }

                    return permissionNames.filter((permission) => this.selected.includes(permission)).length;
                },
                toggleGroup(groupKey) {
                    this.groupOpen[groupKey] = !this.groupOpen[groupKey];
                },
                isGroupOpen(groupKey) {
                    return this.groupOpen[groupKey] ?? true;
                },
            };
        }
    </script>
</x-app-layout>