"use client";

import React from "react";

import { useAuth } from "@/components/auth/authContext";
import ForbiddenView from "@/components/system/ForbiddenView";

import { canManageUsers as canManageUsersRole } from "@/lib/frontend/auth/roles";
import AdminUsersClient from "@/components/admin/users/AdminUsersClient";

/**
 * AdminUsersPage
 *
 * This component only gates access and then renders the real client UI.
 * No conditional hooks issue here because we only call useAuth().
 */
export default function AdminUsersPage() {
	const { status, user } = useAuth();
	const isAuthenticated = status === "authenticated" && user;

	// AuthGate already prevents rendering for unauthenticated users,
	// but we keep this as a defensive guard.
	if (!isAuthenticated) return null;

	const allowed = canManageUsersRole(user.role);
	if (!allowed) return <ForbiddenView />;

	return <AdminUsersClient />;
}