'use client';

import Link from 'next/link';
import { useI18n } from '@/lib/i18n/context';

export interface RechargeItem {
  id: number;
  request_number: string;
  amount: number;
  status: string;
  created_at?: string;
  destination_bank?: string;
  bank_name?: string;
  balance_before?: number | null;
  balance_after?: number | null;
}

interface LatestRechargesProps {
  recharges: RechargeItem[];
  loading?: boolean;
}

const STATUS_COLOR: Record<string, string> = {
  pending: 'text-yellow-600',
  completed: 'text-green-600',
  approved: 'text-green-600',
  rejected: 'text-red-500',
};

const STATUS_KEYS = ['pending', 'completed', 'approved', 'rejected'] as const;

function isRechargeStatus(s: string): s is (typeof STATUS_KEYS)[number] {
  return (STATUS_KEYS as readonly string[]).includes(s);
}

export default function LatestRecharges({ recharges, loading }: LatestRechargesProps) {
  const { t, isRtl, locale } = useI18n();
  const numberLocale = locale === 'ar' ? 'ar-SA' : 'en-US';
  const moreIcon = isRtl ? 'ri-arrow-left-s-line' : 'ri-arrow-right-s-line';

  const statusLabel = (status: string) =>
    isRechargeStatus(status) ? t(`rechargeStatus.${status}`) : status;

  const formatWhen = (iso?: string) => {
    if (!iso) return '';
    const d = new Date(iso);
    const time = d.toLocaleTimeString(numberLocale, { hour: '2-digit', minute: '2-digit' });
    const date = d.toLocaleDateString(numberLocale);
    return `${time} - ${date}`;
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 flex flex-col h-full">
      <div className="flex items-center justify-between gap-3 mb-4">
        <h2 className="text-lg font-bold text-gray-900 whitespace-nowrap">{t('latestRecharges.title')}</h2>
        <Link
          href="/wallet-history"
          className="text-[#2563eb] hover:text-[#1d4ed8] font-semibold cursor-pointer whitespace-nowrap flex items-center gap-1 text-sm"
        >
          <span>{t('latestRecharges.fullHistory')}</span>
          <i className={`${moreIcon} text-lg`} aria-hidden />
        </Link>
      </div>

      <div className="flex-1 overflow-hidden">
        {loading ? (
          <div className="space-y-3">
            {[1, 2, 3].map((i) => (
              <div key={i} className="h-16 bg-gray-100 rounded-lg animate-pulse" />
            ))}
          </div>
        ) : recharges.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-10 text-gray-400">
            <i className="ri-wallet-3-line text-4xl mb-2"></i>
            <span className="text-sm">{t('latestRecharges.empty')}</span>
          </div>
        ) : (
          <div className="space-y-3">
            {recharges.map((r) => {
              const color = STATUS_COLOR[r.status] ?? 'text-gray-500';
              const bank = r.destination_bank || r.bank_name;
              const showBalance =
                (r.status === 'completed' || r.status === 'approved') &&
                r.balance_before != null &&
                r.balance_after != null;

              return (
                <div
                  key={r.id}
                  className="flex items-start justify-between gap-3 p-4 rounded-xl bg-[#f9fafb] hover:bg-sky-50/60 border border-transparent hover:border-sky-100 transition-colors"
                >
                  <div className="flex-1 min-w-0">
                    <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1 mb-1">
                      <span className="text-blue-600 font-bold text-sm">{r.request_number}</span>
                      {r.created_at && (
                        <span className="text-gray-500 text-xs">{formatWhen(r.created_at)}</span>
                      )}
                    </div>
                    <div className="flex flex-wrap items-center gap-2">
                      <span className={`text-xs font-semibold ${color}`}>{statusLabel(r.status)}</span>
                    </div>
                    {bank && (
                      <p className="text-xs text-gray-500 mt-1 truncate">
                        {t('latestRecharges.toBank', { bank })}
                      </p>
                    )}
                    {showBalance && (
                      <p className="text-xs text-gray-600 mt-1">
                        {t('latestRecharges.balanceLine', {
                          before: r.balance_before!.toLocaleString(numberLocale),
                          after: r.balance_after!.toLocaleString(numberLocale),
                          currency: t('common.sar'),
                        })}
                      </p>
                    )}
                  </div>
                  <div className="shrink-0 flex items-baseline gap-1">
                    <span className="text-green-600 font-bold text-sm sm:text-base tabular-nums">
                      +{r.amount.toLocaleString(numberLocale, { maximumFractionDigits: 2 })}
                    </span>
                    <span className="text-gray-500 text-xs">{t('common.sar')}</span>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}