@extends('admin.layouts.app')

@section('title', 'Access Control Management')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Access Control Management</h1>
        <p class="mt-2 text-sm text-gray-600">Manage admin roles, permissions, and access levels</p>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Total Roles</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $stats['total_roles'] }}</p>
                </div>
                <svg class="w-12 h-12 text-blue-500/20" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 9a3 3 0 100-6 3 3 0 000 6zm0 2a6 6 0 100-12 6 6 0 000 12z"></path>
                </svg>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Permissions</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $stats['total_permissions'] }}</p>
                </div>
                <svg class="w-12 h-12 text-green-500/20" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Total Admins</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $stats['total_admins'] }}</p>
                </div>
                <svg class="w-12 h-12 text-purple-500/20" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10.5 1.5H5.75A2.25 2.25 0 003.5 3.75v12.5A2.25 2.25 0 005.75 18.5h8.5a2.25 2.25 0 002.25-2.25V6.5m-12-4h8m-8 3h8m-8 3h5"></path>
                </svg>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Active Admins</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $stats['active_admins'] }}</p>
                </div>
                <svg class="w-12 h-12 text-emerald-500/20" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.748-1.153.5.5 0 11-.93.244.903.903 0 10-.67.26l.009.005a.5.5 0 01-.646-.646l1.318-1.318A2.5 2.5 0 1113.5 13H11V9.413l1.293 1.293a.5.5 0 11-.707.707l-2-2a.5.5 0 010-.707l2-2a.5.5 0 11.707.707L11 8.586V13h2.5z" clip-rule="evenodd"></path>
                </svg>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <div class="border-b border-gray-200 mb-8">
        <nav class="-mb-px flex space-x-8">
            <a href="#roles" class="border-indigo-500 text-indigo-600 border-b-2 py-4 px-1 inline-flex items-center text-sm font-medium" aria-current="page">
                Roles & Permissions
            </a>
            <a href="#admins" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 py-4 px-1 inline-flex items-center text-sm font-medium">
                Admin Assignments
            </a>
            <a href="{{ route('admin.access.report') }}" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 py-4 px-1 inline-flex items-center text-sm font-medium">
                Access Report
            </a>
        </nav>
    </div>

    <!-- Roles & Permissions Section -->
    <div id="roles" class="mb-12">
        <h2 class="text-xl font-bold text-gray-900 mb-6">Admin Roles & Permissions</h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            @foreach($roles as $roleKey => $roleData)
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-lg font-bold text-white">{{ $roleData['name'] }}</h3>
                            <p class="text-blue-100 text-sm mt-1">{{ $roleData['description'] ?? 'No description' }}</p>
                        </div>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-white/20 text-white">
                            {{ $stats['by_role'][$roleKey] ?? 0 }} admin{{ ($stats['by_role'][$roleKey] ?? 0) != 1 ? 's' : '' }}
                        </span>
                    </div>
                </div>

                <div class="p-6">
                    <!-- Modules -->
                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-gray-900 mb-2">Modules Access</h4>
                        @if(!empty($roleData['modules']))
                        <div class="flex flex-wrap gap-2">
                            @foreach($roleData['modules'] as $module)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                {{ ucwords(str_replace('_', ' ', $module)) }}
                            </span>
                            @endforeach
                        </div>
                        @else
                        <p class="text-sm text-gray-500">No modules assigned</p>
                        @endif
                    </div>

                    <!-- Permissions Count -->
                    <div class="mb-4 pt-4 border-t border-gray-200">
                        <p class="text-sm text-gray-600">
                            <strong>{{ count($permissions[$roleKey] ?? []) }}</strong> permissions assigned
                        </p>
                    </div>

                    <!-- Capabilities -->
                    <div class="flex gap-2">
                        @if($roleData['can_edit_roles'] ?? false)
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-purple-50 text-purple-700">
                            ✓ Can Edit Roles
                        </span>
                        @endif
                        @if($roleData['can_manage_admins'] ?? false)
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-50 text-green-700">
                            ✓ Can Manage Admins
                        </span>
                        @endif
                    </div>

                    <!-- Actions -->
                    <div class="mt-4 pt-4 border-t border-gray-200">
                        <a href="{{ route('admin.access.edit-role', $roleKey) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-700">
                            View Permissions →
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Admin Assignments Section -->
    <div id="admins" class="mt-12">
        <h2 class="text-xl font-bold text-gray-900 mb-6">Admin Role Assignments</h2>
            @php
            $headers = [
                ['label' => 'Admin', 'class' => ''],
                ['label' => 'Role', 'class' => 'w-40'],
                ['label' => 'Status', 'class' => 'w-32'],
                ['label' => 'Last Login', 'class' => 'w-36'],
                ['label' => 'Actions', 'class' => 'text-right w-36'],
            ];
            $rows = [];
            foreach($admins as $admin) {
                $cells = [];
                $cells[] = ['content' => '<div><p class="text-sm font-medium text-gray-900">' . e($admin->name) . '</p><p class="text-sm text-gray-500">' . e($admin->email) . '</p></div>', 'class' => 'whitespace-nowrap'];
                $roleLabel = $roles[$admin->role]['name'] ?? $admin->role;
                $roleClass = $admin->role === 'super_admin' ? 'bg-purple-100 text-purple-800' : ($admin->role === 'operations_admin' ? 'bg-blue-100 text-blue-800' : ($admin->role === 'moderator' ? 'bg-green-100 text-green-800' : ($admin->role === 'employer_manager' ? 'bg-yellow-100 text-yellow-800' : ($admin->role === 'finance_admin' ? 'bg-indigo-100 text-indigo-800' : ''))));
                $cells[] = ['content' => '<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold ' . $roleClass . '">' . e($roleLabel) . '</span>', 'class' => 'whitespace-nowrap'];
                $statusClass = $admin->status === 'active' ? 'bg-green-100 text-green-800' : ($admin->status === 'inactive' ? 'bg-gray-100 text-gray-800' : ($admin->status === 'suspended' ? 'bg-red-100 text-red-800' : ''));
                $cells[] = ['content' => '<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold ' . $statusClass . '">' . e(ucfirst($admin->status)) . '</span>', 'class' => 'whitespace-nowrap'];
                $cells[] = ['content' => $admin->last_login_at ? e($admin->last_login_at->diffForHumans()) : '<span class="text-gray-400">Never</span>', 'class' => 'whitespace-nowrap text-sm text-gray-600'];
                $actionHtml = $admin->id !== auth('admin')->id() ? '<a href="' . route('admin.access.edit-admin', $admin) . '" class="text-indigo-600 hover:text-indigo-900">Edit Permissions</a>' : '<span class="text-gray-400">Own Account</span>' ;
                $cells[] = ['content' => $actionHtml, 'class' => 'text-right text-sm font-medium'];
                $rows[] = ['cells' => $cells];
            }
        @endphp

        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            @include('admin.components.table_shell', [
                'headers' => $headers,
                'rows' => $rows,
                'emptyMessage' => 'No admins found',
                'pagination' => $admins
            ])
        </div>`
    </div>
</div>
@endsection