TorbatYar/frontend/modules/payment/features/capabilities.tsx

"use client";

import { usePaymentCapabilities } from "@/modules/payment/hooks/usePaymentCapabilities";
import { PaymentPageLoader, PaymentPageError } from "@/modules/payment/pages/shared";
import { PageHeader, Card, CardContent, Badge } from "@/components/ds";

export const PaymentCapabilities = function PaymentCapabilitiesPage() {
  const q = usePaymentCapabilities();
  if (q.isLoading) return <PaymentPageLoader />;
  if (q.error) return <PaymentPageError error={q.error} onRetry={() => q.refetch()} />;

  const toggles = q.data?.feature_toggles ?? {};

  return (
    <div className="space-y-6">
      <PageHeader
        title="قابلیت‌ها"
        description={`فاز ${q.data?.phase} — ${q.data?.service}`}
      />
      <Card>
        <CardContent className="grid gap-2 p-4 text-sm sm:grid-cols-2">
          <p><span className="text-[var(--muted)]">workspace:</span> {q.data?.workspace_status}</p>
          <p><span className="text-[var(--muted)]">حالت پیش‌فرض:</span> {q.data?.default_payment_mode}</p>
        </CardContent>
      </Card>
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {Object.entries(toggles).map(([k, v]) => (
          <Card key={k}>
            <CardContent className="flex items-center justify-between p-3">
              <span className="text-sm font-mono">{k}</span>
              <Badge tone={v ? "success" : "default"}>{v ? "فعال" : "غیرفعال"}</Badge>
            </CardContent>
          </Card>
        ))}
        {Object.keys(toggles).length === 0 ? (
          <p className="text-sm text-[var(--muted)]">کلید ویژگی از capabilities دریافت نشد.</p>
        ) : null}
      </div>
      {q.data?.active_bundles ? (
        <Card>
          <CardContent className="p-4">
            <h3 className="mb-2 text-sm font-semibold">باندل‌های فعال</h3>
            <ul className="space-y-1 text-sm font-mono">
              {q.data.active_bundles.map((b) => (
                <li key={b}>{b}</li>
              ))}
            </ul>
          </CardContent>
        </Card>
      ) : null}
    </div>
  );
};

export default PaymentCapabilities;