@extends('layouts.admin')
@section('title', 'Roles')
@section('content')
<x-admin.page
    title="Roles & permissions"
    subtitle="Create staff roles and grant exact access to catalogue, orders, CRM, accounting, and settings."
>
    <x-slot:actions>
        @if(auth()->user()?->hasPermission('roles.edit') || auth()->user()?->hasRole('super-admin'))
            <a href="{{ route('admin.roles.create') }}" class="admin-btn admin-btn-primary">
                <i data-lucide="plus" class="h-3.5 w-3.5"></i> Create role
            </a>
        @endif
        <a href="{{ route('admin.staff.index') }}" class="admin-btn">Staff users</a>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Roles</span>
            <span class="order-ops-stat-value">{{ number_format($roles->count()) }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Permissions</span>
            <span class="order-ops-stat-value">{{ number_format($permissionCount) }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Assigned staff</span>
            <span class="order-ops-stat-value">{{ number_format($roles->sum('users_count')) }}</span>
        </div>
    </div>

    <div class="space-y-3">
        @forelse($roles as $role)
            <article class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)] sm:p-5">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <h2 class="text-base font-semibold text-[#202223]">{{ $role->name }}</h2>
                            @if($role->slug === 'super-admin')
                                <x-admin.badge tone="warning">Protected</x-admin.badge>
                            @endif
                            <span class="font-mono text-[11px] text-[#8c9196]">{{ $role->slug }}</span>
                        </div>
                        @if($role->description)
                            <p class="mt-1 text-sm text-[#6d7175]">{{ $role->description }}</p>
                        @endif
                        <div class="mt-2 flex flex-wrap gap-3 text-xs text-[#6d7175]">
                            <span>{{ $role->permissions_count }} permissions</span>
                            <span>{{ $role->users_count }} staff</span>
                        </div>
                        @if($role->permissions->isNotEmpty())
                            <div class="mt-3 flex flex-wrap gap-1.5">
                                @foreach($role->permissions->take(8) as $permission)
                                    <span class="rounded-md bg-[#f6f6f7] px-2 py-0.5 font-mono text-[10px] text-[#5c5f62]">{{ $permission->slug }}</span>
                                @endforeach
                                @if($role->permissions_count > 8)
                                    <span class="rounded-md bg-[#f6f6f7] px-2 py-0.5 text-[10px] text-[#5c5f62]">+{{ $role->permissions_count - 8 }} more</span>
                                @endif
                            </div>
                        @endif
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <a href="{{ route('admin.roles.edit', $role) }}" class="admin-btn admin-btn-primary">Edit & permissions</a>
                        <a href="{{ route('admin.roles.matrix', $role) }}" class="admin-btn">Matrix</a>
                    </div>
                </div>
            </article>
        @empty
            <x-admin.empty title="No roles yet" description="Create a role, then assign permissions and staff." />
        @endforelse
    </div>
</x-admin.page>
@endsection