@props([
    'roles'       => collect(),
    'permissions' => collect(),
])

@php
    // If permissions not passed separately, derive from all roles
    if ($permissions->isEmpty()) {
        $permissions = $roles->flatMap(fn($r) => $r->permissions)->unique('id')->sortBy('name');
    }

    // Build a lookup: role_id → set of permission names
    $rolePermMap = [];
    foreach ($roles as $role) {
        $rolePermMap[$role->id] = $role->permissions->pluck('name')->flip()->toArray();
    }
@endphp

<div class="bg-gray-800 border border-gray-700 rounded-xl p-6">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-white">
            <i class="fas fa-th mr-2 text-indigo-400"></i>Permission Heatmap
        </h3>
        <span class="text-xs text-gray-400">{{ $permissions->count() }} permissions &times; {{ $roles->count() }} roles</span>
    </div>

    @if($roles->isEmpty() || $permissions->isEmpty())
        <div class="flex flex-col items-center justify-center h-32 text-gray-500">
            <i class="fas fa-lock text-3xl mb-2 text-gray-600"></i>
            <p class="text-sm">No roles or permissions found.</p>
        </div>
    @else
        <div class="overflow-auto max-h-96 rounded-lg border border-gray-700">
            <table class="w-full text-xs border-collapse">
                <thead class="sticky top-0 z-10">
                    <tr class="bg-gray-900">
                        <th class="text-left text-gray-400 font-medium px-3 py-2 border-b border-gray-700 min-w-[180px]">
                            Permission
                        </th>
                        @foreach($roles as $role)
                            <th class="text-center text-gray-300 font-medium px-2 py-2 border-b border-gray-700 min-w-[90px] whitespace-nowrap">
                                {{ $role->name }}
                            </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @foreach($permissions as $permission)
                        <tr class="odd:bg-gray-800 even:bg-gray-750 hover:bg-gray-700/30 transition-colors border-b border-gray-700/50 last:border-0">
                            <td class="text-gray-300 px-3 py-1.5 font-mono text-[11px]">
                                {{ $permission->name }}
                            </td>
                            @foreach($roles as $role)
                                @php $granted = isset($rolePermMap[$role->id][$permission->name]); @endphp
                                <td class="text-center px-2 py-1.5">
                                    @if($granted)
                                        <span class="inline-flex items-center justify-center w-5 h-5 bg-green-500/20 rounded"
                                              title="Granted to {{ $role->name }}">
                                            <i class="fas fa-check text-green-400" style="font-size:9px"></i>
                                        </span>
                                    @else
                                        <span class="inline-flex items-center justify-center w-5 h-5 bg-red-500/10 rounded"
                                              title="Not granted to {{ $role->name }}">
                                            <i class="fas fa-times text-red-500/50" style="font-size:9px"></i>
                                        </span>
                                    @endif
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Legend --}}
        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
            <span class="flex items-center gap-1.5">
                <span class="w-4 h-4 bg-green-500/20 rounded flex items-center justify-center">
                    <i class="fas fa-check text-green-400" style="font-size:8px"></i>
                </span>
                Granted
            </span>
            <span class="flex items-center gap-1.5">
                <span class="w-4 h-4 bg-red-500/10 rounded flex items-center justify-center">
                    <i class="fas fa-times text-red-500/50" style="font-size:8px"></i>
                </span>
                Not granted
            </span>
        </div>
    @endif
</div>
