<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 h-screen-minus-header flex flex-col">
  <%= 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-4 border-b pb-4">
    <div class="flex-1 min-w-0">
      <div class="flex items-center">
        <%= link_to game_boards_path(@game), class: "mr-4 text-gray-500 hover:text-gray-700" do %>
          <i class="fa-solid fa-arrow-left"></i>
        <% end %>
        
        <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
          <% if @board.global? %>
            <i class="fa-solid fa-earth-americas text-blue-500 mr-2"></i> Global Board
          <% else %>
            <i class="fa-solid fa-handshake text-green-500 mr-2"></i> Negotiation Board
          <% end %>
        </h2>
        
        <% if @board.is_public? %>
          <span class="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
            <i class="fa-solid fa-bullhorn mr-1"></i> 公開中
          </span>
        <% end %>
        
        <% if @board.history_mode? %>
          <span class="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
            <i class="fa-solid fa-scroll mr-1"></i> 履歴モード
          </span>
        <% end %>
      </div>
      
      <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
        <div class="mt-2 flex items-center text-sm text-gray-500">
          <i class="fa-solid fa-users flex-shrink-0 mr-1.5 text-gray-400"></i>
          メンバー: 
          <% @active_members.each do |m| %>
            <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border <%= power_color_class(m.power) %>">
              <%= m.power %>
            </span>
          <% end %>
        </div>
      </div>
    </div>
    
    <div class="mt-4 flex md:mt-0 md:ml-4 space-x-2">
      <!-- 公開設定切り替え (交渉用かつ参加中のみ) -->
      <% if @board.negotiation? && @board.member?(@current_participant) && !@board.history_mode? %>
        <%= button_to toggle_public_game_board_path(@game, @board), method: :patch, class: "inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
          <% if @board.is_public? %>
            <i class="fa-solid fa-lock mr-1"></i> 非公開にする
          <% else %>
            <i class="fa-solid fa-bullhorn mr-1"></i> 公開する
          <% end %>
        <% end %>
      <% end %>

      <!-- 退出ボタン (交渉用かつ参加中のみ) -->
      <% if @board.negotiation? && @board.member?(@current_participant) && !@board.history_mode? %>
        <%= button_to leave_game_board_board_memberships_path(@game, @board), method: :delete, data: { turbo_confirm: "本当に退出しますか？退出後はこの掲示板に投稿できなくなります。" }, class: "inline-flex items-center px-3 py-1.5 border border-transparent shadow-sm text-sm font-medium rounded text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" do %>
          <i class="fa-solid fa-right-from-bracket mr-1"></i> 退出
        <% end %>
      <% end %>
    </div>
  </div>

  <div class="flex flex-1 overflow-hidden">
    <!-- 左: チャットエリア -->
    <div class="flex-1 flex flex-col bg-white border border-gray-200 rounded-lg shadow-sm mr-4 overflow-hidden">
      
      <!-- 投稿フォーム (上部に移動) -->
      <% if @board.member?(@current_participant) && !@board.history_mode? %>
        <div class="p-4 bg-gray-50 border-b border-gray-200">
          <%= form_with model: [@game, @board, @new_post], local: true, class: "flex items-end space-x-2" do |f| %>
            <div class="flex-1">
              <%= f.text_area :body, rows: 2, placeholder: "メッセージを入力...", class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", required: true %>
            </div>
            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 h-10">
              <i class="fa-solid fa-paper-plane"></i>
            </button>
          <% end %>
        </div>
      <% elsif @board.history_mode? %>
        <div class="p-4 bg-gray-100 border-b border-gray-200 text-center text-gray-500 text-sm">
          履歴モードのため投稿できません
        </div>
      <% else %>
        <div class="p-4 bg-gray-100 border-b border-gray-200 text-center text-gray-500 text-sm">
          この掲示板には参加していません
        </div>
      <% end %>

      <!-- メッセージリスト -->
      <div id="board-posts" 
           class="flex-1 p-4 overflow-y-auto space-y-4" 
           data-controller="board-channel" 
           data-board-channel-board-id-value="<%= @board.id %>"
           data-board-channel-current-participant-id-value="<%= @current_participant&.id %>">
        <% if @posts.empty? %>
          <div class="text-center text-gray-400 py-10" id="no-posts-message">
            <p>まだ投稿がありません。最初のメッセージを投稿しましょう。</p>
          </div>
        <% else %>
          <% @posts.each do |post| %>
            <%= render partial: "post", locals: { post: post, current_participant: @current_participant } %>
          <% end %>
        <% end %>
      </div>
      
    </div>

    <!-- 右: サイドパネル（メンバー管理・提案） -->
    <div class="w-80 flex flex-col space-y-4 overflow-y-auto">
      
      <!-- 提案 (Proposals) -->
      <% if @board.negotiation? %>
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
          <div class="px-3 py-2 bg-gray-50 border-b border-gray-200 font-medium text-sm text-gray-700">
            条約・提案
          </div>
          <div class="p-3 space-y-3">
            <% @proposals.each do |proposal| %>
              <div class="border rounded p-2 text-sm <%= proposal.status == 'accepted' ? 'bg-green-50 border-green-200' : (proposal.status == 'rejected' ? 'bg-red-50 border-red-200' : 'bg-white border-gray-200') %>">
                <div class="flex justify-between items-start mb-1">
                  <div>
                    <span class="font-bold text-xs mr-1"><%= proposal.proposer.power %></span>
                    <% if proposal.phase %>
                      <span class="text-xs bg-gray-100 text-gray-500 px-1 rounded border border-gray-200"><%= proposal.phase %></span>
                    <% end %>
                  </div>
                  <span class="text-xs text-gray-400"><%= l proposal.created_at, format: :short %></span>
                </div>
                <p class="mb-2"><%= proposal.body %></p>
                
                <div class="flex justify-between items-center">
                  <span class="text-xs font-medium px-2 py-0.5 rounded
                    <%= case proposal.status
                        when 'pending' then 'bg-yellow-100 text-yellow-800'
                        when 'accepted' then 'bg-green-100 text-green-800'
                        when 'rejected' then 'bg-red-100 text-red-800'
                        end %>">
                    <%= proposal.status.upcase %>
                  </span>
                  
                  <% if proposal.pending? && @board.member?(@current_participant) && !@board.history_mode? %>
                    <div class="flex space-x-1">
                      <%= button_to "承認", game_board_board_proposal_path(@game, @board, proposal, board_proposal: { status: 'accepted' }), method: :patch, class: "text-xs bg-green-100 hover:bg-green-200 text-green-800 px-2 py-1 rounded" %>
                      <%= button_to "拒否", game_board_board_proposal_path(@game, @board, proposal, board_proposal: { status: 'rejected' }), method: :patch, class: "text-xs bg-red-100 hover:bg-red-200 text-red-800 px-2 py-1 rounded" %>
                    </div>
                  <% end %>
                </div>
              </div>
            <% end %>

            <% if @board.member?(@current_participant) && !@board.history_mode? %>
              <div class="mt-2 pt-2 border-t text-center">
                <button type="button" onclick="document.getElementById('new-proposal-form').classList.toggle('hidden')" class="text-xs text-indigo-600 hover:text-indigo-800">
                  + 新しい提案を作成
                </button>
                <div id="new-proposal-form" class="hidden mt-2">
                  <%= form_with model: [@game, @board, @new_proposal], local: true do |f| %>
                    <%= f.text_area :body, rows: 2, class: "w-full text-xs border-gray-300 rounded mb-2", placeholder: "提案内容 (例: 1901秋冬は不可侵)" %>
                    <%= f.submit "提案する", class: "w-full bg-indigo-600 text-white text-xs py-1 rounded hover:bg-indigo-700" %>
                  <% end %>
                </div>
              </div>
            <% end %>
          </div>
        </div>
      <% end %>

      <!-- メンバー招待 -->
      <% if @board.negotiation? && @board.member?(@current_participant) && !@board.history_mode? %>
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
          <div class="px-3 py-2 bg-gray-50 border-b border-gray-200 font-medium text-sm text-gray-700">
            メンバー追加
          </div>
          <div class="p-3">
            <% if @candidates.present? %>
              <%= form_with url: game_board_board_memberships_path(@game, @board), local: true do |f| %>
                <div class="flex space-x-2">
                  <%= f.collection_select :participant_id, @candidates, :id, :power, { prompt: "国を選択" }, { class: "block w-full text-xs border-gray-300 rounded" } %>
                  <%= f.submit "招待", class: "bg-indigo-600 text-white text-xs px-3 py-1 rounded hover:bg-indigo-700" %>
                </div>
              <% end %>
            <% else %>
              <p class="text-xs text-gray-500">招待可能なプレイヤーがいません</p>
            <% end %>
          </div>
        </div>
      <% end %>

      <!-- メンバー一覧 -->
      <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
        <div class="px-3 py-2 bg-gray-50 border-b border-gray-200 font-medium text-sm text-gray-700">
          参加メンバー
        </div>
        <ul class="divide-y divide-gray-200">
          <% @board.board_memberships.includes(:participant).each do |membership| %>
            <li class="px-3 py-2 flex items-center justify-between text-sm">
              <div class="flex items-center">
                <span class="<%= 'line-through text-gray-400' if membership.left_at %>">
                  <%= membership.participant.power %>
                </span>
                <% if membership.participant.user == current_user %>
                  <span class="ml-1 text-xs text-indigo-500">(YOU)</span>
                <% end %>
              </div>
              <% if membership.left_at %>
                <span class="text-xs text-red-500">退出済</span>
              <% end %>
            </li>
          <% end %>
        </ul>
      </div>

    </div>
  </div>
</div>

