<?php
/*
Arquivo: /wp-content/themes/cancao/index.php

Finalidade:
1. Layout mobile-first
2. Troca automática de imagem (mobile vs desktop)
3. Player central estilo app
4. Controles grandes para toque
5. Barra de progresso interativa
6. Persistência de volume
7. Performance otimizada
*/

$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 RESPONSIVA -->
    <picture>
        <source srcset="<?php echo get_template_directory_uri(); ?>/assets/imagens/logo.png" media="(max-width: 768px)">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/imagens/youtube.png" class="cv-logo">
    </picture>

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

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

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

        <div class="cv-controls">
            <button id="prev">⏮</button>
            <button id="play">▶</button>
            <button id="next">⏭</button>
        </div>

        <div class="cv-progress" id="progress">
            <div class="cv-bar" id="bar"></div>
        </div>

        <div class="cv-time">
            <span id="current">00:00</span>
            <span id="duration">00:00</span>
        </div>

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

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

    </div>
    <?php endif; ?>

</main>

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

    const tracks = <?php echo wp_json_encode($tracks); ?>;
    if (!tracks.length) return;

    let i = 0;

    const audio = document.getElementById("audio");
    const play = document.getElementById("play");
    const next = document.getElementById("next");
    const prev = document.getElementById("prev");
    const volume = document.getElementById("volume");
    const bar = document.getElementById("bar");
    const progress = document.getElementById("progress");
    const track = document.getElementById("track");
    const current = document.getElementById("current");
    const duration = document.getElementById("duration");

    volume.value = localStorage.getItem("vol") || 0.7;
    audio.volume = volume.value;

    function format(t){
        if(!t) return "00:00";
        let m = Math.floor(t/60);
        let s = Math.floor(t%60);
        return String(m).padStart(2,'0')+":"+String(s).padStart(2,'0');
    }

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

    function playMusic(){
        audio.play();
        play.innerText="⏸";
    }

    function pauseMusic(){
        audio.pause();
        play.innerText="▶";
    }

    play.onclick = () => audio.paused ? playMusic() : pauseMusic();
    next.onclick = () => { i=(i+1)%tracks.length; load(); playMusic(); };
    prev.onclick = () => { i=(i-1+tracks.length)%tracks.length; load(); playMusic(); };

    volume.oninput = () => {
        audio.volume = volume.value;
        localStorage.setItem("vol", volume.value);
    };

    audio.ontimeupdate = () => {
        bar.style.width = (audio.currentTime/audio.duration*100)+"%";
        current.textContent = format(audio.currentTime);
        duration.textContent = format(audio.duration);
    };

    progress.onclick = e => {
        let pct = e.offsetX / progress.offsetWidth;
        audio.currentTime = pct * audio.duration;
    };

    audio.onended = () => next.onclick();

    load();
});
</script>

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