<div class="p-8 max-w-7xl mx-auto space-y-6">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white tracking-tight">Team & Agents Management</h1>
            <p class="text-slate-400 text-xs">Manage CRM user accounts, agent roles, and chat assignment permissions.</p>
        </div>
        <button onclick="document.getElementById('create-user-modal').classList.remove('hidden')" class="bg-emerald-500 hover:bg-emerald-600 text-slate-950 text-xs font-bold px-4 py-2.5 rounded-xl shadow-lg shadow-emerald-500/20 transition flex items-center space-x-1.5">
            <i class="fa-solid fa-user-plus text-xs"></i>
            <span>Add Team Member</span>
        </button>
    </div>

    <!-- Users Table -->
    <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-xl">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-300">
                <thead class="bg-slate-950/70 border-b border-slate-800 text-slate-400 font-semibold uppercase tracking-wider">
                    <tr>
                        <th class="px-6 py-4">User</th>
                        <th class="px-6 py-4">Email</th>
                        <th class="px-6 py-4">Role</th>
                        <th class="px-6 py-4">Status</th>
                        <th class="px-6 py-4">Last Login</th>
                        <th class="px-6 py-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60">
                    <?php foreach ($users as $u): ?>
                        <tr class="hover:bg-slate-800/30 transition">
                            <td class="px-6 py-4 font-bold text-white flex items-center space-x-3">
                                <div class="w-8 h-8 rounded-lg bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold text-xs">
                                    <?= strtoupper(substr($u['name'], 0, 2)) ?>
                                </div>
                                <span><?= htmlspecialchars($u['name']) ?></span>
                            </td>
                            <td class="px-6 py-4 text-slate-400 font-mono">
                                <?= htmlspecialchars($u['email']) ?>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full <?= $u['role'] === 'admin' ? 'bg-purple-500/20 text-purple-300 border border-purple-500/30' : 'bg-blue-500/20 text-blue-300 border border-blue-500/30' ?>">
                                    <?= strtoupper($u['role']) ?>
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full <?= $u['status'] === 'active' ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-red-500/20 text-red-400' ?>">
                                    <?= strtoupper($u['status']) ?>
                                </span>
                            </td>
                            <td class="px-6 py-4 text-slate-500">
                                <?= $u['last_login'] ? date('M d, Y H:i', strtotime($u['last_login'])) : 'Never' ?>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <?php if ($u['id'] !== 1): ?>
                                    <form method="POST" action="/users/<?= $u['id'] ?>/delete" class="inline" onsubmit="return confirm('Delete this user?');">
                                        <button type="submit" class="p-1 text-slate-500 hover:text-red-400 transition">
                                            <i class="fa-solid fa-trash-can text-xs"></i>
                                        </button>
                                    </form>
                                <?php else: ?>
                                    <span class="text-[10px] text-slate-600">Super Admin</span>
                                <?php endif; ?>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

</div>

<!-- Create User Modal -->
<div id="create-user-modal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-white text-base">Add New Team Member</h3>
            <button onclick="document.getElementById('create-user-modal').classList.add('hidden')" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form method="POST" action="/users" class="space-y-4">
            <div>
                <label class="block text-xs text-slate-400 mb-1">Full Name</label>
                <input type="text" name="name" required placeholder="Agent Name" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Email Address</label>
                <input type="email" name="email" required placeholder="agent@crm.local" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Password</label>
                <input type="password" name="password" required placeholder="••••••••" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Role</label>
                    <select name="role" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        <option value="agent">Agent</option>
                        <option value="manager">Manager</option>
                        <option value="admin">Administrator</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Phone (Optional)</label>
                    <input type="text" name="phone" placeholder="+123..." class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
            </div>
            <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 rounded-xl transition">
                Create User Account
            </button>
        </form>
    </div>
</div>
