'use client';

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

type WalletCardProps = {
  balance?: number | null;
  loading?: boolean;
  /** رابط الشحن يوجّه لتسجيل الدخول */
  guestMode?: boolean;
};

export default function WalletCard({ balance = null, loading = false, guestMode = false }: WalletCardProps) {
  const { t, locale, isRtl } = useI18n();
  const nloc = numberLocale(locale);
  const displayBalance = balance != null ? Number(balance).toLocaleString(nloc) : '0';

  const topUpHref = guestMode ? '/login' : '/profile/wallet';

  return (
    <div dir={isRtl ? 'rtl' : 'ltr'} className="bg-[#1e3a5f] rounded-xl shadow-sm p-5 md:p-6 mb-6 text-white border border-[#1a3254]/50">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div className={`flex items-center gap-4 flex-1 min-w-0 ${isRtl ? 'flex-row' : 'flex-row'}`}>
          <div className="w-12 h-12 shrink-0 flex items-center justify-center bg-slate-700/90 rounded-lg">
            <i className="ri-wallet-3-line text-2xl text-slate-100"></i>
          </div>
          <div className={`min-w-0 ${isRtl ? 'text-right' : 'text-left'}`}>
            <h3 className="text-white/85 text-sm font-medium mb-1">{t('dashboard.walletBalance')}</h3>
            <div className={`flex items-baseline gap-2 flex-wrap ${isRtl ? 'justify-end' : 'justify-start'}`}>
              {loading ? (
                <span className="text-3xl md:text-4xl font-bold animate-pulse">--</span>
              ) : (
                <span className="text-3xl md:text-4xl font-bold tabular-nums">{displayBalance}</span>
              )}
              <span className="text-white/75 text-sm font-medium">{t('common.sar')}</span>
            </div>
          </div>
        </div>
        <Link
          href={topUpHref}
          className="flex items-center justify-center gap-2 bg-white/15 hover:bg-white/25 transition-colors px-4 py-3 rounded-xl cursor-pointer whitespace-nowrap shrink-0 sm:min-w-[140px]"
        >
          <span className="relative inline-flex items-center justify-center w-8 h-8">
            <i className="ri-wallet-3-line text-xl text-white/95"></i>
            <i className="ri-add-circle-fill text-xs text-white absolute -bottom-0.5 -right-0.5" aria-hidden />
          </span>
          <span className="font-semibold text-sm">{t('dashboard.topUp')}</span>
        </Link>
      </div>
    </div>
  );
}