const Sidebar = ({ 
  player, 
  stats, 
  weapon, 
  activeSynergies, 
  showTooltip, 
  hideTooltip 
}) => {
  return (
    <div className="w-80 bg-gray-900 border-r border-gray-800 flex flex-col shrink-0 z-20 shadow-2xl relative overflow-hidden">
      {/* 背景装飾 */}
      <div className="absolute top-0 left-0 w-full h-64 bg-gradient-to-b from-cyan-500/5 to-transparent pointer-events-none"></div>
      
      {/* プロフィール */}
      <div className="p-8 border-b border-gray-800 relative">
        <div className="flex items-center gap-4 mb-6">
          <div className="w-16 h-16 bg-gray-800 rounded-2xl border border-gray-700 flex items-center justify-center text-3xl shadow-inner relative group">
            <div className="absolute inset-0 bg-cyan-500/10 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-opacity"></div>
            🤖
          </div>
          <div>
            <div className="text-[10px] font-black text-cyan-500 tracking-[0.2em] uppercase mb-1">Unit ID</div>
            <div className="text-xl font-black text-white tracking-tighter">JUNK-00</div>
          </div>
        </div>

        {/* HP */}
        <div className="space-y-2">
          <div className="flex justify-between items-end">
            <span className="text-[10px] font-black text-gray-500 tracking-widest uppercase">Integrity</span>
            <span className="text-sm font-mono text-white">
              <span className="text-cyan-400 font-black text-lg">{Math.max(0, player.hp)}</span> / {stats.hpMax}
            </span>
          </div>
          <div className="w-full bg-gray-950 h-3 rounded-full border border-gray-800 p-0.5 overflow-hidden shadow-inner">
            <div 
              className="h-full bg-gradient-to-r from-cyan-600 to-blue-500 rounded-full transition-all duration-500 relative"
              style={{ width: `${(player.hp / stats.hpMax) * 100}%` }}
            >
               <div className="absolute inset-0 bg-white/20 animate-shimmer"></div>
            </div>
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-8">
        {/* ステータスリスト */}
        <section>
          <h3 className="text-[10px] font-black text-gray-600 mb-4 tracking-[0.3em] uppercase flex items-center gap-2">
             <Activity size={12} className="text-cyan-500" /> Core Specs
          </h3>
          <div className="grid grid-cols-1 gap-3">
            {[
              { label: 'Attack', value: stats.atk, icon: <Sword size={14} />, color: 'text-red-400' },
              { label: 'Defense', value: stats.def, icon: <Hexagon size={14} />, color: 'text-blue-400' },
              { label: 'Speed', value: stats.speed, icon: <Zap size={14} />, color: 'text-yellow-400' },
            ].map((s, i) => (
              <div key={i} className="flex items-center justify-between p-3 bg-gray-800/30 rounded-xl border border-gray-800/50 hover:border-gray-700 transition-colors group">
                <div className="flex items-center gap-3">
                  <div className={`p-2 bg-gray-900 rounded-lg group-hover:scale-110 transition-transform ${s.color}`}>{s.icon}</div>
                  <span className="text-xs font-bold text-gray-400 uppercase tracking-wider">{s.label}</span>
                </div>
                <span className="text-sm font-black text-white font-mono">{s.value}</span>
              </div>
            ))}
          </div>
        </section>

        {/* 装備中の武器 */}
        <section>
          <h3 className="text-[10px] font-black text-gray-600 mb-4 tracking-[0.3em] uppercase flex items-center gap-2">
            <Sword size={12} className="text-cyan-500" /> Current Gear
          </h3>
          <div className="bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-2xl border border-gray-700 shadow-xl group hover:border-cyan-500/30 transition-all">
             <div className={`text-[10px] font-black uppercase tracking-tighter mb-1 ${(PREFIXES[weapon.prefix] || PREFIXES['none']).color}`}>
               {(PREFIXES[weapon.prefix] || PREFIXES['none']).name}
             </div>
             <div className={`text-lg font-black leading-tight mb-4 ${RARITIES[weapon.rarity].color}`}>
               {weapon.name} {weapon.enhanceLv > 0 && <span className="text-blue-400">+{weapon.enhanceLv}</span>}
             </div>
             <div className="flex gap-2">
               {weapon.sockets.map((s, i) => (
                 <div 
                   key={i} 
                   onMouseEnter={(e) => showTooltip(e, s)}
                   onMouseLeave={hideTooltip}
                   className="w-10 h-10 rounded-xl bg-gray-950 border border-gray-800 flex items-center justify-center hover:border-cyan-500/50 transition-colors shadow-inner"
                 >
                   {s ? <span className={`${PARTS[s].color} scale-90`}>{PARTS[s].icon}</span> : <div className="w-1 h-1 bg-gray-800 rounded-full"></div>}
                 </div>
               ))}
             </div>
          </div>
        </section>

        {/* 発動中の連携 */}
        <section>
          <h3 className="text-[10px] font-black text-gray-600 mb-4 tracking-[0.3em] uppercase flex items-center gap-2">
            <Zap size={12} className="text-cyan-500" /> Active Synergy
          </h3>
          <div className="flex flex-wrap gap-2">
            {activeSynergies.length === 0 && <p className="text-[10px] text-gray-700 font-bold italic uppercase">No active synergies</p>}
            {activeSynergies.map(synName => (
              <div key={synName} className="px-3 py-1.5 bg-cyan-900/20 border border-cyan-800/50 rounded-lg text-cyan-400 text-[10px] font-black uppercase tracking-tighter animate-pulse shadow-[0_0_10px_rgba(6,182,212,0.1)]">
                {synName}
              </div>
            ))}
          </div>
        </section>
      </div>

      {/* スクラップ表示 */}
      <div className="p-6 bg-gray-950/50 border-t border-gray-800 backdrop-blur-md">
        <div className="flex items-center justify-between">
          <div>
            <div className="text-[10px] font-black text-gray-600 uppercase tracking-widest mb-1">Resources</div>
            <div className="text-2xl font-black text-yellow-400 flex items-baseline gap-2">
              {player.scrap || 0} <span className="text-[10px] text-gray-500 uppercase tracking-tighter">Scrap</span>
            </div>
          </div>
          <div className="text-3xl filter drop-shadow-[0_0_8px_rgba(250,204,21,0.3)]">⚙️</div>
        </div>
      </div>
    </div>
  );
};