<?php
$roleIcons = [
    'super_admin' => ['icon' => 'shield-fill-check', 'color' => '#7c3aed'],
    'manager'     => ['icon' => 'person-badge-fill',  'color' => '#2563eb'],
    'kitchen'     => ['icon' => 'fire',               'color' => '#ea580c'],
    'rider'       => ['icon' => 'bicycle',             'color' => '#16a34a'],
    'customer'    => ['icon' => 'person-fill',         'color' => '#64748b'],
];
?>

<div class="page-header">
    <div>
        <h1><i class="bi bi-shield-lock me-2"></i>Roles & Permissions</h1>
        <p>Control what each role can access in the admin panel.</p>
    </div>
    <button class="btn btn-accent btn-sm" onclick="document.getElementById('createRoleCard').style.display='block';this.style.display='none'">
        <i class="bi bi-plus-lg me-1"></i>New Role
    </button>
</div>

<?= flash_alert() ?>

<!-- Create role form (hidden by default) -->
<div class="card p-4 mb-4" id="createRoleCard" style="display:none;">
    <h6 class="fw-700 mb-3"><i class="bi bi-plus-circle me-2 text-accent"></i>Create New Role</h6>
    <form method="POST" action="<?= url('roles/store') ?>" class="d-flex gap-3 align-items-end flex-wrap">
        <?= csrf_field() ?>
        <div style="flex:1;min-width:200px;">
            <label class="form-label mb-1" style="font-size:.78rem;">Role Display Name <span class="text-danger">*</span></label>
            <input type="text" name="label" class="form-control" placeholder="e.g. Cashier"
                   required maxlength="100" autofocus>
            <div class="text-secondary mt-1" style="font-size:.72rem;">
                The internal key will be auto-generated (spaces → underscores, lowercase).
            </div>
        </div>
        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-accent">Create & Assign Permissions</button>
            <button type="button" class="btn btn-outline-secondary"
                    onclick="document.getElementById('createRoleCard').style.display='none';document.querySelector('.btn-accent[onclick]').style.display=''">
                Cancel
            </button>
        </div>
    </form>
</div>

<div class="row g-3">
<?php foreach ($roles as $role): ?>
<?php
    $cfg   = $roleIcons[$role['name']] ?? ['icon' => 'person-fill', 'color' => '#64748b'];
    $count = (int)$role['perm_count'];
    $isSA  = $role['name'] === 'super_admin';
    $pct   = $totalPerms > 0 ? round($count / $totalPerms * 100) : 0;
    if ($isSA) { $pct = 100; $count = $totalPerms; }
?>
<div class="col-12 col-sm-6 col-xl-4">
    <div class="card h-100 p-4" style="border-left: 4px solid <?= $cfg['color'] ?>;">
        <div class="d-flex align-items-center gap-3 mb-3">
            <div style="width:46px;height:46px;border-radius:12px;background:<?= $cfg['color'] ?>22;
                        display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i class="bi bi-<?= $cfg['icon'] ?>" style="font-size:1.3rem;color:<?= $cfg['color'] ?>;"></i>
            </div>
            <div>
                <div class="fw-700" style="font-size:1rem;"><?= e($role['label']) ?></div>
                <div class="text-secondary" style="font-size:.75rem;"><?= e($role['name']) ?></div>
            </div>
            <?php if ($isSA): ?>
            <span class="badge ms-auto" style="background:<?= $cfg['color'] ?>22;color:<?= $cfg['color'] ?>;font-size:.68rem;">
                Full Access
            </span>
            <?php endif; ?>
        </div>

        <!-- Permission bar -->
        <div class="mb-1 d-flex justify-content-between" style="font-size:.75rem;">
            <span class="text-secondary"><?= $count ?> / <?= $totalPerms ?> permissions</span>
            <span class="fw-600" style="color:<?= $cfg['color'] ?>;"><?= $pct ?>%</span>
        </div>
        <div style="height:6px;background:#f1f5f9;border-radius:4px;overflow:hidden;margin-bottom:16px;">
            <div style="width:<?= $pct ?>%;height:100%;background:<?= $cfg['color'] ?>;border-radius:4px;transition:width .4s;"></div>
        </div>

        <?php if ($isSA): ?>
        <div class="text-secondary" style="font-size:.78rem;">
            <i class="bi bi-info-circle me-1"></i>Super Admin always has all permissions and cannot be restricted.
        </div>
        <?php else: ?>
        <?php
        $builtIn = in_array($role['name'], ['super_admin','manager','kitchen','rider','customer']);
        ?>
        <div class="d-flex gap-2 mt-auto">
            <a href="<?= url('roles/'.$role['id'].'/edit') ?>"
               class="btn btn-sm flex-grow-1"
               style="background:<?= $cfg['color'] ?>15;color:<?= $cfg['color'] ?>;border:1px solid <?= $cfg['color'] ?>40;font-weight:600;">
                <i class="bi bi-pencil-square me-1"></i>Edit Permissions
            </a>
            <?php if (!$builtIn): ?>
            <form method="POST" action="<?= url('roles/'.$role['id'].'/delete') ?>"
                  onsubmit="return confirm('Delete role \'<?= e($role['label']) ?>\'? This cannot be undone.')">
                <?= csrf_field() ?>
                <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete role">
                    <i class="bi bi-trash"></i>
                </button>
            </form>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </div>
</div>
<?php endforeach; ?>
</div>
