<% content_for :title, "Regia — #{@team.name} vs #{@match.opponent_name}" %>
<% content_for :robots, "noindex, nofollow" %>

<% content_for :head do %>
  <% unless @stream_closed %>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.7"></script>
  <% end %>
<% end %>

<div class="regia-page" id="regia-app"
     data-token="<%= j params[:token] %>"
     data-status-url="<%= j public_regia_status_path(params[:token]) %>"
     data-score-url="<%= j public_regia_score_path(params[:token]) %>"
     data-pause-url="<%= j public_regia_pause_path(params[:token]) %>"
     data-stop-url="<%= j public_regia_stop_path(params[:token]) %>"
     data-cable-url="<%= j "/cable?regia_token=#{params[:token]}" %>"
     data-hls-url="<%= j @session.hls_playback_url %>"
     data-home-name="<%= j @team.name %>"
     data-away-name="<%= j @match.opponent_name %>"
     data-share-url="<%= j @share_url %>"
     data-share-title="<%= j @share_title %>"
     data-points-target="<%= Scoring::Rules.from_match(@match).points_target(@score.current_set) %>"
     data-stream-closed="<%= @stream_closed %>">

  <header class="regia-header">
    <h1><%= @team.name %> vs <%= @match.opponent_name %></h1>
    <p>Regia · Set <%= @score.current_set %></p>
    <span id="regia-badge" class="regia-badge <%= @on_air ? 'regia-badge--live' : (@stream_closed ? 'regia-badge--ended' : 'regia-badge--wait') %>">
      <%= @stream_closed ? "Terminata" : (@on_air ? "In onda" : "In attesa") %>
    </span>
  </header>

  <div class="regia-share">
    <button type="button" class="regia-btn regia-btn--outline" id="btn-share" style="margin:0">
      Condividi link regia
    </button>
    <button type="button" class="regia-btn regia-btn--outline" id="btn-copy" style="margin:0">
      Copia link
    </button>
  </div>

  <div class="regia-preview">
    <% unless @stream_closed %>
      <video id="regia-preview" playsinline muted autoplay></video>
    <% end %>
    <div id="regia-preview-placeholder" class="regia-preview__placeholder">
      <%= @stream_closed ? "Diretta terminata" : "Anteprima in attesa del segnale…" %>
    </div>
  </div>

  <section class="regia-scoreboard">
    <p class="regia-sets" id="sets-line"><%= live_score_sets_label(@score) || "—" %></p>
    <p class="regia-score-line" id="score-line"><%= live_score_points_label(@match, @score) %></p>
    <p class="regia-partials" id="partials-line"<%= " hidden" unless live_score_partials_label(@score).present? %>>
      Parziali: <%= live_score_partials_label(@score) %>
    </p>

    <div class="regia-team-row">
      <div>
        <div class="regia-team-name"><%= @team.name %></div>
        <div class="regia-points" id="home-points"><%= @score.home_points %></div>
        <button type="button" class="regia-btn regia-btn--point" data-action="home_point" style="width:100%;margin-top:8px">+1</button>
        <button type="button" class="regia-btn regia-btn--minus" data-action="home_undo" style="width:100%;margin-top:6px">−</button>
      </div>
      <div style="text-align:center;color:var(--regia-muted);font-size:0.72rem;padding-top:24px">
        <%= Scoring::Rules.from_match(@match).points_target(@score.current_set) %> pt
      </div>
      <div>
        <div class="regia-team-name"><%= @match.opponent_name %></div>
        <div class="regia-points" id="away-points"><%= @score.away_points %></div>
        <button type="button" class="regia-btn regia-btn--point" data-action="away_point" style="width:100%;margin-top:8px">+1</button>
        <button type="button" class="regia-btn regia-btn--minus" data-action="away_undo" style="width:100%;margin-top:6px">−</button>
      </div>
    </div>
    <button type="button" class="regia-btn regia-btn--yellow" data-action="close_set" style="margin-top:12px">Chiudi set</button>
  </section>

  <% unless @stream_closed %>
    <button type="button" class="regia-btn regia-btn--outline" id="btn-pause">Interrompi (riprendibile)</button>
    <button type="button" class="regia-btn regia-btn--danger" id="btn-stop">Chiudi diretta</button>
  <% end %>
</div>

<div id="regia-toast" class="regia-toast" role="status"></div>

<div id="regia-modal" class="regia-modal" aria-hidden="true">
  <div class="regia-modal__card">
    <h2 id="modal-title">Set vinto</h2>
    <p id="modal-body"></p>
    <div class="regia-modal__actions">
      <button type="button" class="regia-btn regia-btn--yellow" id="modal-confirm">Chiudi set</button>
      <button type="button" class="regia-btn regia-btn--outline" id="modal-cancel">Annulla</button>
    </div>
  </div>
</div>

<script src="/regia.js?v=2"></script>
