import { NATIONS } from '../lib/format';

// Tek bir rozet — kazanıldıysa parlak, değilse kilitli/???
export default function BadgeTile({ badge, nation, progress, earned }) {
  const n = NATIONS[nation] || { color: '#d4af37', dark: '#0b0f1a', gradient: 'linear-gradient(135deg,#d4af37,#7c5a00)' };
  const pct = Math.min(100, Math.round((progress / (badge.target || 1)) * 100));
  const hidden = badge.hidden && !earned;

  return (
    <div
      className={`badge-tile glass ${earned ? 'earned' : ''}`}
      style={{ ['--bcolor']: n.color, ['--bgrad']: n.gradient }}
      title={earned || !hidden ? `${badge.title} — ${badge.description}` : 'Gizli rozet'}
    >
      <div className="badge-tier">S {badge.tier}</div>
      <div className="badge-icon">{earned ? badge.icon : hidden ? '❓' : badge.icon}</div>
      <div className="badge-title">{hidden ? '???' : badge.title}</div>
      <div className="badge-desc small">{hidden ? 'Gizli' : badge.description}</div>
      {earned ? (
        <div className="badge-earned">Kazanıldı ✓</div>
      ) : (
        <div className="badge-progress">
          <div className="progress-track">
            <div
              className="progress-fill"
              style={{ width: `${pct}%`, background: n.gradient, boxShadow: `0 0 10px ${n.color}55` }}
            />
          </div>
          <div className="tiny faint mono">
            {!hidden ? `${pct}%` : 'Gizli'}
            {!hidden && progress >= (badge.target || 1) ? '' : ''}
          </div>
        </div>
      )}
    </div>
  );
}