const DatabaseTab = ({
  discoveredParts,
  discoveredWeapons,
  discoveredSynergies,
  inventoryParts = {},
  weapon = {}
}) => {
  // 所持している（インベントリにある or 装備している）パーツの全セットを取得
  const allObtainedParts = new Set([
    ...Object.keys(inventoryParts).filter(id => inventoryParts[id] > 0),
    ...(weapon.sockets || []).filter(s => s !== null)
  ]);

  return (
    <div className="p-10 lg:p-16 max-w-5xl mx-auto space-y-16 animate-fade-in-up">
      <section>
        <h2 className="text-2xl font-bold border-b border-gray-700 pb-4 mb-8 text-purple-400 flex items-center gap-3">
          <Settings size={28} /> DISCOVERED PARTS
        </h2>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {Object.values(PARTS).map(part => {
            const isDiscovered = discoveredParts.includes(part.id);
            return (
              <div key={part.id} className={`p-4 rounded-xl border-2 transition-all ${isDiscovered ? 'bg-gray-800 border-gray-700 shadow-lg' : 'bg-gray-900 border-gray-800 opacity-40 grayscale'}`}>
                <div className="flex flex-col items-center text-center gap-2">
                  <div className={`text-3xl ${isDiscovered ? part.color : 'text-gray-600'}`}>{part.icon}</div>
                  <div className={`font-black text-sm uppercase tracking-tighter ${isDiscovered ? RARITIES[part.rarity].color : 'text-gray-600'}`}>{isDiscovered ? part.name : '???'}</div>
                  {isDiscovered && <div className="text-[10px] text-gray-500 font-bold leading-tight">{part.desc}</div>}
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <section>
        <h2 className="text-2xl font-bold border-b border-gray-700 pb-4 mb-8 text-blue-400 flex items-center gap-3">
          <Sword size={28} /> DISCOVERED WEAPONS
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
          {WEAPON_TYPES.map(w => {
            const isDiscovered = discoveredWeapons.includes(w.id);
            return (
              <div key={w.id} className={`p-5 rounded-xl border-2 transition-all ${isDiscovered ? 'bg-gray-800 border-gray-700 shadow-lg' : 'bg-gray-900 border-gray-800 opacity-40 grayscale'}`}>
                <div className="flex justify-between items-center mb-2">
                  <div className={`font-black uppercase tracking-widest ${isDiscovered ? RARITIES[w.rarity].color : 'text-gray-600'}`}>{isDiscovered ? w.name : '????????'}</div>
                </div>
                {isDiscovered && (
                  <div className="flex gap-4 text-xs font-bold text-gray-400">
                    <div>ATK: <span className="text-white">{w.baseAtk}</span></div>
                    <div>SLOTS: <span className="text-white">{w.maxSockets}</span></div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </section>

      <section>
        <h2 className="text-2xl font-bold border-b border-gray-700 pb-4 mb-8 text-cyan-400 flex items-center gap-3">
          <Zap size={28} /> KNOWN SYNERGIES
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {SYNERGIES.map(syn => {
            const isDiscovered = discoveredSynergies.includes(syn.name);
            const canKnow = syn.req.every(pid => allObtainedParts.has(pid));
            const showDetails = isDiscovered || canKnow;

            return (
              <div key={syn.name} className={`p-6 rounded-xl border-2 transition-all relative overflow-hidden ${showDetails ? 'bg-gray-800 border-gray-700 border-l-4 border-l-cyan-500 shadow-xl' : 'bg-gray-900 border-gray-800 opacity-40 grayscale border-dashed'}`}>
                {canKnow && !isDiscovered && (
                  <div className="absolute top-0 right-0 bg-cyan-500 text-black text-[10px] font-black px-2 py-0.5 rounded-bl-lg uppercase tracking-tighter">
                    Analyzed
                  </div>
                )}
                <div className="text-lg font-black text-cyan-400 mb-2">{showDetails ? syn.name : '【 未発見の連携 】'}</div>
                {showDetails ? (
                  <div className="space-y-3">
                    <p className={`text-sm font-bold ${isDiscovered ? 'text-gray-300' : 'text-gray-500 italic'}`}>
                      {isDiscovered ? syn.effectText : '（一度発動させると効果が判明します）'}
                    </p>
                    <div className="flex gap-2">
                      {syn.req.map(pid => (
                        <div key={pid} className="p-2 bg-gray-900 rounded-lg border border-gray-700 text-sm" title={PARTS[pid].name}>
                          <span className={PARTS[pid].color}>{PARTS[pid].icon}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                ) : (
                  <p className="text-xs text-gray-600 font-mono italic">パーツの組み合わせを試して発見しましょう...</p>
                )}
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
};