<?php
require_once __DIR__ . '/includes/bootstrap.php';
$np = ugfx_now_playing();
$show = ugfx_current_show();
$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');
$streamUrl = $np['stream_url'] ?: ($ugfx['stream_url'] ?? '');
$directUrl = $np['direct_stream_url'] ?: $np['public_stream_url'] ?: $streamUrl;
$copyUrl = $directUrl ?: $streamUrl;
$isLive = !empty($np['is_live']);
$statusLabel = $isLive ? ($show['current'] ?? 'LIVE DJ') : 'Underground FX AutoDJ';
?>
<!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>
<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 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">
    <div class="ugfx-popup-topbar">
      <span class="ugfx-live-pill">POPUP PLAYER</span>
      <div class="ugfx-popup-actions">
        <a class="btn ugfx-btn-outline btn-sm" href="index.php"><i class="bi bi-house-door"></i> Back to website</a>
        <a class="btn ugfx-btn-outline btn-sm" href="<?= htmlspecialchars($directUrl) ?>" target="_blank" rel="noopener" data-direct-stream><i class="bi bi-broadcast"></i> Open stream</a>
        <button class="btn ugfx-btn-primary btn-sm" type="button" data-copy-stream="<?= htmlspecialchars($copyUrl) ?>"><i class="bi bi-link-45deg"></i> Copy link</button>
      </div>
    </div>

    <div class="ugfx-popup-grid">
      <section class="ugfx-popup-main ugfx-card text-center">
        <div class="ugfx-popup-art-wrap">
          <img src="<?= htmlspecialchars($np['art']) ?>" alt="cover" class="ugfx-popup-art">
          <div class="ugfx-popup-eq" aria-hidden="true">
            <span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>

        <div class="ugfx-popup-track-wrap">
          <div class="ugfx-micro-label">CURRENT TRACK</div>
          <h1 class="ugfx-popup-track current-track"><?= htmlspecialchars($np['title']) ?></h1>
          <p class="ugfx-popup-subline">
            <span class="current-artist"><?= htmlspecialchars($np['artist']) ?></span>
          </p>
        </div>

        <div class="ugfx-popup-player-wrap">
          <audio id="ugfxAudio" controls autoplay preload="none" class="ugfx-popup-audio" src="<?= htmlspecialchars($streamUrl) ?>">
            <source src="<?= htmlspecialchars($streamUrl) ?>" type="audio/mpeg">
          </audio>
          <div class="ugfx-popup-fallback-row">
            <a class="btn ugfx-btn-primary btn-sm" href="<?= htmlspecialchars($directUrl) ?>" target="_blank" rel="noopener" data-direct-stream>
              <i class="bi bi-play-fill"></i> Open fallback player
            </a>
            <a class="btn ugfx-btn-outline btn-sm" href="<?= htmlspecialchars($streamUrl) ?>" target="_blank" rel="noopener">
              <i class="bi bi-box-arrow-up-right"></i> Direct stream URL
            </a>
          </div>
        </div>

        <div class="ugfx-popup-chip-row">
          <span class="ugfx-chip ugfx-status-chip <?= $isLive ? 'is-live' : 'is-autodj' ?>" data-popup-status data-live-label="<?= htmlspecialchars($show['current'] ?: 'LIVE DJ', ENT_QUOTES) ?>" data-autodj-label="Underground FX AutoDJ">
            <i class="bi <?= $isLive ? 'bi-broadcast-pin' : 'bi-vinyl-fill' ?>"></i>
            <span><?= htmlspecialchars($statusLabel) ?></span>
          </span>
          <span class="ugfx-chip ugfx-listener-chip"><i class="bi bi-headphones"></i> <span class="listener-count"><?= number_format((int) $np['listeners']) ?></span> listeners</span>
        </div>
      </section>

      <aside class="ugfx-popup-side">
        <div class="ugfx-card ugfx-popup-showcard">
          <div class="ugfx-micro-label">CURRENT SHOW</div>
          <h3 class="live-now-label" data-schedule="<?= htmlspecialchars($show['current'], ENT_QUOTES) ?>"><?= htmlspecialchars($show['current']) ?></h3>
          <p class="text-secondary mb-0"><?= htmlspecialchars($show['day']) ?> · <?= date('g:i A') ?></p>
        </div>
        <div class="ugfx-card ugfx-popup-showcard">
          <div class="ugfx-micro-label">UP NEXT</div>
          <h4 class="live-next-label" data-schedule="<?= htmlspecialchars($show['next'], ENT_QUOTES) ?>"><?= htmlspecialchars($show['next']) ?></h4>
          <p class="text-secondary mb-0">Next hour slot</p>
        </div>
        <div class="ugfx-card ugfx-popup-links">
          <div class="ugfx-micro-label mb-2">QUICK ACCESS</div>
          <a class="ugfx-stack-link" href="listen-live.php"><span><strong>Full listen page</strong><small>Jump back to the main player page</small></span><i class="bi bi-arrow-right"></i></a>
          <a class="ugfx-stack-link" href="schedule.php"><span><strong>Schedule</strong><small>See the full station board</small></span><i class="bi bi-calendar3"></i></a>
          <a class="ugfx-stack-link" href="chat.php"><span><strong>Chat</strong><small>Join the community live</small></span><i class="bi bi-chat-dots"></i></a>
        </div>
      </aside>
    </div>
  </div>
</div>
<script src="<?= ugfx_asset('js/app.js') ?>"></script>
<script>
(function(){
  const audio = document.getElementById('ugfxAudio');
  if (!audio) return;
  const fallback = <?= json_encode($directUrl ?: $streamUrl) ?>;
  let switched = false;
  const tryFallback = () => {
    if (switched || !fallback || audio.src === fallback) return;
    switched = true;
    audio.src = fallback;
    audio.load();
    audio.play().catch(() => {});
  };
  audio.addEventListener('error', tryFallback);
  audio.addEventListener('stalled', () => setTimeout(tryFallback, 2500), { once: true });
})();
</script>
</body>
</html>
