<?php
require_once __DIR__ . '/includes/bootstrap.php';
$np = ugfx_now_playing();
$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'] ?? '');
$backupUrl = $ugfx['backup_stream_url'] ?? 'http://radio.undergroundfxradio.com:9000/stream2';
$djLabel = trim((string)($np['show_name'] ?? '')) ?: trim((string)($np['dj'] ?? '')) ?: 'Underground FX Radio';
?>
<!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') ?>">
<style>
  html, body { height: 100%; overflow: hidden; }
  body.ugfx-body { margin: 0; }
  .popup-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
  }
  .popup-card {
    width: min(100%, 520px);
    padding: 18px;
    border-radius: 22px;
  }
  .popup-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: center;
  }
  .popup-art {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
  }
  .popup-title {
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: .35rem;
  }
  .popup-sub {
    color: rgba(255,255,255,.72);
    font-size: .95rem;
    margin-bottom: .65rem;
  }
  .popup-audio audio { width: 100%; height: 42px; }
  .popup-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  .popup-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  .popup-actions .btn { border-radius: 999px; }
  @media (max-width: 575.98px) {
    .popup-shell { padding: 10px; align-items: stretch; }
    .popup-card { width: 100%; padding: 14px; border-radius: 18px; }
    .popup-grid { grid-template-columns: 1fr; gap: 12px; text-align: center; }
    .popup-art { width: 108px; height: 108px; margin: 0 auto; }
    .popup-title { font-size: 1.1rem; }
    .popup-actions, .popup-meta { justify-content: center; }
  }
</style>
</head>
<body class="ugfx-body">
<div class="popup-shell">
  <div class="ugfx-card popup-card">
    <div class="ugfx-live-pill mb-3">POPUP PLAYER</div>
    <div class="popup-grid">
      <img src="<?= htmlspecialchars($np['art']) ?>" alt="cover" class="popup-art">
      <div>
        <h1 class="popup-title current-track"><?= htmlspecialchars($np['title']) ?></h1>
        <div class="popup-sub current-artist"><?= htmlspecialchars($np['artist']) ?></div>
        <div class="popup-sub current-dj mb-2"><?= htmlspecialchars($djLabel) ?></div>
        <div class="popup-audio">
          <audio controls autoplay>
            <source src="<?= htmlspecialchars($streamUrl) ?>" type="audio/mpeg">
          </audio>
        </div>
        <div class="popup-meta">
          <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>
        <div class="popup-actions">
          <a class="btn btn-primary btn-sm" href="<?= htmlspecialchars($streamUrl) ?>" target="_blank" rel="noopener">Direct stream</a>
          <a class="btn btn-outline-light btn-sm" href="<?= htmlspecialchars($backupUrl) ?>" target="_blank" rel="noopener">Backup stream</a>
          <button class="btn btn-outline-light btn-sm" type="button" onclick="navigator.clipboard && navigator.clipboard.writeText('<?= htmlspecialchars($streamUrl, ENT_QUOTES) ?>')">Copy link</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
