<?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');
$mainStream = trim((string)($np['direct_stream_url'] ?: ($ugfx['stream_url'] ?? '')));
$backupStream = sprintf('http://%s:%s%s', $cfg['server_ip'], $cfg['server_port'], $cfg['mount_backup']);
?>
<!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&family=Orbitron:wght@700;800&display=swap" rel="stylesheet"><link href="<?= htmlspecialchars($bootstrapCss) ?>" rel="stylesheet"><link rel="stylesheet" href="<?= ugfx_asset('css/theme.css') ?>">
</head>
<body class="ugfx-body ugfx-popup-body">
<div class="container py-4 py-lg-5">
  <div class="ugfx-popup-shell mx-auto">
    <div class="ugfx-popup-glow"></div>
    <div class="ugfx-popup-card text-center">
      <div class="ugfx-live-pill mb-3">LIVE POPUP PLAYER</div>
      <img src="<?= htmlspecialchars($np['art']) ?>" alt="Underground FX cover art" class="img-fluid ugfx-popup-art mb-3">
      <div class="ugfx-micro-label">CURRENT TRACK</div>
      <h1 class="h2 mb-2 current-track"><?= htmlspecialchars($np['title']) ?></h1>
      <p class="text-secondary mb-2">Current DJ / show: <span class="current-artist"><?= htmlspecialchars($np['display_show'] ?? $np['artist']) ?></span></p>
      <div class="d-flex justify-content-center gap-2 flex-wrap mb-3">
        <span class="ugfx-chip"><i class="bi bi-broadcast-pin"></i> <?= htmlspecialchars($np['status']) ?></span>
        <span class="ugfx-chip"><i class="bi bi-headphones"></i> <span class="listener-count"><?= (int) $np['listeners'] ?></span> listener<?= ((int)$np['listeners'] === 1 ? '' : 's') ?></span>
      </div>
      <audio id="ugfxAudio" controls autoplay style="width:100%;" src="<?= htmlspecialchars($np['stream_url'] ?: $mainStream) ?>"><source src="<?= htmlspecialchars($np['stream_url'] ?: $mainStream) ?>" type="audio/mpeg"></audio>
      <div class="ugfx-popup-actions mt-3">
        <button class="btn ugfx-btn-primary" data-player-toggle data-stream-url="<?= htmlspecialchars($np['stream_url'] ?: $mainStream) ?>"><i class="bi bi-play-fill"></i> Play live</button>
        <a class="btn ugfx-btn-outline" href="<?= htmlspecialchars($mainStream) ?>" target="_blank" rel="noopener" data-direct-stream><i class="bi bi-broadcast"></i> Direct link</a>
        <a class="btn ugfx-btn-outline" href="<?= htmlspecialchars($backupStream) ?>" target="_blank" rel="noopener"><i class="bi bi-shield-check"></i> Backup stream</a>
        <button class="btn ugfx-btn-outline" type="button" data-copy-stream="<?= htmlspecialchars($mainStream) ?>"><i class="bi bi-copy"></i> Copy link</button>
      </div>
      <div class="ugfx-popup-note mt-3">The popup player now follows the active Underground FX source automatically and keeps a backup stream ready if you need it.</div>
    </div>
  </div>
</div>
<script src="<?= ugfx_asset('js/app.js') ?>"></script>
</body>
</html>
