// ========================================
// 実績データ定義
// ========================================

const ACH_RARITIES = {
  normal: { name: 'Normal', color: 'text-gray-300',   border: 'border-gray-600',   bg: 'bg-gray-800',      glow: '' },
  rare:   { name: 'Rare',   color: 'text-blue-400',   border: 'border-blue-600',   bg: 'bg-blue-900/20',   glow: 'shadow-[0_0_10px_rgba(59,130,246,0.25)]' },
  epic:   { name: 'Epic',   color: 'text-purple-400', border: 'border-purple-600', bg: 'bg-purple-900/20', glow: 'shadow-[0_0_10px_rgba(168,85,247,0.25)]' },
  legend: { name: 'Legend', color: 'text-yellow-400', border: 'border-yellow-500', bg: 'bg-yellow-900/20', glow: 'shadow-[0_0_15px_rgba(234,179,8,0.3)]' },
};

const ACHIEVEMENTS = [
  // ── バトル系 ──────────────────────────
  {
    id: 'first_kill',
    name: '初陣',
    desc: '初めて敵を倒した',
    flavor: '旅は一歩から始まる。',
    icon: '⚔️',
    rarity: 'normal',
    check: (s) => s.totalKills >= 1,
  },
  {
    id: 'kill_10',
    name: '連続撃破',
    desc: '合計10体の敵を倒した',
    flavor: 'この廃墟は戦場だ。',
    icon: '💀',
    rarity: 'normal',
    check: (s) => s.totalKills >= 10,
  },
  {
    id: 'kill_100',
    name: '百殺',
    desc: '合計100体の敵を倒した',
    flavor: '血と錆の先に何がある。',
    icon: '☠️',
    rarity: 'rare',
    check: (s) => s.totalKills >= 100,
  },
  // ── 探索系 ──────────────────────────
  {
    id: 'explorer_10',
    name: '探索者',
    desc: '10階層に到達した',
    flavor: '深く、もっと深く。',
    icon: '🔦',
    rarity: 'normal',
    check: (s) => s.maxFloor >= 10,
  },
  {
    id: 'explorer_30',
    name: '深層探索者',
    desc: '30階層に到達した',
    flavor: '光が届かない場所に真実がある。',
    icon: '🌑',
    rarity: 'rare',
    check: (s) => s.maxFloor >= 30,
  },
  {
    id: 'explorer_50',
    name: '深淵の開拓者',
    desc: '50階層に到達した',
    flavor: '底に辿り着いた者だけが知る静寂。',
    icon: '🕳️',
    rarity: 'epic',
    check: (s) => s.maxFloor >= 50,
  },
  // ── シナジー系 ──────────────────────────
  {
    id: 'synergy_first',
    name: 'シナジー覚醒',
    desc: '初めてシナジーを発動した',
    flavor: 'ジャンクが組み合わさり、奇跡が生まれた。',
    icon: '✨',
    rarity: 'normal',
    check: (s) => s.discoveredSynergies.length >= 1,
  },
  {
    id: 'synergy_5',
    name: 'シナジーマスター',
    desc: '5種類のシナジーを発見した',
    flavor: '全ての組み合わせに意味がある。',
    icon: '🔮',
    rarity: 'rare',
    check: (s) => s.discoveredSynergies.length >= 5,
  },
  {
    id: 'synergy_all',
    name: 'シナジー完全制覇',
    desc: '全10種のシナジーを発見した',
    flavor: 'ジャンクの全ての可能性を解き放った。',
    icon: '🌌',
    rarity: 'legend',
    check: (s) => s.discoveredSynergies.length >= 10,
  },
  {
    id: 'ultimate_chaos',
    name: 'アルティメット・カオス',
    desc: '【アルティメット・カオス】シナジーを発動した',
    flavor: '全てが崩壊し、全てが生まれ変わる。',
    icon: '🌀',
    rarity: 'legend',
    check: (s) => s.discoveredSynergies.includes('【アルティメット・カオス】'),
  },
  // ── コレクション系 ──────────────────────────
  {
    id: 'part_hunter_5',
    name: 'ジャンクハンター',
    desc: '5種類のパーツを発見した',
    flavor: '廃棄物も宝になる。',
    icon: '🔩',
    rarity: 'normal',
    check: (s) => s.discoveredParts.length >= 5,
  },
  {
    id: 'part_hunter_all',
    name: '部品博士',
    desc: '全てのパーツを発見した',
    flavor: 'ジャンクの全てを知った。',
    icon: '🧪',
    rarity: 'epic',
    check: (s) => s.discoveredParts.length >= Object.keys(PARTS).length,
  },
  {
    id: 'weapon_collector_5',
    name: '武器収集家',
    desc: '5種類の武器を発見した',
    flavor: '多様な力を手に入れた。',
    icon: '🗡️',
    rarity: 'normal',
    check: (s) => s.discoveredWeapons.length >= 5,
  },
  {
    id: 'weapon_collector_all',
    name: '武器博士',
    desc: '全ての武器種を発見した',
    flavor: '全ての破壊の形を知った。',
    icon: '🏹',
    rarity: 'epic',
    check: (s) => s.discoveredWeapons.length >= WEAPON_TYPES.length,
  },
  // ── クラフト系 ──────────────────────────
  {
    id: 'attach_20',
    name: '改造狂',
    desc: 'パーツを合計20回装着した',
    flavor: '改造こそが進化だ。',
    icon: '🔧',
    rarity: 'rare',
    check: (s) => s.totalPartsAttached >= 20,
  },
  {
    id: 'trash_10',
    name: '解体屋',
    desc: '武器を合計10個分解した',
    flavor: '壊すことも創ることだ。',
    icon: '🗑️',
    rarity: 'normal',
    check: (s) => s.totalWeaponsTrashed >= 10,
  },
  {
    id: 'prefix_craft',
    name: '継承者',
    desc: '二つ名を継承した',
    flavor: '名前には力が宿る。',
    icon: '📜',
    rarity: 'normal',
    check: (s) => s.totalPrefixCrafts >= 1,
  },
  {
    id: 'legendary_equipped',
    name: '伝説の力',
    desc: '伝説レアリティの武器を入手した',
    flavor: 'ジャンクの中に眠る神話。',
    icon: '⭐',
    rarity: 'legend',
    check: (s) => s.hasObtainedLegendaryWeapon,
  },
  // ── 生存系 ──────────────────────────
  {
    id: 'heal_10',
    name: '修理工',
    desc: '10回スクラップで回復した',
    flavor: '生き延びることも戦いだ。',
    icon: '❤️',
    rarity: 'normal',
    check: (s) => s.totalHeals >= 10,
  },
  {
    id: 'scrap_1000',
    name: 'スクラップ大富豪',
    desc: 'スクラップを1000以上貯めた',
    flavor: 'ジャンクの価値を知る者だけが豊かになれる。',
    icon: '💰',
    rarity: 'rare',
    check: (s) => s.maxScrapEver >= 1000,
  },
  // ── プレステージ系 ──────────────────────────
  {
    id: 'prestige_first',
    name: '再誕の第一歩',
    desc: '初めてプレステージポイントを獲得した',
    flavor: '死は終わりではなく、新たな始まりに過ぎない。',
    icon: '🌀',
    rarity: 'normal',
    check: (s) => s.prestigeData.totalEarned > 0,
  },
  {
    id: 'prestige_100',
    name: '歴史の開拓者',
    desc: '累計100プレステージポイントを獲得した',
    flavor: '積み重ねた死が、あなたを最強へと導く。',
    icon: '👑',
    rarity: 'rare',
    check: (s) => s.prestigeData.totalEarned >= 100,
  },
  {
    id: 'prestige_upg_all',
    name: '全能の兆し',
    desc: '8種類すべてのプレステージアップグレードを1レベル以上にした',
    flavor: '多角的な強化が生存率を劇的に変える。',
    icon: '🌌',
    rarity: 'epic',
    check: (s) => Object.keys(s.prestigeData.upgrades || {}).length >= 8,
  },
  {
    id: 'prestige_max_upg',
    name: '限界突破',
    desc: 'いずれかのプレステージアップグレードを最大レベルまで上げた',
    flavor: '一つの道を極めし者に、ジャンクは微笑む。',
    icon: '⚡',
    rarity: 'legend',
    check: (s) => {
      const upgrades = s.prestigeData.upgrades || {};
      return PRESTIGE_UPGRADES.some(u => (upgrades[u.id] || 0) >= u.maxLevel);
    },
  },
];

