import { calcXpNextLevel, calcNumericLevel } from './Dashboard'

interface Props { xp: number }

function ProgressRing({ percent, xp, xpNext }: { percent: number; xp: number; xpNext: number }) {
  const r = 72
  const circ = 2 * Math.PI * r
  const offset = circ - (percent / 100) * circ

  return (
    <div className="relative w-44 h-44">
      <svg className="w-full h-full -rotate-90" viewBox="0 0 160 160">
        <circle cx="80" cy="80" r={r} fill="transparent" stroke="#e8eaed" strokeWidth="12" />
        <circle
          cx="80" cy="80" r={r}
          fill="transparent"
          stroke="#2563eb"
          strokeWidth="12"
          strokeDasharray={circ}
          strokeDashoffset={offset}
          strokeLinecap="round"
          className="transition-all duration-700"
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <span className="text-3xl font-extrabold text-slate-800">{percent}%</span>
        <span className="text-[10px] text-slate-400 font-bold mt-0.5">
          {xp.toLocaleString()} / {xpNext.toLocaleString()} XP
        </span>
      </div>
    </div>
  )
}

export function XpProgressCard({ xp }: Props) {
  const xpNext = calcXpNextLevel(xp)
  const levelXpStart = Math.floor(xp / 100) * 100
  const percent = Math.round(((xp - levelXpStart) / (xpNext - levelXpStart)) * 100)
  const nextLevel = calcNumericLevel(xp) + 1

  return (
    <div className="lg:col-span-5 bg-white p-6 rounded-xl shadow-sm flex flex-col items-center justify-center text-center">
      <h3 className="text-base font-bold mb-5 self-start text-slate-800">Tiến độ Cấp độ</h3>

      <ProgressRing percent={percent} xp={xp} xpNext={xpNext} />

      <p className="text-sm text-slate-400 font-medium mt-4">
        Chỉ còn {(xpNext - xp).toLocaleString()} XP nữa để đạt Level {nextLevel}!
      </p>

      <button className="mt-5 w-full py-2.5 bg-slate-100 hover:bg-slate-200 transition-colors rounded-xl font-bold text-sm text-blue-600">
        Xem nhiệm vụ XP
      </button>
    </div>
  )
}
