<script>
document.addEventListener("DOMContentLoaded", function () {
  const containersPlayersAudio = document.querySelectorAll(".audio-players-container");
  const urlsAudios = [
    "URL_DO_AUDIO_1_AQUI",
    "URL_DO_AUDIO_2_AQUI",
    "URL_DO_AUDIO_3_AQUI",
  ];

  const imagensUsuarios = [
    "URL_DA_FOTO_1_AQUI",
    "URL_DA_FOTO_2_AQUI",
    "URL_DA_FOTO_3_AQUI",
  ];

  const iconesSrc = {
    play: "URL_DO_ÍCONE_DE_PLAY_AQUI",
    pause: "URL_DO_ÍCONE_DE_PAUSE_AQUI",
    loop: "URL_DO_ÍCONE_DE_LOADING_AQUI",
    error: "URL_DO_ÍCONE_DE_ERRO_AQUI",
  };

  function formatarTempoParaExibicao(segundos) {
    const milissegundos = segundos * 1000;
    return new Date(milissegundos).toISOString().substr(14, 5);
  }

  function lidarComErroAudio(audio) {
    const erros = {
      1: "Processo abortado pelo usuário",
      2: "Ocorreu um erro no download",
      3: "Erro na execução do áudio",
      4: "Formato de áudio não suportado",
    };
    const mensagemErro = `Erro: ${erros[audio.error.code]}`;
    console.error(mensagemErro);
  }

  function setMessageDate(audioPlayer) {
    setInterval(() => {
      const currentDate = new Date();
      const currentDateTimeString = currentDate.toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
      });
      audioPlayer.style.setProperty(
        "--current-time",
        `'${currentDateTimeString}'`
      );
    }, 1000);
  }

  function criarPlayerAudio(urlAudio, container, imagemUsuario, audioIndex) {
    const playerAudio = document.createElement("div");
    playerAudio.className = "audio-player";
    playerAudio.dataset.url = urlAudio;

    const divPlayer = document.createElement("div");
    divPlayer.className = "player";

    const btnPlayToggle = document.createElement("button");
    btnPlayToggle.type = "button";
    btnPlayToggle.className = "btn-play";

    for (const [key, src] of Object.entries(iconesSrc)) {
      const icone = document.createElement("img");
      icone.className = `icon icon-${key}`;
      icone.src = src;
      icone.alt = key.charAt(0).toUpperCase() + key.slice(1);
      btnPlayToggle.appendChild(icone);
    }

    const linhaDoTempo = document.createElement("div");
    linhaDoTempo.className = "timeline";
    const linha = document.createElement("div");
    linha.className = "line";
    const inputRange = document.createElement("input");
    inputRange.setAttribute("dir", "ltr");
    inputRange.type = "range";
    inputRange.min = "0";
    inputRange.max = "100";
    inputRange.value = "0";
    linha.appendChild(inputRange);
    linhaDoTempo.appendChild(linha);

    const divDados = document.createElement("div");
    divDados.className = "data";
    const divTempoAtual = document.createElement("div");
    divTempoAtual.className = "current-time";
    divDados.appendChild(divTempoAtual);
    divTempoAtual.textContent = "00:00";
    const divTempoTotal = document.createElement("div");
    divTempoTotal.className = "time";
    divDados.appendChild(divTempoTotal);

    linhaDoTempo.appendChild(divDados);

    divPlayer.appendChild(btnPlayToggle);
    divPlayer.appendChild(linhaDoTempo);
    playerAudio.appendChild(divPlayer);

    const divUsuario = document.createElement("div");
    divUsuario.className = "user";
    const imgUsuario = document.createElement("img");
    imgUsuario.src = imagemUsuario;
    divUsuario.appendChild(imgUsuario);

    const divVelocidade = document.createElement("div");
    divVelocidade.className = "speed-control";
    divVelocidade.textContent = "1,0x";
    divUsuario.appendChild(divVelocidade);

    const iconeMicrofone = document.createElement("img");
    iconeMicrofone.src =
      "URL_DO_ÍCONE_DE_MICROFONE_AQUI";
    iconeMicrofone.className = "mic-icon";
    iconeMicrofone.alt = "Mic";
    divUsuario.appendChild(iconeMicrofone);

    playerAudio.appendChild(divUsuario);
    container.appendChild(playerAudio);

    const audio = new Audio(urlAudio);
    let currentSpeedIndex = 0;
    const speeds = [1.0, 1.5, 2.0];

    const updateSpeed = () => {
      audio.playbackRate = speeds[currentSpeedIndex];
      divVelocidade.textContent = `${speeds[currentSpeedIndex]
        .toFixed(1)
        .replace(".", ",")}x`;
    };

    divVelocidade.addEventListener("click", () => {
      currentSpeedIndex = (currentSpeedIndex + 1) % speeds.length;
      updateSpeed();
    });

    btnPlayToggle.addEventListener("click", () => {
      if (audio.paused || audio.ended) {
        audio.play();
        playerAudio.classList.add("playing");
        divUsuario.classList.add("playing");
        imgUsuario.style.display = "none";
        divVelocidade.style.display = "block";
      } else {
        audio.pause();
        playerAudio.classList.remove("playing");
        divUsuario.classList.remove("playing");
        imgUsuario.style.display = "block";
        divVelocidade.style.display = "none";
      }
    });

    inputRange.addEventListener("input", (e) => {
      const percent = e.target.value;
      audio.currentTime = (percent / 100) * audio.duration;
    });

    audio.addEventListener("play", () => {
      playerAudio.classList.add("playing");
      divUsuario.classList.add("playing");
      imgUsuario.style.display = "none";
      divVelocidade.style.display = "block";
    });

    audio.addEventListener("pause", () => {
      playerAudio.classList.remove("playing");
      divUsuario.classList.remove("playing");
      imgUsuario.style.display = "block";
      divVelocidade.style.display = "none";
    });

    audio.addEventListener("ended", () => {
      playerAudio.classList.remove("playing");
      divUsuario.classList.remove("playing");
      imgUsuario.style.display = "block";
      divVelocidade.style.display = "none";
      audio.currentTime = 0;
      audio.dispatchEvent(new Event("timeupdate"));
      if (audio.currentTime === 0) {
        divTempoAtual.textContent = formatarTempoParaExibicao(audio.duration);
      } else {
        const currentTime = formatarTempoParaExibicao(audio.currentTime);
        divTempoAtual.textContent = currentTime;
      }

      if (audioIndex < containersPlayersAudio.length - 1) {
        const nextContainer = containersPlayersAudio[audioIndex + 1];
        const nextPlayer = nextContainer.querySelector('.audio-player');
        if (nextPlayer) {
          nextPlayer.querySelector('.btn-play').click(); 
        }
      }
    });

    audio.addEventListener("timeupdate", () => {
      const percent = (audio.currentTime / audio.duration) * 100;
      inputRange.value = percent;
      linha.style.setProperty("--percentual-reproduzido", `${percent}%`);

      const currentTime = formatarTempoParaExibicao(audio.currentTime);
      if (audio.currentTime === 0) {
        divTempoAtual.textContent = formatarTempoParaExibicao(audio.duration);
      } else {
        const currentTime = formatarTempoParaExibicao(audio.currentTime);
        divTempoAtual.textContent = currentTime;
      }
    });

    audio.addEventListener("loadedmetadata", () => {
      const duration = formatarTempoParaExibicao(audio.duration);
      if (audio.currentTime === 0) {
        divTempoAtual.textContent = formatarTempoParaExibicao(audio.duration);
      } else {
        const currentTime = formatarTempoParaExibicao(audio.currentTime);
        divTempoAtual.textContent = currentTime;
      }
      divTempoTotal.textContent = duration;
    });

    audio.addEventListener("error", () => {
      lidarComErroAudio(audio);
    });

    setMessageDate(playerAudio);
  }

  containersPlayersAudio.forEach((container, index) => {
    const indiceAudio = parseInt(container.dataset.audio) - 1;
    if (indiceAudio >= 0 && indiceAudio < urlsAudios.length) {
      const urlAudio = urlsAudios[indiceAudio];
      const imagemUsuario = imagensUsuarios[indiceAudio];
      criarPlayerAudio(urlAudio, container, imagemUsuario, index);
    } else {
      console.error(
        `Índice de áudio inválido para o container: ${indiceAudio}`
      );
    }
  });
});
</script>