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

<!-- Navbar Mobile -->
<div class="navbar">
    <h3 class="text-neon-blue m-0">Sala: <%= codigo %></h3>
    <button class="btn btn-pink" style="padding: 8px 15px; font-size: 0.8rem;" id="btn-fila" onclick="toggleFila()">
        <i class="fas fa-list"></i> Fila
    </button>
</div>

<div class="mobile-container">
    
    <!-- Busca e Filtros -->
    <div id="view-musicas">
        <div class="mb-4">
            <input type="text" id="busca-input" class="form-control" placeholder="Buscar música ou artista...">
            <select id="categoria-select" class="form-control mt-2">
                <option value="">Todas as Categorias</option>
                <% categorias.forEach(c => { %>
                    <option value="<%= c.id %>"><%= c.nome %></option>
                <% }) %>
            </select>
        </div>

        <div id="lista-musicas">
            <!-- Renderizado via JS -->
            <p class="text-center text-muted"><i class="fas fa-spinner fa-spin"></i> Carregando músicas...</p>
        </div>
    </div>

    <!-- Fila da Sala -->
    <div id="view-fila" style="display: none;">
        <h3 class="text-neon-purple mb-4">Músicas na Fila</h3>
        <div id="lista-fila">
             <!-- Renderizado via JS -->
        </div>
    </div>

</div>

<!-- Player Fixo (Controle Remoto) -->
<div class="mobile-player">
    <div style="flex: 1;">
        <p style="font-size: 0.8rem; margin:0;" class="text-muted">SYNC DA TV:</p>
        <h4 id="mobile-sync-text" class="text-neon-blue" style="margin:0; font-size: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
            -
        </h4>
    </div>
    <div class="player-controls">
        <button onclick="sendCommand('play')"><i class="fas fa-play"></i></button>
        <button onclick="sendCommand('pause')"><i class="fas fa-pause"></i></button>
        <button onclick="sendCommand('next')"><i class="fas fa-step-forward"></i></button>
        
        <!-- Botão de Gravação -->
        <button id="btn-record" onclick="toggleRecording()" style="color: #ff4444;"><i class="fas fa-microphone"></i></button>
    </div>
</div>

<script>
    const ROOM_CODE = '<%= codigo %>';
    const USER_NAME = prompt("Qual o seu nome?", "Cantor"); // Simples captura de nome
</script>
<script src="/js/app.js"></script>

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