"use client";

import { useMembershipTransactions } from "@/hooks/useApi";
import { useAppSettings } from "@/lib/settingsContext";
import { TEXT } from "@/branding";
import { cn } from "@/lib/utils";

export default function MembershipTransactions() {
  const { data, isLoading } = useMembershipTransactions();
  const { settings } = useAppSettings();
  const cs = settings.currencyCode;
  const transactions = data?.result ?? [];

  return (
    <div className="bg-white dark:bg-dm-surface rounded-2xl border border-gray-100 dark:border-dm-border shadow-sm overflow-hidden">
      <div className="px-5 py-4 border-b border-gray-100 dark:border-dm-border">
        <h3 className="text-sm font-bold text-gray-800 dark:text-white">{TEXT.membership.transactionsTitle}</h3>
      </div>

      {isLoading ? (
        <div className="p-5 space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="skeleton h-12 rounded-xl" />
          ))}
        </div>
      ) : transactions.length === 0 ? (
        <p className="px-5 py-8 text-center text-sm text-gray-400">{TEXT.membership.noTransactions}</p>
      ) : (
        <div className="divide-y divide-gray-50 dark:divide-dm-surface2">
          {transactions.map((tx) => (
            <div key={tx.id} className="flex items-center justify-between px-5 py-3.5">
              <div className="min-w-0">
                <p className="text-sm font-medium text-gray-800 dark:text-white truncate">
                  {tx.membership_plan_name ?? TEXT.membership.title}
                </p>
                {tx.transaction_id && (
                  <p className="text-xs text-gray-400 mt-0.5">{tx.transaction_id}</p>
                )}
                <p className="text-xs text-gray-400 mt-0.5">
                  {new Date(tx.created_at).toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" })}
                </p>
              </div>
              <span
                className={cn(
                  "text-sm font-black flex-shrink-0 ml-3",
                  tx.status === 0 ? "text-gray-400 line-through" : "text-primary-700",
                )}
              >
                {cs}{tx.price}
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}