"use client"

import * as React from "react"
import { useSearchParams } from "next/navigation"

import { RoleList } from "@/modules/rbac/components/role-list"
import { RoleFormDialog } from "@/modules/rbac/components/role-form-dialog"
import type { RoleWithStats } from "@/modules/rbac/types"

interface RoleManagementViewProps {
  roles: RoleWithStats[]
}

/**
 * Client wrapper for the roles page. Handles the `?new=1` query param to
 * auto-open the create dialog.
 */
export function RoleManagementView({ roles }: RoleManagementViewProps) {
  const searchParams = useSearchParams()
  const [createOpen, setCreateOpen] = React.useState(
    searchParams.get("new") === "1"
  )

  return (
    <>
      <RoleList roles={roles} />
      <RoleFormDialog open={createOpen} onOpenChange={setCreateOpen} />
    </>
  )
}
