<?php require_once __DIR__ . '/_sidebar.php'; ?>
<main class="flex-1 min-h-screen bg-gray-50 py-16 md:py-0 md:pl-64">
    <div class="max-w-7xl mx-auto px-4 py-8 md:py-16">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-10">
            <div>
                <h1 class="text-4xl font-bold text-premium-charcoal">Admin Users</h1>
                <p class="mt-2 text-architectural-gray">Manage admin accounts and update login credentials.</p>
            </div>
            <a href="<?= htmlspecialchars($baseUrl) ?>/admin/users/create" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-5 py-3 text-sm font-medium text-premium-charcoal hover:bg-slate-100 transition">
                <span class="material-symbols-outlined">add</span> Create User
            </a>
        </div>

        <?php if (empty($users)): ?>
            <div class="rounded-3xl bg-white p-8 shadow-sm border border-slate-200">
                <p class="text-slate-600">No users found. Create the first admin user.</p>
            </div>
        <?php else: ?>
            <div class="overflow-hidden rounded-3xl bg-white shadow-sm border border-slate-200">
                <table class="min-w-full divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">ID</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Name</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Email</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Role</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Phone</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Status</th>
                            <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 bg-white">
                        <?php foreach ($users as $user): ?>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700"><?= htmlspecialchars($user['id']) ?></td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700"><?= htmlspecialchars($user['name']) ?></td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700"><?= htmlspecialchars($user['email']) ?></td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700"><?= htmlspecialchars($user['role_name'] ?? 'User') ?></td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700"><?= htmlspecialchars($user['phone'] ?? '-') ?></td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold <?= $user['status'] === 'Active' ? 'text-emerald-600' : 'text-amber-600' ?>"><?= htmlspecialchars($user['status']) ?></td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="<?= htmlspecialchars($baseUrl) ?>/admin/users/edit?id=<?= htmlspecialchars($user['id']) ?>" class="text-balorp-magenta hover:underline">Edit</a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>
</main>
</div>
