import React from 'react'
import AchievementsList from '../../achievements/AchievementsList'

export default function TabAchievements({ achievements, worldRewards, worldHistory, onTabChange }) {
  const unlocked = Array.isArray(achievements?.unlocked) ? achievements.unlocked : []
  const locked = Array.isArray(achievements?.locked) ? achievements.locked : []
  const historyAvailable = Boolean(worldHistory?.summary?.available)
  const worldAppearances = worldHistory?.summary?.world_appearances || worldHistory?.summary?.worlds_joined || worldRewards?.count || 0
  const featuredCount = worldHistory?.summary?.featured_appearances || 0
  const winnerFinalistCount = worldHistory?.summary?.finalist_winner_appearances || 0

  return (
    <div
      id="tabpanel-achievements"
      role="tabpanel"
      aria-labelledby="tab-achievements"
      className="pt-6"
    >
      <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
        <div>
          <h2 className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Achievements</h2>
          <p className="mt-2 text-sm text-slate-300">
            Milestones, creator wins, and level-based unlocks collected on Skinbase.
          </p>
        </div>
        <div className="flex gap-3 text-xs text-slate-400">
          <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">
            {achievements?.counts?.unlocked || 0} unlocked
          </span>
          <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">
            {achievements?.counts?.total || 0} total
          </span>
        </div>
      </div>

      <AchievementsList unlocked={unlocked} locked={locked} />

      {historyAvailable ? (
        <section className="mt-8">
          <div className="rounded-[28px] border border-white/10 bg-white/[0.04] p-5 shadow-[0_18px_44px_rgba(2,6,23,0.18)] md:p-6">
            <div>
              <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Worlds history</h3>
              <p className="mt-2 text-sm text-slate-300">
                World participation and recognition now live in a dedicated history view so recurring editions, challenge results, and standout placements read like a creator story instead of a badge dump.
              </p>
            </div>

            <div className="mt-5 grid gap-3 md:grid-cols-3">
              <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-4">
                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">World Appearances</div>
                <div className="mt-2 text-2xl font-bold tracking-tight text-white">{worldAppearances}</div>
              </div>
              <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-4">
                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Featured</div>
                <div className="mt-2 text-2xl font-bold tracking-tight text-white">{featuredCount}</div>
              </div>
              <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-4">
                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Wins / Finalists</div>
                <div className="mt-2 text-2xl font-bold tracking-tight text-white">{winnerFinalistCount}</div>
              </div>
            </div>

            <div className="mt-5 flex flex-wrap gap-3">
              <button
                type="button"
                onClick={() => onTabChange?.('worlds')}
                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm font-medium text-slate-100 transition-colors hover:bg-white/[0.08]"
              >
                <i className="fa-solid fa-globe text-xs" />
                Open worlds history
              </button>
            </div>
          </div>
        </section>
      ) : null}
    </div>
  )
}