<?php
$tracks = function_exists('cancao_get_audio_files') ? cancao_get_audio_files() : array();
?><!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title><?php bloginfo('name'); ?></title>

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">

<?php wp_head(); ?>
</head>
<body>

<main class="cv-main">

    <!-- IMAGEM -->
    <img
        src="<?php echo esc_url( get_template_directory_uri() . '/assets/imagens/youtube.png' ); ?>"
        alt="Canção Verdadeira"
        class="cv-logo"
    >

    <!-- TEXTO -->
    <div class="cv-texto">
        <div class="cv-aguarde">AGUARDE</div>
        <div class="cv-frase">Em breve nosso site estará no ar</div>
    </div>

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

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

        <div class="cv-controls">
            <button id="prevBtn" aria-label="Anterior">⏮</button>
            <button id="playBtn" aria-label="Play/Pause">▶</button>
            <button id="nextBtn" aria-label="Próxima">⏭</button>
        </div>

        <input type="range" id="cvVolume" min="0" max="1" step="0.01" value="0.6" aria-label="Volume">

        <audio id="cvAudio" preload="auto"></audio>
    </div>

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

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

        const audio = document.getElementById('cvAudio');
        const playBtn = document.getElementById('playBtn');
        const nextBtn = document.getElementById('nextBtn');
        const prevBtn = document.getElementById('prevBtn');
        const volume = document.getElementById('cvVolume');
        const label = document.getElementById('cvTrack');

        let index = 0;
        let fading = false;

        function load(i) {
            audio.src = tracks[i].url;
            label.textContent = tracks[i].name;
        }

        function fadeIn() {
            let v = 0;
            audio.volume = 0;
            const target = parseFloat(volume.value || 0.6);
            const step = 0.04;
            const t = setInterval(() => {
                v += step;
                if (v >= target) {
                    audio.volume = target;
                    clearInterval(t);
                } else {
                    audio.volume = v;
                }
            }, 100);
        }

        function fadeOut(cb) {
            let v = audio.volume;
            const step = 0.04;
            const t = setInterval(() => {
                v -= step;
                if (v <= 0.02) {
                    audio.volume = 0;
                    clearInterval(t);
                    cb && cb();
                } else {
                    audio.volume = v;
                }
            }, 100);
        }

        function play() {
            audio.play().then(() => {
                playBtn.textContent = '⏸';
                fadeIn();
            }).catch(() => {
                // Autoplay bloqueado — usuário precisa clicar
                playBtn.textContent = '▶';
            });
        }

        function pause() {
            audio.pause();
            playBtn.textContent = '▶';
        }

        function next() {
            if (fading) return;
            fading = true;
            fadeOut(() => {
                index = (index + 1) % tracks.length;
                load(index);
                play();
                fading = false;
            });
        }

        function prev() {
            if (fading) return;
            fading = true;
            fadeOut(() => {
                index = (index - 1 + tracks.length) % tracks.length;
                load(index);
                play();
                fading = false;
            });
        }

        playBtn.addEventListener('click', () => {
            if (audio.paused) play(); else pause();
        });

        nextBtn.addEventListener('click', next);
        prevBtn.addEventListener('click', prev);

        volume.addEventListener('input', () => {
            audio.volume = parseFloat(volume.value || 0.6);
        });

        audio.addEventListener('ended', next);

        // init
        load(index);
        audio.volume = parseFloat(volume.value || 0.6);
        play();

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

</main>

<?php wp_footer(); ?>
</body>
</html>