<%- include('../partials/header') %>
<%- include('../partials/sidebar') %>

<div class="dashboard-header" style="margin-bottom: 30px;">
  <h1 class="text-gradient">Controle do AutoDJ</h1>
  <p style="color: var(--text-muted);">Gerencie o transmissor de áudio interno da rádio.</p>
</div>

<div class="dashboard-grid">
  <div class="card">
    <h3>Status do Transmissor (Icecast)</h3>
    <hr style="border-color: rgba(255,255,255,0.05); margin: 15px 0;">
    
    <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
      <div style="width: 20px; height: 20px; border-radius: 50%; background: <%= status.isPlaying ? 'var(--success)' : 'var(--danger)' %>; box-shadow: 0 0 10px <%= status.isPlaying ? 'var(--success)' : 'var(--danger)' %>;"></div>
      <h2 style="margin: 0;"><%= status.isPlaying ? 'ONLINE / TRANSMITINDO' : 'OFFLINE / PARADO' %></h2>
    </div>

    <% if (status.isPlaying && status.currentSong) { %>
      <div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 15px;">
        <i class="fas fa-music fa-2x text-gradient"></i>
        <div>
          <p style="margin: 0; color: var(--text-muted); font-size: 0.9rem;">Tocando agora</p>
          <h4 style="margin: 5px 0 0 0;"><%= status.currentSong.titulo %> - <%= status.currentSong.artista %></h4>
        </div>
      </div>
    <% } %>

    <div style="display: flex; gap: 15px;">
      <% if (!status.isPlaying) { %>
        <form action="/admin/autodj/start" method="POST">
          <button type="submit" class="btn btn-primary" style="padding: 15px 30px; font-weight: bold;">
            <i class="fas fa-play"></i> Ligar AutoDJ
          </button>
        </form>
      <% } else { %>
        <form action="/admin/autodj/stop" method="POST">
          <button type="submit" class="btn btn-danger" style="padding: 15px 30px; font-weight: bold;">
            <i class="fas fa-stop"></i> Desligar AutoDJ
          </button>
        </form>
      <% } %>
    </div>

    <div class="alert alert-warning" style="margin-top: 30px;">
      <i class="fas fa-info-circle"></i> <strong>Requisitos:</strong> O AutoDJ exige que você possua o <code>FFmpeg</code> instalado no servidor e um servidor <code>Icecast</code> acessível pelas credenciais do <code>.env</code>.
    </div>
  </div>
</div>

<%- include('../partials/footer') %>
