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

<div class="stage-bg"></div>
<div class="stage-lights"></div>

<div class="tv-container">
    
    <div class="tv-hud-top">
        <div class="glass-card">
            <h3 class="text-neon-blue">SALA: <%= codigo %></h3>
        </div>
        <div class="glass-card" id="now-playing" style="display: none;">
            <h3 class="text-neon-pink" id="np-title">Música</h3>
            <p class="text-muted" id="np-artist">Artista</p>
        </div>
    </div>

    <!-- Letras -->
    <div class="lyrics-container" id="lyrics-box" style="display: none;">
        <!-- Linhas injetadas via JS -->
    </div>

    <!-- Tela de Espera -->
    <div id="waiting-screen" class="text-center">
        <h1 class="text-neon-purple" style="font-size: 5rem; margin-bottom: 20px;">Videokê AI</h1>
        <h2 style="font-size: 2rem;">Aguardando Músicas...</h2>
        <p class="mt-4" style="font-size: 1.5rem; color: var(--text-muted);">
            Escaneie o QR Code ou acesse o site e digite o código <strong><%= codigo %></strong> para controlar a festa!
        </p>
    </div>

    <!-- Pontuação -->
    <div id="score-screen" class="glass-card text-center" style="display: none; padding: 50px; z-index: 10;">
        <h2 class="text-neon-blue mb-4" style="font-size: 3rem;">Resultado!</h2>
        <div style="font-size: 2rem; margin-bottom: 20px;">
            <span class="text-muted">Ritmo:</span> <span id="score-rhythm" class="text-neon-pink">0</span>
        </div>
        <div style="font-size: 2rem; margin-bottom: 20px;">
            <span class="text-muted">Participação:</span> <span id="score-part" class="text-neon-purple">0</span>
        </div>
        <hr style="border-color: rgba(255,255,255,0.1); margin: 30px 0;">
        <h1 class="text-neon-blue" style="font-size: 5rem; margin-bottom: 20px;" id="score-final">0</h1>
        <h3 id="score-msg" style="font-size: 2rem;">Mensagem</h3>
    </div>

    <div class="tv-next-song" id="next-song-box" style="display: none;">
        <p class="text-muted" style="margin:0;">PRÓXIMA</p>
        <h4 class="text-neon-blue" style="margin:5px 0 0 0;" id="next-song-title">-</h4>
        <small id="next-song-singer">-</small>
    </div>

    <div class="tv-qr-box" id="qr-container">
        <button onclick="document.getElementById('qr-container').style.display='none'" style="position: absolute; top: -10px; right: -10px; background: var(--neon-pink); border: none; border-radius: 50%; color: white; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-pink);">
            <i class="fas fa-times"></i>
        </button>
        <div id="qrcode"></div>
        <h4 class="mt-2 text-neon-blue"><%= codigo %></h4>
    </div>

</div>

<!-- Player Oculto -->
<audio id="tv-audio" src="" preload="auto"></audio>

<!-- QR Code Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    const ROOM_CODE = '<%= codigo %>';
    const APP_URL = '<%= appUrl %>';
</script>
<script src="/js/tv.js"></script>

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