"use client";

const t = {
  en: {
    title: "Payment History",
    noPayments: "No payments recorded",
    amount: "Amount",
    method: "Method",
    reference: "Reference",
    date: "Date",
    STRIPE: "Card",
    MANUAL_CASH: "Cash",
    MANUAL_BANK_TRANSFER: "Bank Transfer",
    MANUAL_CHECK: "Check",
    MANUAL_OTHER: "Other",
  },
  ar: {
    title: "سجل المدفوعات",
    noPayments: "لا توجد مدفوعات مسجلة",
    amount: "المبلغ",
    method: "الطريقة",
    reference: "المرجع",
    date: "التاريخ",
    STRIPE: "بطاقة",
    MANUAL_CASH: "نقداً",
    MANUAL_BANK_TRANSFER: "تحويل بنكي",
    MANUAL_CHECK: "شيك",
    MANUAL_OTHER: "أخرى",
  },
};

interface Payment {
  id: string;
  amount: number;
  currency: string;
  method: string;
  reference?: string | null;
  paidAt: string;
  manualNotes?: string | null;
}

interface PaymentHistorySectionProps {
  payments: Payment[];
  currency: string;
  lang: string;
}

export function PaymentHistorySection({
  payments,
  currency,
  lang,
}: PaymentHistorySectionProps) {
  const isAr = lang === "ar";
  const labels = isAr ? t.ar : t.en;

  if (payments.length === 0) {
    return (
      <div className="text-center py-4 text-sm text-gray-400">
        {labels.noPayments}
      </div>
    );
  }

  return (
    <div dir={isAr ? "rtl" : "ltr"}>
      <h4 className="text-sm font-semibold text-gray-900 mb-3">
        {labels.title}
      </h4>
      <div className="space-y-2">
        {payments.map((payment) => (
          <div
            key={payment.id}
            className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded-lg text-sm"
          >
            <div className="flex items-center gap-3">
              <span className="font-medium text-gray-900">
                {payment.currency || currency} {payment.amount.toLocaleString()}
              </span>
              <span className="text-gray-500 text-xs px-2 py-0.5 bg-gray-100 rounded">
                {labels[payment.method as keyof typeof labels] ||
                  payment.method}
              </span>
              {payment.reference && (
                <span className="text-gray-400 text-xs">
                  {payment.reference}
                </span>
              )}
            </div>
            <span className="text-gray-500 text-xs">
              {new Date(payment.paidAt).toLocaleDateString(
                isAr ? "ar-QA" : "en-QA",
              )}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}