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

Finalidade:
1. Layout centralizado e responsivo
2. Troca de imagem mobile/desktop
3. Player profissional completo
4. Exibir nome da música atual
5. Barra de progresso + tempo
6. Volume com persistência
7. Código seguro e estável para iniciantes
*/

$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">

<style>

/* BASE */
body {
    margin:0;
    background:#000;
    color:#fff;
    font-family:'Montserrat', sans-serif;
}

.cv-main {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100vh;
    text-align:center;
}

/* IMAGEM */
.cv-logo {
    width:90vw;
    max-height:60vh;
    object-fit:contain;
}

/* TEXTO */
.cv-aguarde {
    font-size:2.5rem;
    color:#FFD700;
    font-weight:900;
}

.cv-frase {
    font-size:1.2rem;
}

/* PLAYER */
.cv-player {
    width:90%;
    max-width:420px;
    margin-top:20px;
}

/* NOME DA MÚSICA */
.cv-track {
    font-size:14px;
    color:#FFD700;
    margin-bottom:8px;
}

/* CONTROLES */
.cv-controls {
    display:flex;
    justify-content:space-around;
    margin:10px 0;
}

.cv-controls button {
    font-size:28px;
    border:none;
    background:none;
    color:#fff;
}

/* PROGRESSO */
.cv-progress {
    height:6px;
    background:#333;
    margin:10px 0;
    cursor:pointer;
}

.cv-bar {
    height:100%;
    width:0;
    background:#FFD700;
}

/* TEMPO */
.cv-time {
    display:flex;
    justify-content:space-between;
    font-size:12px;
}

/* VOLUME */
#volume {
    width:100%;
}

/* DESKTOP */
@media(min-width:768px){
    .cv-logo { height:80vh; width:auto; }
    .cv-aguarde { font-size:4rem; }
}

</style>

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

<body>

<main class="cv-main">

<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>

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

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

<div class="cv-track" id="trackName">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>
const tracks = <?php echo wp_json_encode($tracks); ?>;

if(tracks.length){

let i=0;

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

/* volume persistente */
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;
    trackName.textContent = tracks[i].name; // 🔥 nome da música
}

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();

/* inicialização */
load();
playMusic();

}
</script>

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