<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <%= render "games/header", game: @game, display_turn: @game.latest_turn, current_participant: @current_participant, hide_controls: true %>

  <div class="md:flex md:items-center md:justify-between mb-6">
    <div class="flex-1 min-w-0">
      <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
        外交・交渉掲示板
      </h2>
      <p class="mt-1 text-sm text-gray-500">
        他国との秘密交渉や全体へのアナウンスを行います。
      </p>
    </div>
    <div class="mt-4 flex md:mt-0 md:ml-4">
      <%= link_to game_path(@game), class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
        <i class="fa-solid fa-map mr-2"></i> マップに戻る
      <% end %>
      
      <% if @game.status == 'in_progress' %>
        <%= link_to new_game_board_path(@game), class: "ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
          <i class="fa-solid fa-plus mr-2"></i> 新しい掲示板を作成
        <% end %>
      <% end %>
    </div>
  </div>

  <% if @game.status == 'finished' %>
    <div class="mb-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
      <div class="flex">
        <div class="flex-shrink-0">
          <i class="fa-solid fa-history text-yellow-400"></i>
        </div>
        <div class="ml-3">
          <p class="text-sm text-yellow-700">
            このゲームは終了しています。すべての掲示板は履歴モード（閲覧専用）です。
          </p>
        </div>
      </div>
    </div>
  <% end %>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- 左カラム: 掲示板一覧 -->
    <div class="lg:col-span-2 space-y-6">
      
      <!-- 掲示板リスト -->
      <div class="bg-white shadow overflow-hidden sm:rounded-md">
        <ul role="list" class="divide-y divide-gray-200">
          <% if @boards.empty? %>
            <li class="px-4 py-4 sm:px-6 text-center text-gray-500 text-sm">
              掲示板がありません
            </li>
          <% else %>
            <% @boards.each do |board| %>
              <li>
                <%= link_to game_board_path(@game, board), class: "block hover:bg-gray-50" do %>
                  <div class="px-4 py-4 sm:px-6">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <% if board.global? %>
                          <span class="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-3">
                            <i class="fa-solid fa-earth-americas mr-1"></i> 共通
                          </span>
                          <p class="text-sm font-medium text-indigo-600 truncate">
                            Global Board (全体掲示板)
                          </p>
                        <% else %>
                          <span class="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 mr-3">
                            <i class="fa-solid fa-handshake mr-1"></i> 交渉
                          </span>
                          <p class="text-sm font-medium text-indigo-600 truncate">
                            <% members = board.participants.map(&:power).compact.sort %>
                            <%= members.join(' / ') %>
                          </p>
                        <% end %>
                        
                        <% if board.is_public? %>
                          <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                            <i class="fa-solid fa-bullhorn mr-1"></i> 公開中
                          </span>
                        <% end %>
                      </div>
                      <div class="ml-2 flex-shrink-0 flex">
                        <% unread_count = board.unread_count_for(@current_participant) %>
                        <% if unread_count > 0 %>
                          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                            <%= unread_count %> 未読
                          </span>
                        <% end %>
                      </div>
                    </div>
                    <div class="mt-2 sm:flex sm:justify-between">
                      <div class="sm:flex">
                        <p class="flex items-center text-sm text-gray-500">
                          <% last_post = board.board_posts.last %>
                          <% if last_post %>
                            <i class="fa-solid fa-comment-dots flex-shrink-0 mr-1.5 text-gray-400"></i>
                            <span class="truncate max-w-xs"><%= last_post.body.truncate(30) %></span>
                            <span class="ml-2 text-xs text-gray-400">- <%= last_post.participant.power %></span>
                          <% else %>
                            <span class="text-gray-400">投稿なし</span>
                          <% end %>
                        </p>
                      </div>
                      <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                        <% if last_post %>
                          <i class="fa-regular fa-clock flex-shrink-0 mr-1.5 text-gray-400"></i>
                          <p>
                            <%= time_ago_in_words(last_post.created_at) %>前
                          </p>
                        <% else %>
                          <p>
                            作成: <%= l board.created_at, format: :short %>
                          </p>
                        <% end %>
                      </div>
                    </div>
                  </div>
                <% end %>
              </li>
            <% end %>
          <% end %>
        </ul>
      </div>
    </div>

    <!-- 右カラム: 外交関係マップ -->
    <div class="space-y-6">
      <div class="bg-white shadow rounded-lg border border-gray-200">
        <div class="px-4 py-3 bg-gray-50 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">外交関係マップ</h3>
          <p class="text-xs text-gray-500 mt-1">
            交渉チャンネルを持つ国同士の繋がり（相互のみ表示）
          </p>
        </div>
        <div class="p-4">
          <!-- 簡易的なマトリックス表示 -->
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-xs">
              <thead>
                <tr>
                  <th class="px-2 py-1"></th>
                  <% @diplomacy_matrix.keys.sort.each do |power| %>
                    <th class="px-2 py-1 font-bold text-gray-500 rotate-45 origin-bottom-left transform translate-x-2"><%= power[0..2] %></th>
                  <% end %>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-200">
                <% @diplomacy_matrix.keys.sort.each do |row_power| %>
                  <tr>
                    <th class="px-2 py-1 font-bold text-gray-500 text-left"><%= row_power[0..2] %></th>
                    <% @diplomacy_matrix.keys.sort.each do |col_power| %>
                      <td class="px-2 py-1 text-center">
                        <% if row_power == col_power %>
                          <span class="text-gray-200">-</span>
                        <% elsif @diplomacy_matrix[row_power]&.include?(col_power) %>
                          <span class="text-green-600 font-bold">●</span>
                        <% else %>
                          <span class="text-gray-200">・</span>
                        <% end %>
                      </td>
                    <% end %>
                  </tr>
                <% end %>
              </tbody>
            </table>
          </div>
          
          <div class="mt-4 text-xs text-gray-500">
            <p>※ あなたが参加している掲示板、または公開された掲示板の関係のみ表示されます。</p>
          </div>
        </div>
      </div>
      
      <!-- ヒント -->
      <div class="bg-blue-50 border border-blue-200 rounded-md p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <i class="fa-solid fa-circle-info text-blue-400"></i>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-blue-800">交渉のヒント</h3>
            <div class="mt-2 text-sm text-blue-700">
              <ul role="list" class="list-disc pl-5 space-y-1">
                <li>共通掲示板は全員が見ています。外交方針の発表に使いましょう。</li>
                <li>特定の国と密約を結ぶには「新しい掲示板を作成」から招待してください。</li>
                <li>交渉用掲示板の内容は、メンバー以外には秘密です（「公開」設定にしない限り）。</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
