import React from 'react'

const TONE_STYLES = {
  sky: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
  amber: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
  emerald: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
  violet: 'border-violet-300/20 bg-violet-400/10 text-violet-100',
}

function StatCard({ icon, label, value, tone, hint }) {
  return (
    <div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4 shadow-[0_18px_42px_rgba(2,6,23,0.18)]">
      <div className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl border ${TONE_STYLES[tone] || TONE_STYLES.sky}`}>
        <i className={`fa-solid ${icon} text-sm`} />
      </div>
      <div className="mt-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</div>
      <div className="mt-1 text-2xl font-bold tracking-tight text-white">{value}</div>
      {hint ? <div className="mt-2 text-xs leading-relaxed text-slate-400">{hint}</div> : null}
    </div>
  )
}

export default function ProfileWorldStatsRow({ summary }) {
  const worldAppearances = summary?.world_appearances || summary?.worlds_joined || 0

  return (
    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
      <StatCard
        icon="fa-globe"
        label="World Appearances"
        value={worldAppearances}
        tone="sky"
        hint={summary?.active_year_span?.label ? `Active across ${summary.active_year_span.label}` : 'Edition-aware creator history'}
      />
      <StatCard
        icon="fa-stars"
        label="Featured"
        value={summary?.featured_appearances || 0}
        tone="amber"
        hint="Editorial features and highlighted placements"
      />
      <StatCard
        icon="fa-trophy"
        label="Wins / Finalists"
        value={summary?.finalist_winner_appearances || 0}
        tone="emerald"
        hint="Higher-tier placements tied to world-linked challenges"
      />
      <StatCard
        icon="fa-bolt"
        label="Spotlights"
        value={summary?.spotlight_appearances || 0}
        tone="violet"
        hint="Editorial spotlight moments across editions"
      />
    </div>
  )
}