<?php
declare(strict_types=1);

/**
 * functional/audio/app.php
 * Відповідає за:
 * - “режим плеєра”: аудіо грає, а сайт відкривається в iframe (музика не зупиняється)
 * - панель керування: prev/next/play/pause + прогрес + гучність
 * - підвантаження треків/плейлистів через API
 */

require_once __DIR__ . '/_boot.php';

$lang = audio_lang();

/**
 * iframe source:
 * - можна передати ?to=/profile/username або ?to=/group/...
 * - дозволяємо тільки локальні шляхи
 */
$frameSrc = '/';
if (function_exists('get_str')) {
    $frameSrc = get_str('to', '/');
} else {
    $frameSrc = (string)($_GET['to'] ?? '/');
}

if (!function_exists('safe_local_path')) {
    function safe_local_path(string $path, string $fallback = '/'): string
    {
        $path = trim(str_replace(["\0", "\r", "\n"], '', $path));
        if ($path === '') return $fallback;

        $p = parse_url($path);
        $pathOnly = (string)($p['path'] ?? '');
        $q = isset($p['query']) && $p['query'] !== '' ? ('?' . $p['query']) : '';
        $out = $pathOnly . $q;

        if ($out === '' || $out[0] !== '/') $out = '/' . ltrim($out, '/');
        if (str_contains($out, "\0")) return $fallback;

        return $out;
    }
}

$frameSrc = safe_local_path($frameSrc, '/');

$canonical = '/functional/audio/app.php';
if (function_exists('abs_url')) {
    $canonical = abs_url('/functional/audio/app.php');
}

?>
<!doctype html>
<html lang="<?= h($lang) ?>">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title><?= h(audio_t('audio_app')) ?></title>

  <!-- SEO: functional/app — не індексуємо -->
  <meta name="robots" content="noindex, nofollow, noarchive, nosnippet">
  <link rel="canonical" href="<?= h((string)$canonical) ?>">

  <link rel="stylesheet" href="/css/audio.css?v=1">
</head>
<body class="audio-app">

  <div class="audio-app-top">
    <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
      <div style="font-weight:900;letter-spacing:.2px;">🎧 <?= h(audio_t('audio')) ?></div>
      <a class="audio-btn audio-btn-primary" href="/functional/audio/" style="border-color:#fff;">← <?= h(audio_t('my_music')) ?></a>
      <span class="audio-badge" style="border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;">
        <?= h(audio_t('site_inside')) ?>
      </span>
    </div>
    <div style="opacity:.8;font-size:13px;">
      <?= h((string)($me['username'] ?? '')) ?>
    </div>
  </div>

  <div class="audio-app-main">
    <div class="audio-app-sidebar">
      <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;">
        <div style="font-weight:800;"><?= h(audio_t('tracks')) ?></div>
        <button class="audio-btn" type="button" onclick="VMPlayer.playAll();" title="<?= h(audio_t('play_all')) ?>">▶ <?= h(audio_t('play_all')) ?></button>
      </div>

      <div id="vmTracks" class="audio-list"></div>

      <hr style="border-color:rgba(255,255,255,.12);">

      <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;">
        <div style="font-weight:800;"><?= h(audio_t('playlists')) ?></div>
      </div>
      <div id="vmPlaylists" class="audio-list"></div>
      <div id="vmPlaylistTracks" class="audio-list" style="margin-top:10px;"></div>
    </div>

    <div class="audio-app-frame">
      <iframe id="vmFrame"
              src="<?= h($frameSrc) ?>"
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"
              title="VMEREGI">
      </iframe>
    </div>
  </div>

  <div class="audio-playerbar">
    <div class="audio-now">
      <div class="t1" id="vmNowTitle">—</div>
      <div class="t2" id="vmNowArtist"> </div>

      <div class="audio-progress">
        <div id="vmCur">0:00</div>
        <input id="vmSeek" type="range" min="0" max="1000" value="0" aria-label="Seek">
        <div id="vmDur">0:00</div>
      </div>
    </div>

    <div>
      <div class="audio-controls">
        <button class="audio-iconbtn" type="button" id="vmPrev" title="Prev" aria-label="Prev">⏮</button>
        <button class="audio-iconbtn primary" type="button" id="vmPlay" title="Play/Pause" aria-label="Play/Pause">▶</button>
        <button class="audio-iconbtn" type="button" id="vmNext" title="Next" aria-label="Next">⏭</button>
      </div>
    </div>

    <div class="audio-right">
      <span style="opacity:.8;">🔊</span>
      <input id="vmVol" type="range" min="0" max="100" value="80" aria-label="Volume">
    </div>

    <audio id="vmAudio" preload="metadata"></audio>
  </div>

  <script src="/functional/audio/player.js?v=1" defer></script>
</body>
</html>