@extends('layouts.app')

@section('title', 'Roles')
@section('nav_staff', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Staff & Roles')
@section('page_subtitle', 'Manage team members and their access')

@section('content')

@if(session('success'))
<div class="mb-4 px-4 py-3 bg-green-50 border-[0.5px] border-green-200 rounded-xl text-sm text-green-700">{{ session('success') }}</div>
@endif
@if(session('error'))
<div class="mb-4 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">{{ session('error') }}</div>
@endif

{{-- Section tab nav + action button --}}
<div class="flex items-center justify-between mb-5">
    <div class="flex gap-1 bg-white border-[0.5px] border-gray-200 rounded-lg p-1">
        <a href="{{ route('staff.index') }}"
           class="px-3 py-1.5 text-xs font-medium text-gray-500 hover:bg-gray-50 rounded-md transition-colors">
            Staff Members
        </a>
        <a href="{{ route('roles.index') }}"
           class="px-3 py-1.5 text-xs font-semibold rounded-md bg-teal-600 text-white transition-colors">
            Roles &amp; Permissions
        </a>
    </div>

    @can('roles.manage')
    <a href="{{ route('roles.create') }}"
       class="px-4 py-2 text-xs font-semibold bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">
        + Create Role
    </a>
    @endcan
</div>

@php
$roleAccents = [
    'super_admin'  => 'bg-purple-400',
    'manager'      => 'bg-teal-400',
    'front_desk'   => 'bg-blue-400',
    'housekeeping' => 'bg-amber-400',
    'maintenance'  => 'bg-orange-400',
    'accountant'   => 'bg-slate-400',
];
$roleStatColors = [
    'super_admin'  => 'text-purple-600',
    'manager'      => 'text-teal-700',
    'front_desk'   => 'text-blue-700',
    'housekeeping' => 'text-amber-700',
    'maintenance'  => 'text-orange-700',
    'accountant'   => 'text-slate-600',
];
$roleAvatarColors = [
    'super_admin'  => 'bg-purple-100 text-purple-700 ring-purple-200',
    'manager'      => 'bg-teal-100 text-teal-700 ring-teal-200',
    'front_desk'   => 'bg-blue-100 text-blue-700 ring-blue-200',
    'housekeeping' => 'bg-amber-100 text-amber-700 ring-amber-200',
    'maintenance'  => 'bg-orange-100 text-orange-700 ring-orange-200',
    'accountant'   => 'bg-slate-100 text-slate-600 ring-slate-200',
];
@endphp

<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
    @foreach($roles as $role)
    @php
        $accentClass    = $roleAccents[$role->slug]     ?? 'bg-indigo-400';
        $statColor      = $roleStatColors[$role->slug]  ?? 'text-indigo-700';
        $avatarColor    = $roleAvatarColors[$role->slug] ?? 'bg-indigo-100 text-indigo-700 ring-indigo-200';
        $visibleUsers   = $role->users->take(4);
        $overflowCount  = max(0, $role->users_count - 4);
    @endphp
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
        <div class="h-1 {{ $accentClass }}"></div>
        <div class="p-5">
            <div class="flex items-start justify-between gap-3 mb-3">
                <div>
                    <div class="flex items-center gap-2">
                        <h3 class="font-semibold text-gray-800 text-sm">{{ $role->name }}</h3>
                        @if($role->is_system)
                        <span class="text-[10px] font-medium text-purple-600 bg-purple-50 border-[0.5px] border-purple-200 px-1.5 py-0.5 rounded">System</span>
                        @endif
                    </div>
                    <p class="text-[11px] font-mono text-gray-400 mt-0.5">{{ $role->slug }}</p>
                    @if($role->description)
                    <p class="text-xs text-gray-500 mt-1">{{ $role->description }}</p>
                    @endif
                </div>
            </div>

            {{-- Stats row --}}
            <div class="flex items-center gap-4 mb-4">
                <div class="text-center">
                    <p class="text-lg font-bold text-gray-800">{{ $role->users_count }}</p>
                    <p class="text-[10px] text-gray-400">{{ Str::plural('Member', $role->users_count) }}</p>
                </div>
                <div class="w-px h-8 bg-gray-100"></div>
                <div class="text-center">
                    <p class="text-lg font-bold {{ $role->slug === 'super_admin' ? 'text-purple-600' : $statColor }}">
                        {{ $role->slug === 'super_admin' ? 'All' : $role->permissions_count }}
                    </p>
                    <p class="text-[10px] text-gray-400">Permissions</p>
                </div>

                {{-- Member avatar stack --}}
                @if($role->users_count > 0)
                <div class="ml-auto flex items-center">
                    <div class="flex -space-x-2">
                        @foreach($visibleUsers as $u)
                        <div title="{{ $u->name }}"
                             class="w-7 h-7 rounded-full ring-2 ring-white flex items-center justify-center text-[10px] font-bold {{ $avatarColor }}">
                            {{ $u->initials() }}
                        </div>
                        @endforeach
                        @if($overflowCount > 0)
                        <div class="w-7 h-7 rounded-full ring-2 ring-white bg-gray-100 text-gray-500 flex items-center justify-center text-[10px] font-bold">
                            +{{ $overflowCount }}
                        </div>
                        @endif
                    </div>
                </div>
                @endif
            </div>

            @can('roles.manage')
            <div class="flex items-center gap-2 pt-3 border-t border-gray-50">
                <a href="{{ route('roles.edit', $role->id) }}"
                   class="flex-1 text-center px-3 py-1.5 text-xs font-medium text-teal-600 bg-teal-50 border-[0.5px] border-teal-200 rounded-lg hover:bg-teal-100 transition-colors">
                    Edit
                </a>
                @if(! $role->is_system)
                <form method="POST" action="{{ route('roles.destroy', $role->id) }}"
                      data-confirm="Delete role &quot;{{ $role->name }}&quot;?" data-danger="true">
                    @csrf @method('DELETE')
                    <button type="submit"
                            class="px-3 py-1.5 text-xs font-medium text-red-500 bg-red-50 border-[0.5px] border-red-200 rounded-lg hover:bg-red-100 transition-colors">
                        Delete
                    </button>
                </form>
                @else
                <span class="px-3 py-1.5 text-xs text-gray-300 cursor-not-allowed">Protected</span>
                @endif
            </div>
            @endcan
        </div>
    </div>
    @endforeach
</div>

@endsection