<?php $audios = cancao_get_audio_files(); ?>

<?php if (!empty($audios)) : ?>
<div class="cv-player">

    <div class="cv-track" id="trackName">Carregando...</div>

    <div class="cv-controls">
        <button id="prevBtn">⏮</button>
        <button id="playBtn">▶</button>
        <button id="nextBtn">⏭</button>
    </div>

    <input type="range" id="volume" min="0" max="1" step="0.01" value="0.6">

    <audio id="audioPlayer"></audio>

</div>

<script>
document.addEventListener("DOMContentLoaded", function() {

    const tracks = <?php echo json_encode($audios); ?>;

    const player = document.getElementById("audioPlayer");
    const playBtn = document.getElementById("playBtn");
    const nextBtn = document.getElementById("nextBtn");
    const prevBtn = document.getElementById("prevBtn");
    const volume = document.getElementById("volume");
    const trackName = document.getElementById("trackName");

    let current = 0;
    let fading = false;

    function loadTrack(index) {
        player.src = tracks[index].url;
        trackName.textContent = tracks[index].name;
    }

    function fadeIn() {
        let v = 0;
        player.volume = 0;
        const i = setInterval(() => {
            if (v >= volume.value) return clearInterval(i);
            v += 0.05;
            player.volume = v;
        }, 100);
    }

    function fadeOut(callback) {
        let v = player.volume;
        const i = setInterval(() => {
            if (v <= 0.05) {
                clearInterval(i);
                callback();
                return;
            }
            v -= 0.05;
            player.volume = v;
        }, 100);
    }

    function playTrack() {
        player.play().then(() => {
            playBtn.textContent = "⏸";
            fadeIn();
        }).catch(() => {
            playBtn.style.display = "block";
        });
    }

    function nextTrack() {
        if (fading) return;
        fading = true;

        fadeOut(() => {
            current = (current + 1) % tracks.length;
            loadTrack(current);
            playTrack();
            fading = false;
        });
    }

    function prevTrack() {
        if (fading) return;
        fading = true;

        fadeOut(() => {
            current = (current - 1 + tracks.length) % tracks.length;
            loadTrack(current);
            playTrack();
            fading = false;
        });
    }

    playBtn.addEventListener("click", () => {
        if (player.paused) {
            playTrack();
        } else {
            player.pause();
            playBtn.textContent = "▶";
        }
    });

    nextBtn.addEventListener("click", nextTrack);
    prevBtn.addEventListener("click", prevTrack);

    volume.addEventListener("input", () => {
        player.volume = volume.value;
    });

    player.addEventListener("ended", nextTrack);

    // INIT
    loadTrack(current);
    player.volume = volume.value;
    playTrack();

});
</script>
<?php endif; ?>