"use client";

import { useQuery } from "@tanstack/react-query";
import { useTenantId } from "@/hooks/useTenantId";
import { deliveryApi } from "@/modules/delivery/services/delivery-api";
import { DeliveryPageLoader, DeliveryPageError } from "@/modules/delivery/pages/shared";
import { PageHeader, Card, CardContent, Badge } from "@/components/ds";
import { DeliveryBreadcrumbs } from "@/modules/delivery/components/DeliveryBreadcrumbs";

export const PermissionsPage = function DeliveryPermissionsPage() {
  const { tenantId } = useTenantId();
  const q = useQuery({
    queryKey: ["delivery", tenantId, "permissions-catalog"],
    queryFn: () => deliveryApi.permissions.catalog(tenantId!),
    enabled: !!tenantId,
  });
  if (!tenantId || q.isLoading) return <DeliveryPageLoader />;
  if (q.error) return <DeliveryPageError error={q.error} onRetry={() => q.refetch()} />;
  return (
    <div>
      <DeliveryBreadcrumbs current="مجوزها" />
      <PageHeader title="کاتالوگ مجوزها" description={`پیشوند: ${q.data?.prefix} — ${q.data?.count} مجوز`} />
      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
        {q.data?.permissions.map((p) => (
          <Card key={p}><CardContent className="p-2"><code className="text-xs">{p}</code></CardContent></Card>
        ))}
      </div>
    </div>
  );
};
export default PermissionsPage;