const AchievementsScreen = ({ state }) => {
  const { achievements } = state;

  const RARITY_COLOR = { common: '#777', uncommon: '#34d399', rare: '#60a5fa', epic: '#a78bfa', legendary: 'var(--accent)' };
  const RARITY_LABEL = { common: 'コモン', uncommon: 'アンコモン', rare: 'レア', epic: 'エピック', legendary: 'レジェンダリー' };

  const earned    = achievements.filter(a => a.earned);
  const notEarned = achievements.filter(a => !a.earned);

  const Badge = ({ a, locked = false }) => {
    const rc = RARITY_COLOR[a.rarity];
    return (
      <div style={{
        background: locked ? '#080808' : '#0e0e0e',
        border: locked ? '1px solid #141414' : `1px solid ${rc}30`,
        borderRadius: 10, padding: 22, textAlign: 'center',
        opacity: locked ? .65 : 1, position: 'relative',
        transition: 'transform .18s, box-shadow .18s'
      }}
        onMouseEnter={e => { if (!locked) { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = `0 8px 24px ${rc}20`; }}}
        onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
      >
        {/* Rarity glow ring */}
        {!locked && (
          <div style={{
            position: 'absolute', inset: 0, borderRadius: 10,
            boxShadow: `inset 0 0 20px ${rc}10`, pointerEvents: 'none'
          }} />
        )}

        {/* Symbol */}
        <div style={{
          fontSize: 36, lineHeight: 1, marginBottom: 12,
          color: locked ? '#252525' : rc,
          filter: !locked && a.rarity === 'legendary' ? 'drop-shadow(0 0 8px rgba(245,158,11,.6))' : 'none'
        }}>{a.sym}</div>

        {/* Name */}
        <div style={{
          fontFamily: "'Exo 2',sans-serif", fontWeight: 700, fontSize: 13,
          color: locked ? '#333' : '#e0e0e0', marginBottom: 6
        }}>{a.name}</div>

        {/* Description */}
        <div style={{ fontSize: 11, color: locked ? '#252525' : '#444', marginBottom: 12, lineHeight: 1.5 }}>{a.desc}</div>

        {/* Rarity tag */}
        <div style={{
          fontSize: 10, fontFamily: "'Exo 2',sans-serif", fontWeight: 700, letterSpacing: .8,
          color: locked ? '#2a2a2a' : rc,
          background: locked ? '#0e0e0e' : `${rc}18`,
          border: `1px solid ${locked ? '#1a1a1a' : rc + '35'}`,
          borderRadius: 3, padding: '3px 10px', display: 'inline-block', marginBottom: locked && a.progress !== undefined ? 10 : 0
        }}>{RARITY_LABEL[a.rarity]}</div>

        {/* Progress bar for locked */}
        {locked && a.progress !== undefined && (
          <div style={{ marginTop: 10 }}>
            <div style={{ fontSize: 10, color: '#2a2a2a', marginBottom: 5, fontFamily: "'Exo 2',sans-serif" }}>{a.progress}%</div>
            <XPBar xp={a.progress} xpToNext={100} color="#2a2a2a" height={3} />
          </div>
        )}

        {/* Earned date */}
        {!locked && a.date && (
          <div style={{ fontSize: 10, color: '#2a2a2a', marginTop: 8 }}>{a.date}</div>
        )}
      </div>
    );
  };

  return (
    <div style={{ padding: '28px 28px', maxWidth: 920, margin: '0 auto' }}>
      {/* Header */}
      <div style={{ marginBottom: 26 }}>
        <div style={{ fontFamily: "'Exo 2',sans-serif", fontSize: 11, letterSpacing: 2.5, color: '#3a3a3a', textTransform: 'uppercase', marginBottom: 5 }}>実績</div>
        <h1 style={{ margin: 0, fontFamily: "'Exo 2',sans-serif", fontSize: 26, fontWeight: 800, color: '#f0f0f0' }}>バッジ・実績</h1>
        <div style={{ marginTop: 5, fontSize: 12, color: '#444' }}>{earned.length} / {achievements.length} 獲得済み</div>
      </div>

      {/* Progress summary bar */}
      <div style={{ background: '#0e0e0e', border: '1px solid #1c1c1c', borderRadius: 10, padding: '18px 22px', marginBottom: 28, display: 'flex', alignItems: 'center', gap: 20 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: "'Exo 2',sans-serif", fontSize: 11, color: '#444', letterSpacing: 1, marginBottom: 8 }}>獲得進捗</div>
          <XPBar xp={earned.length} xpToNext={achievements.length} height={6} />
        </div>
        <div style={{ fontFamily: "'Exo 2',sans-serif", fontSize: 28, fontWeight: 900, color: '#f0f0f0', flexShrink: 0 }}>
          {Math.round(earned.length / achievements.length * 100)}<span style={{ fontSize: 14, color: '#444' }}>%</span>
        </div>
      </div>

      {/* Earned */}
      <div style={{ fontFamily: "'Exo 2',sans-serif", fontSize: 11, letterSpacing: 2, color: '#555', textTransform: 'uppercase', marginBottom: 14 }}>
        獲得済み — {earned.length}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(185px,1fr))', gap: 12, marginBottom: 32 }}>
        {earned.map(a => <Badge key={a.id} a={a} />)}
      </div>

      {/* Locked */}
      <div style={{ fontFamily: "'Exo 2',sans-serif", fontSize: 11, letterSpacing: 2, color: '#333', textTransform: 'uppercase', marginBottom: 14 }}>
        未達成 — {notEarned.length}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(185px,1fr))', gap: 12 }}>
        {notEarned.map(a => <Badge key={a.id} a={a} locked />)}
      </div>
    </div>
  );
};

Object.assign(window, { AchievementsScreen });