<?php
$roleColors = [
    'manager'   => 'info',
    'confirmer' => 'success',
    'shipping'  => 'warning',
    'accountant'=> 'secondary',
];

$permGroups = [
    'team.perm_group_orders' => [
        'view_orders',
        'view_assigned_orders',
        'view_confirmed_orders',
        'view_orders_readonly',
        'confirm_orders',
    ],
    'team.perm_group_shipping' => [
        'manage_shipping',
        'manage_returns',
    ],
    'team.perm_group_products' => [
        'view_products',
    ],
    'team.perm_group_admin' => [
        'manage_team',
        'view_stats',
        'view_suspicious',
    ],
];
?>

<div class="content-wrapper">
<section class="content pt-3">
<div class="container-fluid pb-5">

    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h3 class="mb-1 fw-bold">
                <i class="bi bi-shield-check me-2 text-primary"></i>
                <?= __('team.permissions_title', 'Role Permissions') ?>
            </h3>
            <p class="text-muted mb-0">
                <?= __('team.permissions_subtitle', 'Customize each roles permissions — changes apply immediately') ?>
            </p>
        </div>
        <a href="/admin/team" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-right me-1"></i>
            <?= __('actions.back', 'رجوع') ?>
        </a>
    </div>

    <?php if (!empty($_SESSION['success'])): ?>
        <div class="alert alert-success alert-dismissible fade show">
            <i class="bi bi-check-circle me-1"></i>
            <?= htmlspecialchars($_SESSION['success']) ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php unset($_SESSION['success']); ?>
    <?php endif; ?>

    <div class="alert alert-warning d-flex gap-2 align-items-start mb-4">
        <i class="bi bi-exclamation-triangle-fill mt-1"></i>
        <div>
            <strong><?= __('team.permissions_warning_title', 'Important Notice') ?></strong><br>
            <span class="small"><?= __('team.permissions_warning', 'The owner role always has full access and cannot be changed. Changes affect all members of that role.') ?></span>
        </div>
    </div>

    <ul class="nav nav-tabs mb-0" id="roleTabs">
        <?php $first = true; ?>
        <?php foreach ($allRoles as $role => $label): ?>
            <?php if ($role === 'owner') continue; ?>
            <li class="nav-item">
                <button class="nav-link <?= $first ? 'active' : '' ?>"
                        data-bs-toggle="tab"
                        data-bs-target="#role-<?= $role ?>"
                        type="button">
                    <span class="badge bg-<?= $roleColors[$role] ?? 'secondary' ?> me-1">&nbsp;</span>
                    <?= \Core\App\Models\TeamMemberModel::roleLabel($role) ?>
                </button>
            </li>
            <?php $first = false; ?>
        <?php endforeach; ?>
    </ul>

    <div class="tab-content border border-0 rounded-bottom p-4 bg-white shadow-sm">
        <?php $first = true; ?>
        <?php foreach ($allRoles as $role => $label): ?>
            <?php if ($role === 'owner') continue; ?>
            <?php $currentPerms = $rolePerms[$role] ?? []; ?>

            <div class="tab-pane fade <?= $first ? 'show active' : '' ?>" id="role-<?= $role ?>">
                <form method="POST" action="/admin/team/permissions/save">
                    <?= \Core\System\Csrf::field() ?>
                    <input type="hidden" name="role" value="<?= htmlspecialchars($role) ?>">

                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="mb-0">
                            <span class="badge bg-<?= $roleColors[$role] ?? 'secondary' ?> me-2">
                                <?= \Core\App\Models\TeamMemberModel::roleLabel($role) ?>
                            </span>
                            <?= __('team.customize_role', 'Customize Permissions') ?>
                        </h5>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-outline-secondary btn-sm"
                                    onclick="toggleAll('<?= $role ?>', false)">
                                <i class="bi bi-dash-circle me-1"></i>
                                <?= __('team.deselect_all', 'Deselect All') ?>
                            </button>
                            <button type="button" class="btn btn-outline-primary btn-sm"
                                    onclick="toggleAll('<?= $role ?>', true)">
                                <i class="bi bi-check-circle me-1"></i>
                                <?= __('team.select_all', 'Select All') ?>
                            </button>
                        </div>
                    </div>

                    <div class="row g-4">
                        <?php foreach ($permGroups as $groupName => $groupPerms): ?>
                        <div class="col-md-6">
                            <div class="card border h-100">
                                <div class="card-header bg-light py-2">
                                    <strong class="small"><?= __($groupName, $groupName) ?></strong>
                                </div>
                                <div class="card-body">
                                    <?php foreach ($groupPerms as $perm): ?>
                                        <?php if (!array_key_exists($perm, $allPerms)) continue; ?>
                                        <?php $checked = in_array($perm, $currentPerms) || in_array('*', $currentPerms); ?>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input perm-check-<?= $role ?>"
                                                   type="checkbox"
                                                   name="permissions[]"
                                                   value="<?= $perm ?>"
                                                   id="perm_<?= $role ?>_<?= $perm ?>"
                                                   <?= $checked ? 'checked' : '' ?>>
                                            <label class="form-check-label"
                                                   for="perm_<?= $role ?>_<?= $perm ?>">
                                                <?= htmlspecialchars(__('team.perm_' . $perm, $allPerms[$perm])) ?>
                                            </label>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>

                    <div class="mt-4 pt-3 border-top">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save me-1"></i>
                            <?= __('team.save_permissions', 'Save Permissions') ?>
                            <strong><?= \Core\App\Models\TeamMemberModel::roleLabel($role) ?></strong>
                        </button>
                        <span class="text-muted small ms-3">
                            <i class="bi bi-info-circle me-1"></i>
                            <?= __('team.permissions_note', 'Changes apply immediately to all members of this role') ?>
                        </span>
                    </div>
                </form>
            </div>

            <?php $first = false; ?>
        <?php endforeach; ?>
    </div>

</div>
</section>
</div>

<script>
function toggleAll(role, state) {
    document.querySelectorAll('.perm-check-' + role).forEach(function(cb) {
        cb.checked = state;
    });
}
</script>