<?php
require_once __DIR__ . '/includes/bootstrap.php';
$np = ugfx_now_playing();
$cfg = ugfx_get_stream_config();
$bootstrapCss = ugfx_vendor_asset('assets/vendor/bootstrap/css/bootstrap.min.css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
$bootstrapIconsCss = ugfx_vendor_asset('assets/vendor/bootstrap-icons/font/bootstrap-icons.css', 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css');
$proxyUrl = $np['proxy_stream_url'] ?? $np['stream_url'] ?? '';
$directUrl = $np['direct_stream_url'] ?? $np['public_stream_url'] ?? ($ugfx['stream_url'] ?? '');
$backupUrl = sprintf('http://%s:%s%s', $cfg['server_ip'], $cfg['server_port'], $cfg['mount_backup'] ?? '/stream2');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($ugfx['popup_title']) ?></title>
<meta name="description" content="Listen live to Underground FX Radio in the popout player.">
<meta name="robots" content="noindex,nofollow">
<link rel="canonical" href="<?= htmlspecialchars(ugfx_current_url()) ?>">
<meta property="og:title" content="<?= htmlspecialchars($ugfx['popup_title']) ?>">
<meta property="og:description" content="Listen live to Underground FX Radio in the popout player.">
<meta property="og:image" content="<?= htmlspecialchars(ugfx_absolute_url(ugfx_asset('img/brand/ugfx-hero.png'))) ?>">
<meta name="twitter:card" content="summary_large_image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Orbitron:wght@700;800&display=swap" rel="stylesheet">
<link href="<?= htmlspecialchars($bootstrapCss) ?>" rel="stylesheet">
<link href="<?= htmlspecialchars($bootstrapIconsCss) ?>" rel="stylesheet">
<link rel="stylesheet" href="<?= ugfx_asset('css/theme.css') ?>">
<link rel="stylesheet" href="<?= ugfx_asset('css/responsive.css') ?>">
<style>
html,body{overflow:hidden;height:100%;}
body.ugfx-body{min-height:100%;}
.ugfx-popup-wrap{min-height:100vh;display:flex;align-items:center;padding:16px;}
.ugfx-popup-shell{width:min(100%,880px);margin:0 auto;}
.ugfx-popup-card{padding:1rem 1rem 1.1rem;border-radius:28px;position:relative;overflow:hidden;}
.ugfx-popup-art{width:100%;max-width:190px;aspect-ratio:1/1;object-fit:cover;border-radius:24px;box-shadow:0 18px 50px rgba(0,0,0,.38),0 0 26px rgba(255,106,0,.12);}
.ugfx-popup-title{font-family:'Orbitron',sans-serif;font-size:clamp(1.25rem,3vw,2rem);line-height:1.02;margin:.15rem 0 .4rem;}
.ugfx-popup-sub{color:var(--ugfx-muted);font-size:.98rem;}
.ugfx-eq{display:flex;align-items:flex-end;gap:5px;height:28px;margin:.75rem 0 .55rem;}
.ugfx-eq span{width:6px;border-radius:999px;background:linear-gradient(180deg,var(--ugfx-orange-2),var(--ugfx-red));animation:ugfxEq 1.1s ease-in-out infinite;box-shadow:0 0 14px rgba(255,106,0,.26);}
.ugfx-eq span:nth-child(1){height:10px;animation-delay:.0s}.ugfx-eq span:nth-child(2){height:24px;animation-delay:.12s}.ugfx-eq span:nth-child(3){height:15px;animation-delay:.22s}.ugfx-eq span:nth-child(4){height:27px;animation-delay:.34s}.ugfx-eq span:nth-child(5){height:18px;animation-delay:.48s}.ugfx-eq span:nth-child(6){height:22px;animation-delay:.18s}.ugfx-eq span:nth-child(7){height:12px;animation-delay:.58s}
@keyframes ugfxEq{0%,100%{transform:scaleY(.65);opacity:.68}50%{transform:scaleY(1.08);opacity:1}}
.ugfx-popup-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.85rem}
.ugfx-popup-actions .btn{padding:.72rem .95rem}
.ugfx-popup-audio{width:100%;min-height:42px;filter:hue-rotate(-4deg) saturate(1.08)}
.ugfx-popup-grid{display:grid;grid-template-columns:200px 1fr;gap:1rem;align-items:center}
.ugfx-popup-note{display:none;margin-top:.75rem;padding:.75rem .9rem;border-radius:18px;background:rgba(255,106,0,.08);border:1px solid rgba(255,154,31,.18);color:var(--ugfx-warm)}
.ugfx-popup-note.show{display:block}
.ugfx-popup-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-top:.85rem}
.ugfx-popup-mini .ugfx-chip{justify-content:center;font-size:.88rem}
@media (max-width:640px){.ugfx-popup-grid{grid-template-columns:1fr;text-align:center}.ugfx-popup-art{max-width:132px;margin:0 auto}.ugfx-popup-mini{grid-template-columns:1fr}.ugfx-popup-actions{justify-content:center}}
</style>
</head>
<body class="ugfx-body">
<div class="ugfx-popup-wrap">
  <div class="ugfx-popup-shell">
    <div class="ugfx-card ugfx-popup-card">
      <div class="ugfx-popup-grid">
        <div>
          <img src="<?= htmlspecialchars($np['art']) ?>" alt="cover" class="ugfx-popup-art">
        </div>
        <div>
          <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap mb-1">
            <span class="ugfx-live-pill">LIVE POPUP PLAYER</span>
            <span class="ugfx-chip"><i class="bi bi-headphones"></i> <span class="listener-count"><?= (int)($np['listeners'] ?? 0) ?></span> listeners</span>
          </div>
          <div class="ugfx-micro-label">UNDERGROUND FX RADIO</div>
          <h1 class="ugfx-popup-title current-track"><?= htmlspecialchars($np['title']) ?></h1>
          <div class="ugfx-popup-sub">On air now: <span class="current-artist"><?= htmlspecialchars($np['display_show'] ?? $np['artist']) ?></span></div>
          <div class="ugfx-eq" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
          <audio id="ugfxAudio" class="ugfx-popup-audio" controls autoplay preload="none" src="<?= htmlspecialchars($proxyUrl) ?>"></audio>
          <div class="ugfx-popup-note" id="popupProxyFail">
            The website proxy did not start cleanly here. Use the direct or backup links below.
          </div>
          <div class="ugfx-popup-actions">
            <button class="btn ugfx-btn-primary" data-player-toggle data-stream-url="<?= htmlspecialchars($proxyUrl) ?>"><i class="bi bi-play-fill"></i> Play Live</button>
            <a class="btn ugfx-btn-outline" href="<?= htmlspecialchars($directUrl) ?>" target="_blank" rel="noopener" data-direct-stream><i class="bi bi-broadcast"></i> Direct Link</a>
            <a class="btn ugfx-btn-outline" href="<?= htmlspecialchars($backupUrl) ?>" target="_blank" rel="noopener"><i class="bi bi-broadcast-pin"></i> Backup Link</a>
            <button class="btn ugfx-btn-outline" data-copy-stream="<?= htmlspecialchars($directUrl) ?>"><i class="bi bi-clipboard"></i> Copy Link</button>
          </div>
          <div class="ugfx-popup-mini">
            <span class="ugfx-chip"><i class="bi bi-disc"></i> <span class="current-track"><?= htmlspecialchars($np['title']) ?></span></span>
            <span class="ugfx-chip"><i class="bi bi-person-badge"></i> <span class="current-artist"><?= htmlspecialchars($np['display_show'] ?? $np['artist']) ?></span></span>
            <span class="ugfx-chip"><i class="bi bi-activity"></i> <?= htmlspecialchars($np['status'] ?? 'Live') ?></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="<?= ugfx_asset('js/app.js') ?>"></script>
<script>
(function(){
  const audio=document.getElementById('ugfxAudio');
  const note=document.getElementById('popupProxyFail');
  if(!audio||!note) return;
  const showFail=()=>note.classList.add('show');
  audio.addEventListener('error',showFail);
  audio.addEventListener('stalled',showFail);
  audio.addEventListener('abort',showFail);
})();
</script>
</body>
</html>
