const BattleTab = ({ 
  isBattling, 
  setIsBattling, 
  enemy, 
  floor, 
  player, 
  stats, 
  logs, 
  heal, 
  healCost,
  synergyPopup,
  isFadingOut
}) => {
  return (
    <div className="h-full flex flex-col p-8 lg:p-12 gap-8 max-w-5xl mx-auto w-full animate-fade-in">
      <div className="flex flex-col lg:flex-row gap-8 flex-1 min-h-0">
        
        {/* ダンジョンビュー */}
        <div className="flex-1 bg-gray-800/50 rounded-2xl border border-gray-700 shadow-2xl relative overflow-hidden flex flex-col">
          <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 pointer-events-none"></div>
          
          <div className="p-6 border-b border-gray-700/50 flex justify-between items-center bg-gray-900/50 backdrop-blur-md">
            <div>
              <div className="text-xs text-gray-500 font-bold tracking-widest uppercase mb-1">Current Floor</div>
              <div className="text-3xl font-black text-cyan-400">F-{floor}</div>
            </div>
            <div className="text-right">
              <div className="text-xs text-gray-500 font-bold tracking-widest uppercase mb-1">Status</div>
              <div className={`text-sm font-bold px-3 py-1 rounded-full border ${isBattling ? 'bg-red-900/30 text-red-400 border-red-800 animate-pulse' : 'bg-gray-800 text-gray-500 border-gray-700'}`}>
                {isBattling ? 'IN COMBAT' : 'STANDBY'}
              </div>
            </div>
          </div>

          <div className="flex-1 flex flex-col items-center justify-center p-8 relative">
            {/* シナジーポップアップ */}
            {synergyPopup && synergyPopup.syns && (
              <div className={`absolute top-10 left-1/2 -translate-x-1/2 bg-black/80 backdrop-blur-xl p-6 rounded-2xl border-2 border-cyan-500 z-50 transition-all duration-500 shadow-[0_0_50px_rgba(6,182,212,0.4)] ${isFadingOut ? 'opacity-0 scale-90 translate-y-4' : 'animate-bounce'}`}>
                <div className="flex flex-col items-center gap-3">
                  <div className="text-[10px] font-black tracking-[0.3em] text-cyan-500 uppercase">Synergy Activated</div>
                  {synergyPopup.syns.map((syn, i) => (
                    <div key={i} className="text-center">
                      <div className="text-white text-xl font-black tracking-widest flex items-center gap-2">
                        {syn.name} {syn.times > 1 ? <span className="text-yellow-400 text-sm">x{syn.times}</span> : ''}
                      </div>
                      <div className="text-cyan-200/70 text-xs font-bold mt-1">{syn.text || syn.effectText}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {enemy ? (
              <div className="w-full max-w-md space-y-8 animate-fade-in-up flex flex-col items-center">
                <div className="relative group w-full flex flex-col items-center">
                  <div className="absolute -inset-4 bg-red-500/10 rounded-full blur-2xl group-hover:bg-red-500/20 transition-all duration-1000"></div>
                  <div className="relative flex flex-col items-center">
                    <div className="text-6xl mb-6 filter drop-shadow-[0_0_15px_rgba(239,68,68,0.5)]">👾</div>
                    <div className="text-xl font-black tracking-tighter text-red-500 bg-red-900/20 px-4 py-1 rounded-lg border border-red-800/50 mb-2">
                      {enemy.name}
                    </div>
                  </div>
                </div>

                <div className="space-y-4 w-full">
                  <div className="space-y-1">
                    <div className="flex justify-between text-xs font-bold text-gray-400 px-1">
                      <span>HP</span>
                      <span>{Math.max(0, enemy.hp)} / {enemy.maxHp}</span>
                    </div>
                    <div className="w-full bg-gray-900 h-4 rounded-full border border-gray-700 p-0.5 overflow-hidden">
                      <div 
                        className="h-full bg-gradient-to-r from-red-600 to-orange-500 rounded-full transition-all duration-300 relative overflow-hidden"
                        style={{ width: `${(enemy.hp / enemy.maxHp) * 100}%` }}
                      >
                        <div className="absolute inset-0 bg-white/10 animate-shimmer"></div>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-1">
                    <div className="flex justify-between text-xs font-bold text-gray-400 px-1">
                      <span>ENEMY GAUGE</span>
                      <span>{Math.floor((enemy.gauge / enemy.maxGauge) * 100)}%</span>
                    </div>
                    <div className="w-full bg-gray-900 h-2 rounded-full border border-gray-700 p-0.5 overflow-hidden">
                      <div 
                        className="h-full bg-yellow-500 rounded-full transition-all duration-100"
                        style={{ width: `${(enemy.gauge / enemy.maxGauge) * 100}%` }}
                      ></div>
                    </div>
                  </div>
                </div>

                {/* 戦闘ボタンの切り替え */}
                {isBattling ? (
                  <button 
                    onClick={() => setIsBattling(false)}
                    className="mt-8 px-8 py-3 bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white rounded-xl font-bold text-sm transition-all border border-gray-700 flex items-center gap-2"
                  >
                    <LogOut size={16} /> 探索を一時終了する
                  </button>
                ) : (
                  <button 
                    onClick={() => setIsBattling(true)}
                    className="mt-8 px-8 py-4 bg-cyan-600 hover:bg-cyan-500 text-white rounded-xl font-black text-lg transition-all shadow-lg shadow-cyan-900/50 flex flex-col items-center group"
                  >
                    <span>探索を再開する</span>
                    <span className="text-[10px] font-bold opacity-60 uppercase tracking-tighter">Resume Combat</span>
                  </button>
                )}
              </div>
            ) : (
              <div className="text-center space-y-6">
                <div className="text-6xl opacity-20 grayscale">🛰️</div>
                <div className="space-y-2">
                  <p className="text-gray-500 font-bold tracking-widest">NO ENEMY DETECTED</p>
                  <button 
                    onClick={() => setIsBattling(true)}
                    className="px-10 py-4 bg-cyan-600 hover:bg-cyan-500 text-white rounded-xl font-black text-lg transition-all shadow-lg shadow-cyan-900/50 active:scale-95 group"
                  >
                    探索を開始する
                    <span className="block text-xs font-normal opacity-60 group-hover:opacity-100 mt-1 uppercase tracking-tighter">Enter the Scrap Heap</span>
                  </button>
                </div>
              </div>
            )}

            {/* 戦闘中のシナジー通知（任意でBattleTabに移動しても良いが、一旦App側で管理） */}
          </div>
        </div>

        {/* 右サイド: アクション & ログ */}
        <div className="w-full lg:w-80 flex flex-col gap-6">
          <div className="bg-gray-800/80 rounded-2xl border border-gray-700 p-6 shadow-xl backdrop-blur-sm">
            <h3 className="text-xs font-bold text-gray-500 mb-4 tracking-widest uppercase">Quick Actions</h3>
            <button 
              onClick={heal}
              disabled={isBattling || player.hp >= stats.hpMax || (player.scrap || 0) < healCost}
              className={`w-full py-4 rounded-xl flex flex-col items-center justify-center gap-1 transition-all border ${
                isBattling ? 'bg-gray-800 text-gray-600 cursor-not-allowed border-gray-700' :
                player.hp >= stats.hpMax ? 'bg-gray-700 text-gray-500 cursor-not-allowed border-gray-600' :
                (player.scrap || 0) < healCost ? 'bg-red-900/50 text-red-400 border border-red-700 cursor-not-allowed' :
                'bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-900/50 border-blue-400/30'
              }`}
            >
              <div className="flex items-center gap-2 text-lg font-black"><Heart size={20} /> 拠点回復</div>
              <div className="text-[10px] font-bold opacity-80">COST: {healCost} SCRAP</div>
            </button>
          </div>

          <div className="flex-1 bg-black/40 border border-gray-800 rounded-2xl p-6 flex flex-col shadow-inner backdrop-blur-md min-h-[300px]">
            <h3 className="text-[10px] font-bold text-gray-500 mb-4 border-b border-gray-800 pb-2 flex items-center gap-2 shrink-0 tracking-widest uppercase">
              <Target size={14} /> Battle Log
            </h3>
            <div className="flex-1 overflow-y-auto flex flex-col justify-end text-xs text-gray-400 font-mono space-y-3 pr-2 custom-scrollbar">
              {logs.map((log, i) => (
                <div key={i} className="border-b border-gray-800/30 pb-2 leading-relaxed animate-fade-in">{log}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};