// ========================================
// 実績チェック関数
// ========================================

/**
 * 解除すべき新しい実績IDの配列を返す
 * @param {object} achStats - { totalKills, maxFloor, totalHeals, ... }
 * @param {string[]} unlockedIds - 既に解除済みの実績IDリスト
 * @param {string[]} discoveredParts
 * @param {string[]} discoveredWeapons
 * @param {string[]} discoveredSynergies
 * @param {object} prestigeData
 */
const getNewlyUnlockedAchievements = (achStats, unlockedIds, discoveredParts, discoveredWeapons, discoveredSynergies, prestigeData) => {
  const s = { ...achStats, discoveredParts, discoveredWeapons, discoveredSynergies, prestigeData };
  return ACHIEVEMENTS
    .filter(a => !unlockedIds.includes(a.id) && a.check(s))
    .map(a => a.id);
};

// ========================================
// 実績タブ表示コンポーネント
// ========================================

const AchievementsTab = ({ unlockedAchievements }) => {
  const unlockedCount = unlockedAchievements.length;
  const totalCount = ACHIEVEMENTS.length;
  const progress = Math.round((unlockedCount / totalCount) * 100);

  const grouped = {
    legend: ACHIEVEMENTS.filter(a => a.rarity === 'legend'),
    epic:   ACHIEVEMENTS.filter(a => a.rarity === 'epic'),
    rare:   ACHIEVEMENTS.filter(a => a.rarity === 'rare'),
    normal: ACHIEVEMENTS.filter(a => a.rarity === 'normal'),
  };

  return (
    <div className="p-10 lg:p-16 max-w-5xl mx-auto space-y-10 animate-fade-in-up w-full">
      <div>
        <h2 className="text-2xl font-bold border-b border-gray-700 pb-4 text-yellow-400 flex items-center gap-3">
          <Trophy size={28} /> 実績 (Achievements)
        </h2>

        {/* 進捗バー */}
        <div className="mt-6 bg-gray-800 rounded-xl p-5 border border-gray-700">
          <div className="flex justify-between items-center mb-2">
            <span className="text-gray-300 font-bold">TOTAL PROGRESS</span>
            <span className="text-yellow-400 font-bold text-lg">{unlockedCount} / {totalCount}</span>
          </div>
          <div className="w-full bg-gray-700 h-3 rounded-full overflow-hidden">
            <div
              className="h-full bg-gradient-to-r from-yellow-600 to-yellow-400 transition-all duration-700 rounded-full"
              style={{ width: `${progress}%` }}
            />
          </div>
          <div className="text-right text-xs text-gray-500 mt-1">{progress}% 解除済み</div>
        </div>
      </div>

      {/* レアリティ別グループ表示 */}
      {Object.entries(grouped).map(([rarity, achs]) => {
        const r = ACH_RARITIES[rarity];
        return (
          <section key={rarity}>
            <h3 className={`text-lg font-bold mb-4 flex items-center gap-2 ${r.color}`}>
              <span className="border-b-2 pb-1" style={{ borderColor: 'currentColor' }}>{r.name}</span>
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {achs.map(ach => {
                const unlocked = unlockedAchievements.includes(ach.id);
                return (
                  <div
                    key={ach.id}
                    className={`rounded-xl border p-4 flex items-start gap-4 transition-all ${
                      unlocked
                        ? `${r.bg} ${r.border} ${r.glow}`
                        : 'bg-gray-800/50 border-gray-700 opacity-50 grayscale'
                    }`}
                  >
                    <div className={`text-3xl shrink-0 w-12 h-12 flex items-center justify-center rounded-lg ${unlocked ? 'bg-black/30' : 'bg-gray-700/50'}`}>
                      {unlocked ? ach.icon : '🔒'}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className={`font-bold text-base ${unlocked ? r.color : 'text-gray-500'}`}>
                        {ach.name}
                      </div>
                      <div className="text-sm text-gray-400 mt-0.5">{ach.desc}</div>
                      {unlocked && (
                        <div className="text-xs text-gray-600 mt-1 italic">"{ach.flavor}"</div>
                      )}
                    </div>
                    {unlocked && (
                      <div className="shrink-0">
                        <span className={`text-xs font-bold px-2 py-1 rounded ${r.bg} ${r.color} border ${r.border}`}>
                          UNLOCKED
                        </span>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </section>
        );
      })}
    </div>
  );
};