<?php
declare(strict_types=1);

require_once __DIR__ . '/concha.php';
require_once __DIR__ . '/concha_extras.php';

// Idioma (igual que tu base)
$lang_actual = $lang_actual ?? 'es';
if ($lang_actual === 'pt') {
    require_once __DIR__ . '/langes_pt_no_panel.php';
} else {
    require_once __DIR__ . '/lang_es_no_panel.php';
}

// Stream (viene de concha.php)
$streamUrl = $ip_stream ?? '';

// Estilos (vienen de tu config)
$bg         = $d_color_fondo_menu ?? '#0b0f17';
$iconColor  = $d_color_menu ?? 'rgba(255,255,255,.92)';
$titleFont  = $style_titulo ?? 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif';
$bodyFont   = $style_bajada ?? 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif';
?>
<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Radio en Vivo</title>

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">

  <style>
    html, body { height: 100%; }
    body{
      margin:0;
      height:100vh;
      background: <?= htmlspecialchars((string)$bg, ENT_QUOTES, 'UTF-8') ?> !important;
      font-family: <?= htmlspecialchars((string)$bodyFont, ENT_QUOTES, 'UTF-8') ?>;
      overflow:hidden;
    }

    /* Contenedor: centrado vertical, pegado a la izquierda */
    .stage{
      height:100vh;
      display:flex;
      align-items:center;      /* centro vertical */
      justify-content:flex-start; /* izquierda */
      padding-left: 22px;
    }

    .cluster{
      display:flex;
      align-items:center;
      gap: 14px;
    }

    /* Botón circular */
    #btn{
      width: 64px;
      height: 64px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      outline:none;
      transition: transform .12s ease, border-color .2s ease, background .2s ease;
    }
    #btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.32); }
    #btn:active{ transform: scale(.985); }

    #btn i{
      color: <?= htmlspecialchars((string)$iconColor, ENT_QUOTES, 'UTF-8') ?>;
      font-size: 1.8rem;
      line-height: 1;
    }

    /* Vúmetro: se anima solo cuando está en play */
    .vumeter{
      height: 26px;
      display:flex;
      align-items:flex-end;
      gap: 5px;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
    }

    .bar{
      width: 5px;
      height: 7px;
      border-radius: 6px;
      background: rgba(255,255,255,.85);
      transform-origin: bottom;
      transform: scaleY(.25);
      animation: bounce 900ms ease-in-out infinite;
      animation-play-state: paused; /* default */
      opacity:.85;
    }

    .playing .bar{ animation-play-state: running; }

    @keyframes bounce{
      0%{ transform: scaleY(.25); opacity:.55; }
      35%{ transform: scaleY(1); opacity:.95; }
      70%{ transform: scaleY(.45); opacity:.75; }
      100%{ transform: scaleY(.25); opacity:.55; }
    }
    .bar:nth-child(1){ animation-duration: 780ms; animation-delay:-120ms; }
    .bar:nth-child(2){ animation-duration: 920ms; animation-delay:-340ms; }
    .bar:nth-child(3){ animation-duration: 860ms; animation-delay:-210ms; }
    .bar:nth-child(4){ animation-duration: 1020ms; animation-delay:-460ms; }
    .bar:nth-child(5){ animation-duration: 840ms; animation-delay:-300ms; }
    .bar:nth-child(6){ animation-duration: 980ms; animation-delay:-520ms; }

    /* Audio oculto */
    audio{ display:none; }
  </style>
</head>

<body>
  <div class="stage">
    <div class="cluster" id="uiRoot">
      <button id="btn" type="button" aria-label="Reproducir / Pausar" aria-pressed="false">
        <i id="icon" class="fas fa-play"></i>
      </button>

      <div class="vumeter" aria-hidden="true">
        <span class="bar"></span><span class="bar"></span><span class="bar"></span>
        <span class="bar"></span><span class="bar"></span><span class="bar"></span>
      </div>
    </div>
  </div>

  <audio id="player" preload="none" src="<?= htmlspecialchars((string)$streamUrl, ENT_QUOTES, 'UTF-8') ?>"></audio>

  <script>
    (function(){
      const root  = document.getElementById('uiRoot');
      const btn   = document.getElementById('btn');
      const icon  = document.getElementById('icon');
      const audio = document.getElementById('player');

      function setUI(isPlaying){
        root.classList.toggle('playing', isPlaying);
        btn.setAttribute('aria-pressed', isPlaying ? 'true' : 'false');
        icon.classList.toggle('fa-play', !isPlaying);
        icon.classList.toggle('fa-pause', isPlaying);
      }

      async function toggle(){
        if (!audio.src) return;

        try{
          if (audio.paused){
            await audio.play();
          } else {
            audio.pause();
          }
        } catch(e){
          setUI(false);
        }
      }

      btn.addEventListener('click', toggle);
      audio.addEventListener('play',  () => setUI(true));
      audio.addEventListener('pause', () => setUI(false));
      audio.addEventListener('ended', () => setUI(false));
      audio.addEventListener('error', () => setUI(false));

      setUI(false);
    })();
  </script>
</body>
</html>