"use client";

import { UserManagement } from "@/components/users/UserManagement";
import { PageHeader } from "@/components/ui/PageHeader";
import { useUser } from "@clerk/nextjs";
import { useSearchParams } from "next/navigation";
import { GymSelector } from "@/components/gym/GymSelector";

export default function UsersPage() {
  const { user } = useUser();
  const searchParams = useSearchParams();

  const userRole = (user?.publicMetadata?.role as string) ?? "client";
  const gymId = searchParams.get("gymId") ?? undefined;

  return (
    <div className="space-y-8">
      <PageHeader
        title="Users"
        description="Manage your gym members, trainers, and administrators"
        breadcrumbs={[{ label: "Users", href: "/users" }]}
        actions={<GymSelector userRole={userRole} />}
      />

      <div className="card-modern">
        <UserManagement gymId={gymId} />
      </div>
    </div>
  );
}