"use client";

import { useQuery } from "@tanstack/react-query";
import { PageHeader, EmptyState } from "@/components/ds";
import { loyaltyApi } from "@/modules/loyalty/services/loyalty-api";
import { useTenantId } from "@/hooks/useTenantId";
import { LoyaltyBreadcrumbs } from "@/modules/loyalty/components/LoyaltyBreadcrumbs";
import { LoyaltyPageLoader, LoyaltyPageError } from "@/modules/loyalty/pages/shared";
import { LoyaltyTablePage } from "@/modules/loyalty/design-system";

export default function BenefitsPage() {
  const { tenantId } = useTenantId();
  const q = useQuery({
    queryKey: ["loyalty", tenantId, "tier-benefits"],
    queryFn: () => loyaltyApi.tiers.list(tenantId!, { page: 1, page_size: 500 }),
    enabled: !!tenantId,
  });
  if (!tenantId || q.isLoading) return <LoyaltyPageLoader />;
  if (q.error) return <LoyaltyPageError error={q.error} onRetry={() => q.refetch()} />;
  return (
    <div>
      <LoyaltyBreadcrumbs items={[{ label: "مزایا" }]} />
      <PageHeader title="مزایای سطوح" description="benefits از MembershipTier واقعی." />
      <LoyaltyTablePage
        title="مزایا"
        columns={[
          { key: "name", header: "سطح" },
          { key: "min_points", header: "حداقل امتیاز" },
          {
            key: "benefits",
            header: "مزایا",
            render: (r) => <code className="text-xs">{JSON.stringify(r.benefits ?? {})}</code>,
          },
        ]}
        rows={(q.data ?? []) as unknown as Record<string, unknown>[]}
        empty={<EmptyState title="مزیتی تعریف نشده" />}
      />
    </div>
  );
}
