import type { UserLevel } from '@/types'
import { calcNumericLevel } from './Dashboard'

const LEVEL_NAMES: Record<UserLevel, string> = {
  beginner: 'Beginner',
  bronze: 'Đồng',
  silver: 'Bạc',
  gold: 'Vàng',
  master: 'Master',
}

interface Props {
  xu: number
  streak: number
  xp: number
  level: UserLevel
}

export function StatsRow({ xu, streak, xp, level }: Props) {
  const numericLevel = calcNumericLevel(xp)

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mb-6">
      {/* Xu Balance */}
      <div className="relative overflow-hidden bg-white p-6 rounded-xl shadow-sm group">
        <div className="absolute -right-4 -top-4 w-24 h-24 bg-amber-100 rounded-full opacity-40 blur-2xl group-hover:opacity-60 transition-opacity" />
        <span className="text-xs uppercase tracking-widest text-slate-400 font-bold">Số dư Xu</span>
        <div className="flex items-center gap-3 mt-1">
          <span className="text-4xl font-extrabold text-slate-800">{xu.toLocaleString('vi-VN')}</span>
          <span className="material-symbols-outlined text-3xl text-amber-400" style={{ fontVariationSettings: "'FILL' 1" }}>
            monetization_on
          </span>
        </div>
        <p className="text-xs text-slate-400 mt-1.5 font-medium">Dùng để mở tính năng premium</p>
      </div>

      {/* Streak */}
      <div className="relative overflow-hidden bg-blue-600 p-6 rounded-xl shadow-sm">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 opacity-90" />
        <div className="relative z-10 text-white">
          <span className="text-xs uppercase tracking-widest opacity-75 font-bold">Chuỗi học tập</span>
          <div className="flex items-center gap-3 mt-1">
            <span className="text-4xl font-extrabold">{streak} Ngày</span>
            <span className="material-symbols-outlined text-3xl text-amber-300" style={{ fontVariationSettings: "'FILL' 1" }}>
              local_fire_department
            </span>
          </div>
          <p className="text-xs opacity-80 mt-1.5 font-medium">
            {streak >= 7 ? 'Bạn thuộc top 5% người học!' : 'Giữ vững chuỗi học mỗi ngày nhé!'}
          </p>
        </div>
      </div>

      {/* Level */}
      <div className="bg-white p-6 rounded-xl shadow-sm flex items-center justify-between">
        <div>
          <span className="text-xs uppercase tracking-widest text-slate-400 font-bold">Cấp độ</span>
          <div className="flex items-center gap-2 mt-1">
            <span className="text-4xl font-extrabold text-slate-800">Level {numericLevel}</span>
          </div>
          <span className="inline-block mt-2 px-3 py-1 bg-amber-50 text-amber-600 text-xs font-bold rounded-full border border-amber-200">
            Hạng {LEVEL_NAMES[level]}
          </span>
        </div>
        <div className="w-14 h-14 bg-slate-100 flex items-center justify-center rounded-2xl rotate-12 flex-shrink-0">
          <span className="material-symbols-outlined text-blue-600 text-3xl">military_tech</span>
        </div>
      </div>
    </div>
  )
}
