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

<div class="navbar">
    <h3 class="text-neon-blue m-0">Editor de Sincronização: <%= musica.titulo %></h3>
    <a href="/admin/musicas" class="btn btn-pink" style="padding: 5px 15px; font-size: 0.9rem;">Voltar</a>
</div>

<div class="mobile-container mt-4" style="max-width: 900px; display: flex; gap: 20px;">
    
    <!-- Player e Controles -->
    <div style="flex: 1;">
        <div class="glass-card mb-4 text-center">
            <audio id="audio-player" src="<%= musica.arquivo_mp3 %>" controls style="width: 100%;"></audio>
            <div class="mt-2 text-neon-blue" style="font-size: 2rem;" id="time-display">00:00.000</div>
        </div>

        <div class="glass-card mb-4">
            <h4 class="text-muted mb-2">Importar Letra (Texto Puro)</h4>
            <textarea id="texto-import" class="form-control" rows="8" placeholder="Cole a letra da música aqui, cada frase em uma linha..."></textarea>
            <button class="btn btn-neon mt-2" style="width: 100%;" onclick="importText()">Gerar Linhas</button>
        </div>
        
        <button class="btn btn-pink" style="width: 100%; padding: 15px; font-size: 1.2rem;" onclick="saveSync()">
            <i class="fas fa-save"></i> SALVAR SINCRONIZAÇÃO
        </button>
    </div>

    <!-- Lista de Linhas -->
    <div style="flex: 1;" class="glass-card" id="linhas-container">
        <p class="text-muted text-center" id="empty-msg">Nenhuma linha. Importe o texto ao lado.</p>
        <!-- Linhas dinâmicas aqui -->
    </div>

</div>

<script>
    const audio = document.getElementById('audio-player');
    const timeDisplay = document.getElementById('time-display');
    const container = document.getElementById('linhas-container');
    const emptyMsg = document.getElementById('empty-msg');
    
    let linhas = <%- JSON.stringify(letras) %>;

    function renderLinhas() {
        if(linhas.length > 0) emptyMsg.style.display = 'none';
        
        container.innerHTML = '';
        linhas.forEach((linha, idx) => {
            const div = document.createElement('div');
            div.className = 'mb-2 p-2';
            div.style.border = '1px solid rgba(255,255,255,0.1)';
            div.style.borderRadius = '5px';
            div.style.background = 'rgba(0,0,0,0.5)';
            
            div.innerHTML = `
                <div style="display: flex; gap: 10px; align-items: center;">
                    <button class="btn btn-neon" style="padding: 5px 10px;" onclick="syncLine(${idx})"><i class="fas fa-stopwatch"></i> Sync</button>
                    <input type="number" class="form-control" style="margin: 0; width: 100px; padding: 5px;" value="${linha.tempo_ms}" onchange="updateTime(${idx}, this.value)">
                    <select class="form-control" style="margin: 0; width: 120px; padding: 5px;" onchange="updateCantor(${idx}, this.value)">
                        <option value="3" ${linha.tipo_cantor == 3 ? 'selected' : ''}>Todos</option>
                        <option value="1" ${linha.tipo_cantor == 1 ? 'selected' : ''}>Cantor 1</option>
                        <option value="2" ${linha.tipo_cantor == 2 ? 'selected' : ''}>Cantor 2</option>
                    </select>
                    <button class="btn btn-pink" style="padding: 5px 10px;" onclick="removeLine(${idx})"><i class="fas fa-trash"></i></button>
                </div>
                <input type="text" class="form-control mt-2" style="margin-bottom:0;" value="${linha.texto}" onchange="updateText(${idx}, this.value)">
            `;
            container.appendChild(div);
        });
    }

    // Inicializar
    if(linhas.length > 0) renderLinhas();

    function importText() {
        const text = document.getElementById('texto-import').value;
        const arr = text.split('\\n').filter(l => l.trim() !== '');
        
        arr.forEach(txt => {
            linhas.push({ tempo_ms: 0, texto: txt.trim(), tipo_cantor: 3 });
        });
        
        document.getElementById('texto-import').value = '';
        renderLinhas();
    }

    function syncLine(idx) {
        linhas[idx].tempo_ms = Math.floor(audio.currentTime * 1000);
        renderLinhas();
    }

    function updateTime(idx, val) { linhas[idx].tempo_ms = parseInt(val); }
    function updateText(idx, val) { linhas[idx].texto = val; }
    function updateCantor(idx, val) { linhas[idx].tipo_cantor = parseInt(val); }
    
    function removeLine(idx) {
        linhas.splice(idx, 1);
        renderLinhas();
    }

    audio.addEventListener('timeupdate', () => {
        const ms = Math.floor(audio.currentTime * 1000);
        const mins = Math.floor(ms / 60000).toString().padStart(2, '0');
        const secs = Math.floor((ms % 60000) / 1000).toString().padStart(2, '0');
        const millis = (ms % 1000).toString().padStart(3, '0');
        timeDisplay.innerText = `${mins}:${secs}.${millis}`;
    });

    async function saveSync() {
        const payload = { linhas };
        try {
            const res = await fetch('/admin/musicas/sincronizar/<%= musica.id %>/salvar', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const data = await res.json();
            if(data.success) {
                alert('Sincronização salva com sucesso!');
            } else {
                alert('Erro ao salvar.');
            }
        } catch(e) {
            console.error(e);
            alert('Erro no servidor');
        }
    }
</script>

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