"use client"

import { KeyRound } from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { useTranslations } from "next-intl"

import { PERMISSION_CATALOG } from "../lib/permission-catalog"

interface PermissionCatalogViewProps {
  /** Map of permission value → number of roles that have it. */
  roleCountsByPermission?: Record<string, number>
}

/**
 * Read-only catalog of all permission points, grouped by module.
 * Shows each permission's key, value, and (optionally) how many roles grant it.
 */
export function PermissionCatalogView({
  roleCountsByPermission,
}: PermissionCatalogViewProps) {
  const t = useTranslations("rbac")

  const totalPermissions = PERMISSION_CATALOG.reduce(
    (sum, g) => sum + g.permissions.length,
    0
  )

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <KeyRound className="h-5 w-5" />
          {t("permissions.title")}
          <Badge variant="outline" className="ml-2">
            {t("permissions.countLabel", { count: totalPermissions })}
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-6" aria-label={t("permissions.catalogAriaLabel")}>
          {PERMISSION_CATALOG.map((group) => (
            <section key={group.group} className="space-y-2" aria-label={t.has(group.labelKey.replace("rbac:", "")) ? t(group.labelKey.replace("rbac:", "")) : group.group}>
              <h3 className="text-sm font-semibold border-b pb-2">
                {t.has(group.labelKey.replace("rbac:", ""))
                  ? t(group.labelKey.replace("rbac:", ""))
                  : group.group}
              </h3>
              <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
                {group.permissions.map((perm) => {
                  const count = roleCountsByPermission?.[perm.value] ?? 0
                  return (
                    <div
                      key={perm.key}
                      className="rounded-md border p-3 space-y-1"
                    >
                      <div className="flex items-center justify-between gap-2">
                        <p className="text-sm font-medium leading-tight">
                          {t.has(perm.labelKey.replace("rbac:", ""))
                            ? t(perm.labelKey.replace("rbac:", ""))
                            : perm.key}
                        </p>
                        {roleCountsByPermission && (
                          <Badge variant="secondary" className="shrink-0">
                            {t("permissions.roleCount", { count })}
                          </Badge>
                        )}
                      </div>
                      <p className="text-xs text-muted-foreground font-mono break-all">
                        {perm.value}
                      </p>
                    </div>
                  )
                })}
              </div>
            </section>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
