<div class="mb-6 flex items-center justify-between">
  <div>
    <h1 class="text-3xl font-bold text-gray-900"><%= h(game.title) %></h1>
    <% if game.memo.present? %>
      <p class="mt-1 text-sm text-gray-500"><%= h(game.memo) %></p>
    <% end %>
    <div class="mt-2 flex items-center space-x-4 text-sm text-gray-600">
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
        <%= game.solo_mode? ? 'bg-purple-100 text-purple-800' : 'bg-blue-100 text-blue-800' %>">
        <%= game.solo_mode? ? 'ソロモード' : 'マルチプレイヤーモード' %>
      </span>
      <% if game.administrator %>
        <span>管理者: <%= h(game.administrator.username) %></span>
      <% end %>
      <span>状態: <%= game.status %></span>
    </div>
    <% if game.year_limit.present? || game.victory_sc_count != 18 || game.scoring_system != "none" || game.auto_turn? %>
      <div class="mt-2 flex flex-wrap items-center gap-2 text-xs">
        <span class="font-medium text-gray-500">ハウスルール:</span>
        <% if game.auto_turn? %>
          <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-blue-100 text-blue-800">
            <i class="fa-solid fa-clock mr-1"></i> <%= game.schedule_display %>
          </span>
        <% end %>
        <% if game.year_limit.present? %>
          <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-amber-100 text-amber-800">
            <i class="fa-solid fa-hourglass-half mr-1"></i> <%= game.year_limit %>年制限
          </span>
        <% end %>
        <% if game.victory_sc_count != 18 %>
          <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-green-100 text-green-800">
            <i class="fa-solid fa-crown mr-1"></i> 目標SC: <%= game.victory_sc_count %>
          </span>
        <% end %>
        <% if game.scoring_system != "none" %>
          <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-800">
            <i class="fa-solid fa-chart-bar mr-1"></i> <%= game.scoring_system_name %>
          </span>
        <% end %>
      </div>
    <% end %>
    <% if game.auto_turn? && game.next_deadline_at.present? && game.status == "in_progress" %>
      <div class="mt-2 px-3 py-1.5 rounded-md bg-blue-50 border border-blue-200 text-sm text-blue-800 flex items-center gap-2">
        <i class="fa-solid fa-clock"></i>
        <span>次のターン締切: <strong><%= game.next_deadline_at.in_time_zone("Asia/Tokyo").strftime("%Y-%m-%d %H:%M") %></strong></span>
        <span class="text-blue-600" id="deadline-countdown"></span>
      </div>
      <script>
        (function() {
          const deadline = new Date("<%= game.next_deadline_at.iso8601 %>");
          const countdownEl = document.getElementById('deadline-countdown');
          function updateCountdown() {
            const now = new Date();
            const diff = deadline - now;
            if (diff <= 0) {
              countdownEl.textContent = '（締切済み — まもなく処理されます）';
              return;
            }
            const hours = Math.floor(diff / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            countdownEl.textContent = `（残り ${hours}時間 ${minutes}分）`;
          }
          if (countdownEl) {
            updateCountdown();
            setInterval(updateCountdown, 60000);
          }
        })();
      </script>
    <% end %>
    
  </div>
  
  <% unless local_assigns[:hide_controls] %>
    <div class="flex space-x-3">
      <% if current_user&.admin? || game.administrator == current_user %>
        <%= link_to "設定", edit_game_path(game), class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
        <%= button_to "削除", game, method: :delete, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500", data: { turbo_confirm: "本当に削除しますか？" } %>
      <% end %>
    </div>
  <% end %>
</div>

<% # ゲーム画面（games/show）と統一されたデザインでターン情報を表示 %>
<% target_turn = defined?(display_turn) && display_turn ? display_turn : game.latest_turn %>
<% if target_turn && target_turn.phase.present? %>
  <div class="bg-white shadow overflow-hidden sm:rounded-lg border border-gray-200 mb-6">
    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-gray-50">
      <div>
        <h2 class="text-2xl font-bold text-gray-900"><%= target_turn.display_phase %></h2>
        <div class="mt-1 flex items-center space-x-4 text-sm text-gray-600">
           <span>ターン: <%= target_turn.number %></span>
           <span class="text-gray-400">|</span>
           <span>フェーズ: <%= target_turn.phase %></span>
        </div>
      </div>
      
      <div class="flex items-center space-x-4">
        <% if defined?(current_participant) && current_participant&.power %>
          <div class="flex items-center bg-white px-4 py-2 rounded border border-gray-300 shadow-sm">
            <span class="mr-2 text-sm text-gray-500">あなたの担当国:</span>
            <span class="text-lg font-bold text-indigo-700"><%= current_participant.power %></span>
          </div>
        <% end %>
      </div>
    </div>
  </div>
<% end %>

