"use client";

import { PAYMENT_API_CATALOG } from "@/modules/payment/services/payment-api";
import { PageHeader, Card, CardContent, Badge } from "@/components/ds";

export const PaymentApiExplorer = function PaymentApiExplorerPage() {
  return (
    <div className="space-y-6">
      <PageHeader
        title="کاوشگر API"
        description="کاتالوگ endpointهای MVP (فاز 14.0–14.5) — بدون mock."
      />
      <div className="overflow-x-auto rounded-xl border border-[var(--border)] bg-[var(--surface)]">
        <table className="min-w-full text-sm">
          <thead className="bg-[var(--surface-muted)] text-[var(--muted)]">
            <tr>
              <th className="px-3 py-2 text-right font-medium">متد</th>
              <th className="px-3 py-2 text-right font-medium">مسیر</th>
              <th className="px-3 py-2 text-right font-medium">فاز</th>
            </tr>
          </thead>
          <tbody>
            {PAYMENT_API_CATALOG.map((row) => (
              <tr key={`${row.method}-${row.path}`} className="border-t border-[var(--border)]">
                <td className="px-3 py-2 font-mono text-xs">{row.method}</td>
                <td className="px-3 py-2 font-mono text-xs text-secondary">{row.path}</td>
                <td className="px-3 py-2">
                  <Badge>{row.phase}</Badge>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <Card>
        <CardContent className="p-4 text-xs text-[var(--muted)]">
          BFF: <code className="font-mono">/api/payment/*</code> — upstream port 8012. هدر Idempotency-Key برای POST درخواست پرداخت الزامی است.
        </CardContent>
      </Card>
    </div>
  );
};

export default PaymentApiExplorer;