<?php
$total=count($users);
$actifs=count(array_filter($users,fn($u)=>(int)$u['actif']===1));
$inactifs=$total-$actifs;
?>
<style>
.cda-accounts{padding:28px;max-width:1500px}
.cda-accounts *{box-sizing:border-box}
.cda-accounts__head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}
.cda-accounts__eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.14em;color:#718096;text-transform:uppercase;margin-bottom:8px}
.cda-accounts h1{font-size:2rem;line-height:1.15;margin:0 0 8px;color:#102348}
.cda-accounts__subtitle{margin:0;color:#65738a;font-size:1rem}
.cda-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:12px;padding:12px 17px;font-weight:800;text-decoration:none;cursor:pointer;transition:.18s ease;font-size:.92rem}
.cda-btn:hover{transform:translateY(-1px)}
.cda-btn--primary{background:linear-gradient(135deg,#3767ef,#7c4df6);color:#fff;box-shadow:0 10px 24px rgba(79,89,235,.24)}
.cda-btn--light{background:#eef3ff;color:#2448bf}
.cda-btn--danger{background:#fff0f0;color:#c43333}
.cda-btn--success{background:#eafaf0;color:#177a42}
.cda-btn--small{padding:8px 11px;border-radius:9px;font-size:.82rem}
.cda-accounts__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.cda-stat{background:#fff;border:1px solid #e3e9f2;border-radius:16px;padding:17px 18px;box-shadow:0 8px 24px rgba(29,47,78,.05)}
.cda-stat__label{font-size:.78rem;font-weight:800;color:#718096;text-transform:uppercase;letter-spacing:.08em}
.cda-stat__value{font-size:1.65rem;font-weight:900;color:#102348;margin-top:5px}
.cda-panel{background:#fff;border:1px solid #e1e7f0;border-radius:18px;box-shadow:0 10px 30px rgba(28,46,78,.06);overflow:hidden}
.cda-panel__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #edf1f6}
.cda-panel__title{font-weight:850;color:#102348}
.cda-panel__hint{font-size:.86rem;color:#748096}
.cda-table-wrap{overflow:auto}
.cda-table{width:100%;border-collapse:collapse;min-width:900px}
.cda-table th{background:#f7f9fc;padding:13px 16px;text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:#6b7890;border-bottom:1px solid #e7ecf3}
.cda-table td{padding:16px;border-bottom:1px solid #eef2f7;vertical-align:middle}
.cda-table tr:last-child td{border-bottom:0}
.cda-table tr:hover td{background:#fbfcff}
.cda-user{display:flex;align-items:center;gap:12px}
.cda-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#edf2ff,#f4ecff);color:#415ac9;font-weight:900}
.cda-user__name{font-weight:850;color:#102348}
.cda-user__mail{font-size:.82rem;color:#7a879b;margin-top:2px}
.cda-role-list{display:flex;flex-wrap:wrap;gap:6px}
.cda-role{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eef3ff;color:#3150ba;font-size:.76rem;font-weight:800}
.cda-status{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:850}
.cda-status::before{content:"";width:7px;height:7px;border-radius:50%}
.cda-status--on{background:#eaf8ef;color:#197643}
.cda-status--on::before{background:#23a45d}
.cda-status--off{background:#f0f2f6;color:#68758b}
.cda-status--off::before{background:#8d98aa}
.cda-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cda-inline{display:inline}
.cda-empty{padding:48px 24px;text-align:center;color:#78859a}
@media(max-width:900px){
 .cda-accounts{padding:18px}
 .cda-accounts__head{flex-direction:column}
 .cda-accounts__stats{grid-template-columns:1fr}
 .cda-table{min-width:0}
 .cda-table thead{display:none}
 .cda-table,.cda-table tbody,.cda-table tr,.cda-table td{display:block;width:100%}
 .cda-table tr{padding:16px;border-bottom:1px solid #e9eef5}
 .cda-table td{padding:7px 0;border:0}
 .cda-table td::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:800;color:#8490a3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
 .cda-table td:first-child::before{display:none}
}
</style>

<div class="cda-accounts">
    <div class="cda-accounts__head">
        <div>
            <div class="cda-accounts__eyebrow">Administration</div>
            <h1>Comptes utilisateurs</h1>
            <p class="cda-accounts__subtitle">
                Gérez les accès, les rôles et l’état des comptes de l’ERP.
            </p>
        </div>
        <a class="cda-btn cda-btn--primary" href="/public/administration/securite" class="cda-btn cda-btn--light">🛡 Autorisations</a>
        <a href="/public/administration/comptes/nouveau">
            <span>＋</span> Créer un compte
        </a>
    </div>

    <div class="cda-accounts__stats">
        <div class="cda-stat">
            <div class="cda-stat__label">Comptes enregistrés</div>
            <div class="cda-stat__value"><?= $total ?></div>
        </div>
        <div class="cda-stat">
            <div class="cda-stat__label">Comptes actifs</div>
            <div class="cda-stat__value"><?= $actifs ?></div>
        </div>
        <div class="cda-stat">
            <div class="cda-stat__label">Comptes inactifs</div>
            <div class="cda-stat__value"><?= $inactifs ?></div>
        </div>
    </div>

    <section class="cda-panel">
        <div class="cda-panel__head">
            <div class="cda-panel__title">Liste des utilisateurs</div>
            <div class="cda-panel__hint"><?= $total ?> compte<?= $total>1?'s':'' ?></div>
        </div>

        <?php if($users): ?>
        <div class="cda-table-wrap">
            <table class="cda-table">
                <thead>
                    <tr>
                        <th>Utilisateur</th>
                        <th>Rôle(s)</th>
                        <th>Dernière connexion</th>
                        <th>État</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                <?php foreach($users as $user): ?>
                    <?php
                    $initials=mb_strtoupper(
                        mb_substr((string)$user['prenom'],0,1)
                        .mb_substr((string)$user['nom'],0,1)
                    );
                    $roles=array_filter(array_map('trim',explode(',',(string)($user['roles'] ?? ''))));
                    ?>
                    <tr>
                        <td data-label="Utilisateur">
                            <div class="cda-user">
                                <div class="cda-avatar"><?= htmlspecialchars($initials) ?></div>
                                <div>
                                    <div class="cda-user__name">
                                        <?= htmlspecialchars($user['prenom'].' '.$user['nom']) ?>
                                    </div>
                                    <div class="cda-user__mail"><?= htmlspecialchars($user['email']) ?></div>
                                </div>
                            </div>
                        </td>
                        <td data-label="Rôles">
                            <div class="cda-role-list">
                                <?php if($roles): ?>
                                    <?php foreach($roles as $role): ?>
                                        <span class="cda-role"><?= htmlspecialchars($role) ?></span>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <span class="cda-role">Aucun rôle</span>
                                <?php endif; ?>
                            </div>
                        </td>
                        <td data-label="Dernière connexion">
                            <?= htmlspecialchars($user['derniere_connexion_at'] ?: 'Jamais connecté') ?>
                        </td>
                        <td data-label="État">
                            <span class="cda-status <?= (int)$user['actif']===1 ? 'cda-status--on' : 'cda-status--off' ?>">
                                <?= (int)$user['actif']===1 ? 'Actif' : 'Inactif' ?>
                            </span>
                        </td>
                        <td data-label="Actions">
                            <div class="cda-actions">
                                <a class="cda-btn cda-btn--light cda-btn--small"
                                   href="/public/administration/comptes/modifier?id=<?= (int)$user['id'] ?>">
                                    Modifier
                                </a>
                                <form method="post"
                                      action="/public/administration/comptes/activer"
                                      class="cda-inline"
                                      onsubmit="return confirm('Confirmer le changement d’état de ce compte ?');">
                                    <input type="hidden" name="_csrf" value="<?= htmlspecialchars($_SESSION['_csrf'] ?? '') ?>">
                                    <input type="hidden" name="id" value="<?= (int)$user['id'] ?>">
                                    <button class="cda-btn <?= (int)$user['actif']===1 ? 'cda-btn--danger' : 'cda-btn--success' ?> cda-btn--small"
                                            type="submit">
                                        <?= (int)$user['actif']===1 ? 'Désactiver' : 'Activer' ?>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php else: ?>
            <div class="cda-empty">Aucun compte utilisateur n’est enregistré.</div>
        <?php endif; ?>
    </section>
</div>
