<?php
$pageTitle = 'Roles & Permissions';
$breadcrumb = [
    ['label' => 'Users', 'url' => APP_URL . '/users'],
    ['label' => 'Roles & Permissions', 'url' => null]
];
ob_start();
?>
<div class="flex flex-col md:flex-row justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800">Roles & Permissions</h1>
    <a href="<?= APP_URL ?>/users/roles/create" class="bg-[#0A3A6B] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow">Create Role</a>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <?php foreach ($roles ?? [] as $role): ?>
    <div class="bg-white rounded-lg shadow overflow-hidden flex flex-col h-full border <?= ($role['is_system'] ?? false) ? 'border-gray-200' : 'border-[#0A3A6B] border-opacity-20' ?>">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-start">
            <h3 class="text-lg font-bold text-gray-900"><?= htmlspecialchars($role['name'] ?? '') ?></h3>
            <?php if ($role['is_system'] ?? false): ?>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">System</span>
            <?php endif; ?>
        </div>
        <div class="p-6 flex-grow flex flex-col">
            <p class="text-sm text-gray-500 mb-4 flex-grow"><?= htmlspecialchars($role['description'] ?? 'No description') ?></p>
            
            <div class="mb-4">
                <div class="text-xs text-gray-500 uppercase font-semibold mb-2">Permissions Overview</div>
                <div class="flex flex-wrap gap-1">
                    <?php 
                    $modules = $role['top_modules'] ?? [];
                    if (empty($modules)): ?>
                        <span class="text-sm text-gray-400 italic">No permissions</span>
                    <?php else: ?>
                        <?php foreach (array_slice($modules, 0, 5) as $mod): ?>
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 text-[#0A3A6B] border border-blue-100 capitalize"><?= htmlspecialchars($mod) ?></span>
                        <?php endforeach; ?>
                        <?php if (count($modules) > 5): ?>
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-50 text-gray-500 border border-gray-200">+<?= count($modules) - 5 ?> more</span>
                        <?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>
            
            <div class="flex items-center justify-between text-sm">
                <span class="text-gray-500 font-medium">
                    <svg class="h-4 w-4 inline-block mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
                    <?= htmlspecialchars($role['user_count'] ?? 0) ?> Users
                </span>
                <a href="<?= APP_URL ?>/users?role=<?= htmlspecialchars($role['id'] ?? '') ?>" class="text-[#0A3A6B] hover:underline">View Users</a>
            </div>
        </div>
        <div class="bg-gray-50 px-6 py-3 border-t border-gray-100 flex justify-end">
            <?php if ($role['is_system'] ?? false): ?>
                <button disabled class="text-gray-400 font-medium text-sm cursor-not-allowed" title="System roles cannot be modified">Edit Role</button>
            <?php else: ?>
                <a href="<?= APP_URL ?>/users/roles/<?= $role['id'] ?? '' ?>/edit" class="text-[#0A3A6B] hover:text-blue-800 font-medium text-sm">Edit Role</a>
            <?php endif; ?>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<div class="text-center text-sm text-gray-500 mb-8">
    <p>Note: System roles cannot be deleted or modified as they are essential for core application functionality.</p>
</div>
<?php
$content = ob_get_clean();
require ROOT_PATH . '/modules/shared/views/layouts/main.php';
?>