"use client";

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

export const PaymentOverview = function PaymentOverviewPage() {
  const caps = usePaymentCapabilities();
  const health = usePaymentHealth();

  if (caps.isLoading || health.isLoading) return <PaymentPageLoader />;
  if (caps.error) return <PaymentPageError error={caps.error} onRetry={() => caps.refetch()} />;

  const data = caps.data;

  return (
    <div className="space-y-6">
      <PageHeader
        title="نمای کلی"
        description="وضعیت workspace، باندل‌ها و حالت پرداخت پیش‌فرض."
        actions={
          <Badge tone={health.data?.status === "ok" ? "success" : "warning"}>
            {health.data?.status ?? "—"}
          </Badge>
        }
      />
      <PaymentStatCards
        items={[
          { label: "فاز سرویس", value: data?.phase ?? "—" },
          { label: "وضعیت workspace", value: data?.workspace_status ?? "—" },
          { label: "حالت پرداخت", value: data?.default_payment_mode ?? "—" },
          { label: "نسخه", value: data?.version ?? "—" },
        ]}
      />
      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardContent className="p-4">
            <h3 className="mb-3 text-sm font-semibold">باندل‌های فعال</h3>
            <ul className="space-y-1 text-sm">
              {(data?.active_bundles ?? []).map((b) => (
                <li key={b} className="font-mono text-secondary">{b}</li>
              ))}
              {(data?.active_bundles ?? []).length === 0 ? (
                <li className="text-[var(--muted)]">باندلی فعال نیست</li>
              ) : null}
            </ul>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <h3 className="mb-3 text-sm font-semibold">منابع پرداخت</h3>
            <p className="mb-2 text-xs text-[var(--muted)]">پشتیبانی‌شده</p>
            <div className="mb-3 flex flex-wrap gap-1">
              {(data?.payment_sources_supported ?? []).map((s) => (
                <Badge key={s} tone="success">{s}</Badge>
              ))}
            </div>
            <p className="mb-2 text-xs text-[var(--muted)]">رزرو شده</p>
            <div className="flex flex-wrap gap-1">
              {(data?.payment_sources_reserved ?? []).map((s) => (
                <Badge key={s}>{s}</Badge>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
      {data?.contract_versions ? (
        <Card>
          <CardContent className="p-4">
            <h3 className="mb-2 text-sm font-semibold">نسخه قراردادها</h3>
            <pre className="overflow-x-auto text-xs">{JSON.stringify(data.contract_versions, null, 2)}</pre>
          </CardContent>
        </Card>
      ) : null}
    </div>
  );
};

export default PaymentOverview;