import { useXuTransactions } from '@/hooks/use-gamification'
import { useGamification } from '@/hooks/use-gamification'
import type { XuTransactionType } from '@/types'

const TX_ICON: Record<XuTransactionType, string> = {
  earn_welcome: 'redeem',
  earn_daily: 'check_circle',
  earn_streak: 'local_fire_department',
  earn_ads: 'play_circle',
  spend_freeze: 'ac_unit',
  spend_writing: 'auto_fix_high',
  spend_test: 'quiz',
}

export function XuWalletCard() {
  const { data: gam } = useGamification()
  const { data: txs, isLoading } = useXuTransactions(5)

  const balance = gam?.xu ?? 0

  return (
    <section className="col-span-12 md:col-span-4 bg-blue-600 text-white rounded-xl p-6 relative overflow-hidden flex flex-col justify-between shadow-sm">
      {/* Decorative blobs */}
      <div className="absolute -right-6 -top-6 w-28 h-28 bg-white/10 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute -left-6 -bottom-6 w-28 h-28 bg-blue-400/30 rounded-full blur-3xl pointer-events-none" />

      <div className="relative z-10">
        <p className="text-xs font-bold uppercase tracking-widest opacity-70 mb-1">Ví Xu của bạn</p>
        <div className="text-4xl font-extrabold tracking-tight">
          {balance.toLocaleString('vi-VN')} Xu
        </div>
      </div>

      <div className="relative z-10 mt-5 space-y-2.5">
        {isLoading && (
          <>
            {[1, 2].map((i) => (
              <div key={i} className="h-10 bg-white/10 rounded-lg animate-pulse" />
            ))}
          </>
        )}

        {!isLoading && txs && txs.length === 0 && (
          <div className="bg-white/10 rounded-lg px-3 py-2.5 text-xs opacity-70 text-center">
            Chưa có giao dịch nào
          </div>
        )}

        {!isLoading && txs && txs.map((t) => (
          <div
            key={t.id}
            className="bg-white/10 backdrop-blur-md rounded-lg px-3 py-2.5 flex items-center justify-between text-xs"
          >
            <div className="flex items-center gap-2">
              <span className="material-symbols-outlined" style={{ fontSize: 16 }}>
                {TX_ICON[t.type] ?? 'swap_horiz'}
              </span>
              <span className="truncate max-w-[120px]">{t.description ?? t.type}</span>
            </div>
            <span className={`font-bold ${t.amount > 0 ? 'text-green-300' : 'text-red-300'}`}>
              {t.amount > 0 ? `+${t.amount}` : t.amount} Xu
            </span>
          </div>
        ))}
      </div>
    </section>
  )
}