import type { Metadata } from "next"
import type { JSX } from "react"
import { getTranslations } from "next-intl/server"

import { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"
import { getPermissionRoleCounts } from "@/modules/rbac/data-access-permissions"
import { PermissionCatalogView } from "@/modules/rbac/components/permission-catalog-view"

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("rbac")
  return {
    title: `${t("permissions.title")} - Next_Edu`,
    description: t("permissions.description"),
  }
}

export const dynamic = "force-dynamic"

export default async function AdminPermissionsPage(): Promise<JSX.Element> {
  await requirePermission(Permissions.PERMISSION_READ)

  const roleCountsByPermission = await getPermissionRoleCounts()

  return (
    <div className="flex h-full flex-col space-y-6 p-8">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Permission Catalog</h1>
        <p className="text-muted-foreground text-sm">
          All permission points defined in the system, grouped by module.
        </p>
      </div>

      <PermissionCatalogView roleCountsByPermission={roleCountsByPermission} />
    </div>
  )
}
